Keyframe

###最近看了 Raywenderlich 的 《iOS Animations by Tutorials》，来做个读书笔记，感兴趣请支持正版。

Chapter 5: Keyframe Animations

这一章介绍关键帧动画，平时你有可能碰到多个动画轮流执行的情况，前面的动画执行完成才执行下一个动画，这就需要反应链条，之前你有可能在completion闭包里面执行下一个动画，但是如果很多这样的动画，会看起来很麻烦

UIView.animateWithDuration(0.5, animations: { 
    view.center.x += 200.0
}, completion: { _ in 
   UIView.animateWithDuration(0.5, animations: {
       view.center.y += 100.0 
   }, completion: { _ in
           UIView.animateWithDuration(0.5, animations: { 
              view.center.x -= 200.0
           }, completion: { _ in
              UIView.animateWithDuration(0.5, animations: { 
                 view.center.y -= 100.0
           }) 
    })
  }) 
})

这种写法阅读起来很困难，有一种简便方式来解决这个问题，就是keyframes

Keyframe animations

使用关键帧动画，需要调用**animateKeyframesWithDuration(_:delay:options: animations:completion:)**来创建，然后在animations闭包里面添加动画

func planeDepart() {
let originalCenter = planeImage.center
UIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: [], 
animations: {
  //add keyframes
}, completion: nil) }

• Duration：动画持续时间
• delay：延迟执行时间
• options：选项
• animations：添加keyframes闭包
• completion：完成执行闭包

Adding keyframes

添加keyframes需要调用addKeyframeWithRelativeStartTime(_:relativeDuration:animations:)

UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, 
  animations: {
     self.planeImage.center.x += 80.0
     self.planeImage.center.y -= 10.0 
  })

• StartTime：关键帧开始时间，该时间是相对整个关键帧动画持续时间的相对时间，一般值在0到1之间。如果为0，则表明这一关键帧从整个动画的第0秒开始执行，如果设为0.5，则表明从整个动画的中间开始执行。

• relativeDuration：关键帧持续时间，该时间同样是相对整个关键帧动画持续时间的相对时间，一般值也在0到1之间。如果设为0.25，则表明这一关键帧的持续时间为整个动画持续时间的四分之一。

func planeDepart() {
        let originalCenter = planeImage.center
        
        UIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: [], animations: {
            //add keyframes
            
            UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: {
                self.planeImage.center.x += 80.0
                self.planeImage.center.y -= 10.0
            })
            
            UIView.addKeyframeWithRelativeStartTime(0.1, relativeDuration: 0.4) {
                self.planeImage.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_4/2))
            }
            
            UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25) {
                self.planeImage.center.x += 100.0
                self.planeImage.center.y -= 50.0
                self.planeImage.alpha = 0.0
            }
            
            UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.01) {
                self.planeImage.transform = CGAffineTransformIdentity
                self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y)
            }
            
            UIView.addKeyframeWithRelativeStartTime(0.55, relativeDuration: 0.45) {
                self.planeImage.alpha = 1.0
                self.planeImage.center = originalCenter
            }
            
            }, completion: nil)
    }

###Calculation modes in keyframe animations

Keyframe animations不支持easing curves，如果你的动画上面的每一个阶段都有一个缓和曲线，那架飞机就突然的从一个动画到下一个动画，而不是平稳地移动到下一个。如果你可以应用于整个动画，这会导致你的动画持续时间被忽略了(这样每段动画的时间都是根据系统计算的，你设置的时间就没有意义了)，这不是你想要的。

相反，系统提供了几个calculation modes给你选择，每个mode都提供了不一样的计算帧的方式。你可以在UIViewKeyframeAnimationOptions里面找到calculation modes了解详情

现在你知道如何把任意数量的简单的动画组在一起，使用关键帧动画，您可以创建任何顺序动画。

相关文章

iOS UIView Animation - Keyframe