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

最近在研究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
}