How to Handle Overlapping Animation Calls in Swift

Question

I have a footer bar which is essentially a view containing a button and an image. When a particular button is pressed the function:

Hides the image (footerImg)
The button (footerBtn) has text (textToDisplay) added to it
Then the animation fades the footerBtn out and the image back in
The entire animation takes about 2 seconds

My problem

My problem is that sometimes the user is going to hit the button again before 2 seconds goes by and the same animation will be asked to run before it is finished. How do I enable my code to handle overlapping animations? I want the second press to stop the first animation and simply run the second animation.

My Code

With the code below a second button press ruins the animation and the text AND image both disappear for two seconds and then it goes back to the original state.

    //Animate TaskAction feedback in footer bar
    func animateFeedback(textToDisplay: String, footerBtn: UIButton, footerImg: UIImageView) {

    //Cancel any running animation
    footerBtn.layer.removeAllAnimations()

    //Set to defaults - In case it is interrupting animation
    footerBtn.backgroundColor = UIColor.clearColor()
    footerBtn.setTitleColor(UIColor(red: 55/255.0, green: 55/255.0, blue: 55/255.0, alpha: 1.0), forState: UIControlState.Normal) //light gray

    //Setup for animation
    footerImg.alpha = 0.0
    footerBtn.alpha = 1
    footerBtn.setTitle(textToDisplay, forState: UIControlState.Normal)
    footerBtn.titleLabel!.font = UIFont(name: "HelveticaNeue-Regular", size: 18)

    UIView.animateKeyframesWithDuration(2.0 /*Total*/, delay: 1.0, options: UIViewKeyframeAnimationOptions.CalculationModeLinear, animations: {

        UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration:0.50, animations:{
            footerBtn.alpha = 0.01 //Text fades out
        })

        UIView.addKeyframeWithRelativeStartTime(0.50, relativeDuration:0.50, animations:{
            footerImg.alpha = 1 //Starting image reappears
        })
    },
    completion: { finished in
        footerBtn.setTitle("", forState: UIControlState.Normal)
        footerBtn.alpha = 1
    })//End of animation
}//End of animateFeedback

score 2 · Accepted Answer · edited Oct 23 '17 at 14:14

Here's the solution:

If an animation gets messed up because a second animation call is triggered before the first animation has finished, read the answer to this post:

Consecutive Animation Calls Not Working

Essentially, it has to do with the completion block. Oddly enough, the completion still runs on the 1st animation even if it is interrupted. What you can do is add an if-statement to skip the rest of the completion block if the code didn't finish.

How to Handle Overlapping Animation Calls in Swift

1 Answers1