iOS 关键帧动画：让你的 app 动起来！

IOS

2023-12-21 08:13:00

关键帧动画基础知识

关键帧动画是通过在动画过程中定义一组关键帧来实现的，每个关键帧都指定了动画在该时刻的状态。动画引擎会根据这些关键帧自动计算出动画的中间状态，从而实现流畅的动画效果。

CAKeyframeAnimation

CAKeyframeAnimation 是 iOS 中最常用的关键帧动画类。它允许你指定动画的路径、持续时间、重复次数、速度等属性。你还可以通过设置关键帧的值来控制动画在不同时刻的状态。

CABasicAnimation

CABasicAnimation 是一个简单的关键帧动画类，它只能用于创建线性的动画。但是，CABasicAnimation 的使用非常简单，而且可以与 CAKeyframeAnimation 结合使用来创建更复杂的效果。

如何创建关键帧动画

创建关键帧动画非常简单，只需按照以下步骤操作即可：

创建一个 CAKeyframeAnimation 或 CABasicAnimation 实例。
设置动画的属性，例如路径、持续时间、重复次数、速度等。
添加关键帧。
将动画添加到图层。

关键帧动画示例

路径动画

路径动画是一种沿着指定路径移动的动画。你可以使用 CAKeyframeAnimation 来创建路径动画。以下是一个示例：

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 200)].CGPath;
animation.duration = 2.0;
animation.repeatCount = MAXFLOAT;
[layer addAnimation:animation forKey:@"position"];

颜色变化动画

颜色变化动画是一种逐渐改变图层颜色的动画。你可以使用 CAKeyframeAnimation 或 CABasicAnimation 来创建颜色变化动画。以下是一个示例：

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
animation.fromValue = [UIColor redColor];
animation.toValue = [UIColor blueColor];
animation.duration = 2.0;
animation.repeatCount = MAXFLOAT;
[layer addAnimation:animation forKey:@"backgroundColor"];

淡入淡出动画

淡入淡出动画是一种逐渐显示或隐藏图层的动画。你可以使用 CAKeyframeAnimation 或 CABasicAnimation 来创建淡入淡出动画。以下是一个示例：

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
animation.values = @[@0.0, @1.0, @0.0];
animation.keyTimes = @[@0.0, @0.5, @1.0];
animation.duration = 2.0;
animation.repeatCount = MAXFLOAT;
[layer addAnimation:animation forKey:@"opacity"];