Search code examples
iosswiftuibuttonfadeinanimatewithduration

UIButton Text Animation Not Animating


Upon a button's touchUpInside, it runs a series of code (all data related, none of the code in the main function modifies a view object) and the last thing that code does is call the animation function that I've pasted below. The problem is, the animation looks nothing like it should.

Desired animation:

  1. The footerImg should fade out
  2. The footerBar text should fade in
  3. The footerBar text should fade out
  4. The footerImg should fade back in

The text and image occupy the same position on the screen, so the visual should be of one replacing the other, and then it going back to the original state. The views are not nested in each other, they share the same container.

Actual animation seen in simulator:

-footerImg is never even visible -footerBar text appears immediately after trigger is tapped, no animation -footerBar text fades out -footerImg fades in

footerBar is a UIButton

-It's starting state, before the action ever begins, is that the button is empty and clear (invisible to user)

-In case it matters, this is not the button that triggered the function

-Has a clear background, so its text should be the only thing animating in/out

footerImg is a UIImageView

-Just an icon image, nothing special

func animateFeedback() {
    UIView.animateWithDuration(0.25, delay: 0.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 0, options: nil, animations: {
            self.footerImg.alpha = 0
            self.footerBar.alpha = 0

    },
        completion: { finished in
            self.footerBar.setTitle("Item added", forState: UIControlState.Normal)
        }
    )

    UIView.animateWithDuration(1.5, delay: 0.5, options: nil, animations: {
            self.footerBar.alpha = 1
        }
        , completion: nil
    )
    UIView.animateWithDuration(0.75, delay: 1.25, options: nil, animations: {
            self.footerBar.alpha = 0
        }
        , completion: { finished in
            self.footerBar.setTitle("", forState: UIControlState.Normal)
        }
    )
    UIView.animateWithDuration(0.25, delay: 1.5, options: nil, animations: {
            self.footerImg.alpha = 1
        }
        , completion: nil
    )
}

Solution

  • For the sequence animation, you should put behind animations in completion block. E.g.

    The footerBar text should fade in

    The footerBar text should fade out

    Try this:

            self.footerBar.alpha = 0;
    
            UIView.animateWithDuration(1.5, delay: 0.5, options: nil, animations: {
                self.footerBar.alpha = 1
            }
            , completion: { finished in
                UIView.animateWithDuration(0.75, delay: 1.25, options: nil, animations: {
                   self.footerBar.alpha = 0
                }
                , completion: { finished in
                   self.footerBar.setTitle("", forState: UIControlState.Normal)
                }
                )
           }
           )
    

    And the same for others