iOS:核心动画之关键帧动画CAKeyframeAnimation

1. CAKeyframeAnimation - 什么是关键帧动画?

关键帧动画是一种基于时间和值的动画,可以控制动画的不同阶段的值和时间,使动画能够呈现更复杂多样的效果。关键帧动画的主要特点在于可以在动画的某些关键帧时对动画的特定属性进行调整,从而可以实现更加自由且多样的动画效果。

2. CAKeyframeAnimation - 使用方法

Step1:引入头文件

```

#import

```

Step2:创建动画对象

```

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

```

注意:这里的 keyPath 值需要根据实际需求进行设置,如果需要实现位移动画,则 keyPath 值为 @"position";如果需要实现旋转动画,则 keyPath 值为 @"transform.rotation.z"。

Step3:设置属性

```

animation.duration = 2.0;

animation.repeatCount = HUGE_VALF;

animation.removedOnCompletion = NO;

```

属性说明:

- duration 表示动画的持续时间,单位为秒。

- repeatCount 表示动画重复的次数。可以设置为 HUGE_VALF 表示无限循环。

- removedOnCompletion 表示是否在动画完成后将动画从图层上移除,如果设置为 NO,则动画完成后仍然停留在图层上。

Step4:设置动画路径

动画路径是指动画在运动过程中沿着的轨迹,可以通过设置 path 属性来指定动画路径。

```

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100.0f, 100.0f, 200.0f, 300.0f)];

animation.path = path.CGPath;

```

Step5:设置关键帧

设置关键帧是指在动画执行的过程中,设置多个动画节点,每个节点都有自己的值和时间,通过计算节点之间的值和时间,可以创建复杂的动画效果。

```

animation.keyTimes = @[@(0.0), @(0.25), @(0.5), @(0.75), @(1.0)];

animation.values = @[

[NSValue valueWithCGPoint:CGPointMake(100.0f, 100.0f)],

[NSValue valueWithCGPoint:CGPointMake(200.0f, 50.0f)],

[NSValue valueWithCGPoint:CGPointMake(300.0f, 200.0f)],

[NSValue valueWithCGPoint:CGPointMake(400.0f, 50.0f)],

[NSValue valueWithCGPoint:CGPointMake(500.0f, 100.0f)],

];

```

属性说明:

- keyTimes 表示每个关键帧所在的时间点,取值范围为 0.0 - 1.0,与 values 数组中的值一一对应。

- values 表示每个关键帧所对应的值,通常是一个 NSValue 对象。需要注意的是,每个关键帧的值必须与 keyPath 所指定的属性对应,否则无法执行动画。

Step6:添加动画到图层上

```

[self.layer addAnimation:animation forKey:@"keyframeAnimation"];

```

3. CAKeyframeAnimation - 动画案例

下面介绍两个比较常见的使用场景,其中一个是位移动画,另一个是抖动动画。

3.1 位移动画

位移动画是指将某个视图沿着某个路径移动的动画效果。实现位移动画的步骤如下:

1) 创建动画对象

```

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

```

2) 设置属性

```

animation.duration = 2.0;

animation.repeatCount = HUGE_VALF;

animation.removedOnCompletion = NO;

```

3) 设置动画路径

```

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100.0f, 100.0f, 200.0f, 300.0f)];

animation.path = path.CGPath;

```

4) 添加动画到图层上

```

[self.view.layer addAnimation:animation forKey:@"positionAnimation"];

```

3.2 抖动动画

抖动动画是指在动画执行过程中,使某个视图沿着某个方向来回抖动的动画效果。实现抖动动画的步骤如下:

1) 创建动画对象

```

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];

```

2) 设置属性

```

animation.duration = 0.1;

animation.repeatCount = MAXFLOAT;

animation.autoreverses = YES;

animation.values = @[@(angle), @(-angle), @(angle)];

```

3) 添加动画到图层上

```

[self.layer addAnimation:animation forKey:@"shakeAnimation"];

```

其中,angle 表示抖动的角度,一般设置为 0.05。

4. CAKeyframeAnimation - 注意事项

- CAKeyframeAnimation 是 Core Animation 中的一种动画类型,因此使用时需要引入 QuartzCore 头文件。

- CAKeyframeAnimation 既可以实现简单的位移和旋转动画,也可以实现复杂多样的动画效果,如路径动画、帧动画等。

- CAKeyframeAnimation 相对于其他动画类型而言,对 CPU 和 GPU 的消耗较大,因此在使用时需要根据实际情况进行性能优化。

- CAKeyframeAnimation 中的关键帧数量不宜过多,否则会导致动画卡顿或者卡死的现象。通常建议不超过 5 个关键帧。 如果你喜欢我们三七知识分享网站的文章, 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔!https://www.37seo.cn/

点赞(73) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部