iOS动画学习笔记 - 飞机起飞

发表于 更新于 分类于 阅读次数： Disqus：

最近在研究iOS Animation By Tutural，这里就整理一下所学动画。

关键帧动画 Keyframe Animations

不管多复杂的动画，都可以分解为一小段一小段来制作。通常这类动画需要计算相对时间（第二第三段相对于第一段或者整体的时间）来确定。
比如下图的飞机起飞效果就可以分为四个阶段。
image description

实现

整个动画分为四个阶段，首先我们创建一个时长为1.5秒的动画，并设置为重复。

1
2
3
4
5
func planeDepart() {
  let originalCenter = planeImage.center//记录原始位置
        UIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: .Repeat, animations: {
          //动画过程
        }, completion: nil)

动画从屏幕最中间开始并驯化播放，所以第一阶段对应飞机起飞阶段中第二段。从原点向右滑动80.0像素，向上滑行10.0像素。代码加到动画过程部分。

1
2
3
4
5
//addKeyframeWithRelativeStartTime- 函数使用相对时间，0.0开始，持续0.25秒。
UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25) {
    self.planeImage.center.x += 80.0
    self.planeImage.center.y -= 10.0
}

飞机滑行同时需要调整角度。

1
2
3
UIView.addKeyframeWithRelativeStartTime(0.1, relativeDuration: 0.4) {
    self.planeImage.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_4/2))
    }

加速并淡出屏幕

1
2
3
4
5
UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25) {
      self.planeImage.center.x += 100.0
      self.planeImage.center.y -= 50.0
      self.planeImage.alpha = 0.0
    }

迅速移位至屏幕左侧

1
2
3
4
UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.01){
    self.planeImage.transform = CGAffineTransformIdentity
    self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y)
}

水平位置至初始位置

1
2
3
4
UIView.addKeyframeWithRelativeStartTime(0.55, relativeDuration: 0.45) {
    self.planeImage.alpha = 1.0
    self.planeImage.center = originalCenter
}