CODEWITHSUNDEEP
iosswiftuiviewanimation
Brosef
Brosef

Reputation: 3095

Consecutive fade in fade out animations

I'm trying to implement this animation where a UIButton fades out when a user saves a file. While the button fades out, a UIImageView of a check mark image fades in place of the button. Once the imageview has fully faded in, then it fades out and the button fades back in. 

    UIView.animateWithDuration(0.60, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: {
        self.recButton.alpha = 0.0
        }, completion: {
            (value: Bool) in
            UIView.animateWithDuration(0.60, delay: 0.0, options: UIViewAnimationOptions.CurveEaseIn, animations: {
                self.checkView.alpha = 1.0
                }, completion: {
                    (value: Bool) in
                    UIView.animateWithDuration(0.60, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: {
                        self.checkView.alpha = 0.0
                        }, completion: {
                            (value: Bool) in
                            UIView.animateWithDuration(0.60, delay: 0.0, options: UIViewAnimationOptions.CurveEaseIn, animations: {
                                self.recButton.alpha = 1.0
                                self.recButton.enabled = true
                                }, completion: nil)
                    })
            })
    })

While the method above does work, its not as smooth as I would like. Is there a better way to go about this?

Upvotes: 1

Views: 731

Answers (1)

CloakedEddy
CloakedEddy

Reputation: 1995

You need four keyframes for the animation you want: button fade out, image fade in, image fade out, button fade in.

let button: UIButton
let checkmarkImage: UIImageView

button.alpha = 1.0
checkmarkImage = 0.0

UIView.animateKeyframesWithDuration(2.4, delay: 0, options: .CalculationModeLinear, animations: {
  UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: { 
    button.alpha = 0.0
  })
  UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25, animations: {
    checkmarkImage.alpha = 1.0
  })
  UIView.addKeyframeWithRelativeStartTime(0.5, relativeDuration: 0.25, animations: {
    checkmarkImage.alpha = 0.0
  })
  UIView.addKeyframeWithRelativeStartTime(0.75, relativeDuration: 0.25, animations: {
    button.alpha = 1.0
  })
}, completion: nil)

This question raised my curiosity - this keyframe thing is pretty cool.

Upvotes: 3

Related Questions