iOS 动画系列之七：深入理解 CAKeyFrame Animation 和 CAAnimation Group

2024-02-09 04:01:23

来来来，今天咱们通过实现一个类似 Twitter 的启动动画来看看 CAKeyFrame Animation 和 CAAnimation Group 怎么玩。

做好准备，今天咱们的重点到了第七章，CAKeyFrame Animation 和 CAAnimation Group。最后的那个启动动画完全可以用 CAKeyFrame Animation 和 CAAnimation Group 搞定。

先来回忆一下上节课的内容，CAAnimation Group 可以将多个动画组合成一个动画序列，而 CAKeyFrameAnimation 可以指定动画在特定时间点的值。将它们结合起来，我们就可以创建出非常复杂的动画效果。

现在，咱们来实现 Twitter 启动动画。这个动画包含三个部分：

鸟的头部从左上角飞入： 使用 CAKeyFrameAnimation，设置鸟头的位置在不同时间点的值，模拟飞入的效果。
鸟的身体从底部飞入： 也是使用 CAKeyFrameAnimation，设置鸟身的位置在不同时间点的值。
鸟的身体旋转并缩小： 使用 CAAnimationGroup，将旋转动画和缩放动画组合在一起，同时应用到鸟身上。

下面是实现代码：

// 1. 鸟头飞入动画
let headAnimation = CAKeyframeAnimation(keyPath: "position")
headAnimation.values = [
    NSValue(cgPoint: CGPoint(x: -100, y: -100)),
    NSValue(cgPoint: CGPoint(x: 100, y: 100))
]
headAnimation.keyTimes = [0, 1]
headAnimation.duration = 1

// 2. 鸟身飞入动画
let bodyAnimation = CAKeyframeAnimation(keyPath: "position")
bodyAnimation.values = [
    NSValue(cgPoint: CGPoint(x: 100, y: 400)),
    NSValue(cgPoint: CGPoint(x: 100, y: 100))
]
bodyAnimation.keyTimes = [0, 1]
bodyAnimation.duration = 1

// 3. 鸟身旋转和缩小动画组
let groupAnimation = CAAnimationGroup()
groupAnimation.animations = [
    CABasicAnimation(keyPath: "transform.rotation.z"),
    CABasicAnimation(keyPath: "transform.scale")
]
groupAnimation.duration = 1
groupAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeOut)

// 将动画添加到图层
let birdLayer = CALayer()
birdLayer.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
birdLayer.backgroundColor = UIColor.blue.cgColor
birdLayer.add(headAnimation, forKey: "headAnimation")
birdLayer.add(bodyAnimation, forKey: "bodyAnimation")
birdLayer.add(groupAnimation, forKey: "groupAnimation")

// 添加图层到视图
let view = UIView()
view.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
view.backgroundColor = UIColor.white
view.layer.addSublayer(birdLayer)