连续淡入淡出动画答案

【问题标题】：Consecutive fade in fade out animations连续淡入淡出动画
【发布时间】：2016-08-09 22:43:52
【问题描述】：

我正在尝试实现这个动画，其中UIButton 在用户保存文件时淡出。当按钮淡出时，复选标记图像的UIImageView 淡出代替按钮。一旦 imageview 完全淡入，然后它会淡出，而按钮又会淡入。

    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)
                    })
            })
    })

虽然上面的方法确实有效，但它并不像我想要的那么顺利。有没有更好的方法来解决这个问题？

【问题讨论】：

你可以使用关键帧动画like shown here
@Palle 这看起来像是更简洁的方法，但我不明白如何使用UIViewKeyframeAnimationOptions 选项制作漂亮的淡入/淡出动画。

标签： ios swift uiviewanimation

【解决方案1】：

您需要四个关键帧来制作您想要的动画：按钮淡出、图像淡入、图像淡出、按钮淡入。

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)

这个问题引起了我的好奇心——这个关键帧的东西很酷。

【讨论】：