CAAnimation四种动画

简介: <p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-size:14px; color:rgb(68,68,68); font-family:tahoma,arial,sans-serif; line-height:1.5!important"> <span style="margin:0px; pad

 在上一篇专题中我们提到,CAAnimation可分为以下四种:

1
2
3
4
5
6
7
8
1.CABasicAnimation
通过设定起始点,终点,时间,动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation
2.CAKeyframeAnimation
Keyframe顾名思义就是关键点的frame,你可以通过设定CALayer的始点、中间关键点、终点的frame,时间,动画会沿你设定的轨迹进行移动
3.CAAnimationGroup
Group也就是组合的意思,就是把对这个Layer的所有动画都组合起来。PS:一个layer设定了很多动画,他们都会同时执行,如何按顺序执行我到时候再讲。
4.CATransition
这个就是苹果帮开发者封装好的一些动画,

CABasicAnimation算是CAKeyFrameAnimation的特殊情况,即不考虑中间变换过程,只考虑起始点与目标点就可以了。而CAKeyFrameAnimation则更复杂一些,允许我们在起点与终点间自定义更多内容来达到我们的实际应用需求!比如,手机淘宝中,当你添加物品到购物车后会出现将物品抛到购物车的效果,这种效果实现起来也不难,无非是先绘制抛物线在执行position以及scale的GroupAnimation而已,以下图1是我模仿该功能小玩出来的一个demo示例,感兴趣的话你可以自己实现一下试试:D.

                    

                        图1                                              图2 

下面我们以实现“小圆球绕矩形跑道循环跑动”为目标开始对CAKeyFrameAnimation的介绍,如图2所示。小圆球的运动轨迹可分为四段,每段的运动速度不同,第一段中先慢后快再慢。先贴上源码方便后面分析:

 

 1 //绕矩形循环跑
 2 - (void)initRectLayer
 3 {
 4     rectLayer = [[CALayer alloc] init];
 5     rectLayer.frame = CGRectMake(15, 200, 30, 30);
 6     rectLayer.cornerRadius = 15;
 7     rectLayer.backgroundColor = [[UIColor blackColor] CGColor];
 8     [self.view.layer addSublayer:rectLayer];
 9     CAKeyframeAnimation *rectRunAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
10     //设定关键帧位置,必须含起始与终止位置
11     rectRunAnimation.values = @[[NSValue valueWithCGPoint:rectLayer.frame.origin],
12                                 [NSValue valueWithCGPoint:CGPointMake(320 - 15,
13                                                                       rectLayer.frame.origin.y)],
14                                 [NSValue valueWithCGPoint:CGPointMake(320 - 15,
15                                                                       rectLayer.frame.origin.y + 100)],
16                                 [NSValue valueWithCGPoint:CGPointMake(15, rectLayer.frame.origin.y + 100)],
17                                 [NSValue valueWithCGPoint:rectLayer.frame.origin]];
18     //设定每个关键帧的时长,如果没有显式地设置,则默认每个帧的时间=总duration/(values.count - 1)
19     rectRunAnimation.keyTimes = @[[NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:0.6],
20                                   [NSNumber numberWithFloat:0.7], [NSNumber numberWithFloat:0.8],
21                                   [NSNumber numberWithFloat:1]];
22     rectRunAnimation.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
23                                          [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear],
24                                          [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear],
25                                          [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
26     rectRunAnimation.repeatCount = 1000;
27     rectRunAnimation.autoreverses = NO;
28     rectRunAnimation.calculationMode = kCAAnimationLinear;
29     rectRunAnimation.duration = 4;
30     [rectLayer addAnimation:rectRunAnimation forKey:@"rectRunAnimation"];
31 }

 

                    

 

                                      图3

对CAKeyFrameAnimation的使用与CABasicAnimation大同小异,有些属性是共通的,因此小翁建议你先阅读上一篇文章。KeyFrame的意思是关键帧,所谓“关键”就是改变物体运动趋势的帧,在该点处物体将发生运动状态,比如矩形的四个角,抛物线的顶点等。因此,聪明的你应该知道了,在上述例子中共有5个关键帧(图3中的ABCDE)。上个关键帧到当前关键帧之间的路径与当前关键帧相联系,比如AB->B,我们可以对AB进行定义动画定义,而自定义要通过众多CAKeyFrameAnimation的属性达到目的。CAKeyFrameAnimation的使用中有以下主要的属性需要注意,有些属性可能比较绕比较难以理解,我会结合图片进行必要的说明。

(1)values属性

values属性指明整个动画过程中的关键帧点,例如上例中的A-E就是通过values指定的。需要注意的是,起点必须作为values的第一个值。

(2)path属性

作用与values属性一样,同样是用于指定整个动画所经过的路径的。需要注意的是,values与path是互斥的,当values与path同时指定时,path会覆盖values,即values属性将被忽略。例如上述例子等价于代码中values方式的path设置方式为:

1     CGMutablePathRef path = CGPathCreateMutable();
2     CGPathMoveToPoint(path, NULL, rectLayer.position.x - 15, rectLayer.position.y - 15);
3     CGPathAddLineToPoint(path, NULL, 320 - 15, rectLayer.frame.origin.y);
4     CGPathAddLineToPoint(path, NULL, 320 - 15, rectLayer.frame.origin.y + 100);
5     CGPathAddLineToPoint(path, NULL, 15, rectLayer.frame.origin.y + 100);
6     CGPathAddLineToPoint(path, NULL, 15, rectLayer.frame.origin.y);
7     rectRunAnimation.path = path;
8     CGPathRelease(path);

(3)keyTimes属性

该属性是一个数组,用以指定每个子路径(AB,BC,CD)的时间。如果你没有显式地对keyTimes进行设置,则系统会默认每条子路径的时间为:ti=duration/(5-1),即每条子路径的duration相等,都为duration的1\4。当然,我们也可以传个数组让物体快慢结合。例如,你可以传入{0.0, 0.1,0.6,0.7,1.0},其中首尾必须分别是0和1,因此tAB=0.1-0, tCB=0.6-0.1, tDC=0.7-0.6, tED=1-0.7.....

(4)timeFunctions属性

用过UIKit层动画的同学应该对这个属性不陌生,这个属性用以指定时间函数,类似于运动的加速度,有以下几种类型。上例子的AB段就是用了淡入淡出效果。记住,这是一个数组,你有几个子路径就应该传入几个元素

1 kCAMediaTimingFunctionLinear//线性
2 kCAMediaTimingFunctionEaseIn//淡入
3 kCAMediaTimingFunctionEaseOut//淡出
4 kCAMediaTimingFunctionEaseInEaseOut//淡入淡出
5 kCAMediaTimingFunctionDefault//默认

(5)calculationMode属性

该属性决定了物体在每个子路径下是跳着走还是匀速走,跟timeFunctions属性有点类似

1 const kCAAnimationLinear//线性,默认
2 const kCAAnimationDiscrete//离散,无中间过程,但keyTimes设置的时间依旧生效,物体跳跃地出现在各个关键帧上
3 const kCAAnimationPaced//平均,keyTimes跟timeFunctions失效
4 const kCAAnimationCubic//平均,同上
5 const kCAAnimationCubicPaced//平均,同上

此外,动画的暂停与开始可以通过下面的方式做到:

 1 -(void)pauseLayer:(CALayer*)layer
 2 {
 3     CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
 4     layer.speed = 0.0;
 5     layer.timeOffset = pausedTime;
 6 }
 7 
 8 -(void)resumeLayer:(CALayer*)layer
 9 {
10     CFTimeInterval pausedTime = [layer timeOffset];
11     layer.speed = 1.0;
12     layer.timeOffset = 0.0;
13     layer.beginTime = 0.0;
14     CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
15     layer.beginTime = timeSincePause;
16 }

更多更详细的关于这些属性的介绍可以进一步阅读此文

关于CAKeyFrameAnimation的介绍基本结束了,在文章的最后,开源一个小翁封装的抛物动画代码,上文的图1就是在这份代码的基础上实现的:

  ThrowLineTool.h
  ThrowLineTool.m
  使用方法

目录
相关文章
|
存储 分布式计算 大数据
HBase分布式数据库关键技术与实战:面试经验与必备知识点解析
【4月更文挑战第9天】本文深入剖析了HBase的核心技术,包括数据模型、分布式架构、访问模式和一致性保证,并探讨了其实战应用,如大规模数据存储、实时数据分析及与Hadoop、Spark集成。同时,分享了面试经验,对比了HBase与其他数据库的差异,提出了应对挑战的解决方案,展望了HBase的未来趋势。通过Java API代码示例,帮助读者巩固理解。全面了解和掌握HBase,能为面试和实际工作中的大数据处理提供坚实基础。
658 3
解决layUI请求上传接口出现异常的解决方案
解决layUI请求上传接口出现异常的解决方案
518 0
|
12月前
|
XML JSON 安全
Web服务是通过标准化的通信协议和数据格式
【10月更文挑战第18天】Web服务是通过标准化的通信协议和数据格式
308 69
|
12月前
|
存储 运维 API
源码解密协程队列和线程队列的实现原理(一)
源码解密协程队列和线程队列的实现原理(一)
192 1
|
12月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
208 2
|
JavaScript 前端开发 搜索推荐
揭秘 Vue 3 的 Teleport 特性,让你实现跨组件传输内容,使得开发变得更加得心应手!!
揭秘 Vue 3 的 Teleport 特性,让你实现跨组件传输内容,使得开发变得更加得心应手!!
|
JavaScript
vue 下载页面中的图片,如二维码
vue 下载页面中的图片,如二维码
156 1
|
机器学习/深度学习 数据采集 TensorFlow
使用Python实现深度学习模型:智能健康监测与预警
使用Python实现深度学习模型:智能健康监测与预警
1039 10
|
C语言
【学习笔记】Verilog之四:结构建模方法
Verilog 提供两种建模方法:行为建模和结构建模。行为建模专注于电路功能描述,类似高级编程语言,不涉及底层实现。数据流建模使用 `assign` 进行连续赋值,适合描述组合逻辑。线网可以在声明时直接赋值。顺序行为建模通过 `initial` 和 `always` 语句实现,`initial` 用于一次性初始化,`always` 则用于响应特定事件的重复执行。时序控制包括时延和事件控制,用于精确控制电路行为。阻塞和非阻塞赋值决定了语句执行的顺序和并发性。过程性连续赋值如 `assign-deassign` 和 `force-release` 提供了更多灵活性。
|
敏捷开发 Java 测试技术
「架构」模型驱动架构设计方法及其运用
本文探讨了MDA在软件开发中的应用,从需求分析到测试,使用UML建模功能需求,通过PIM设计架构,自动生成代码以减少错误。MDA提升了可维护性、可扩展性和可移植性,通过工具如Enterprise Architect和Eclipse MDT支持自动化转换。虽然有挑战,如模型创建和平台转换,但结合敏捷方法和适当工具能有效解决,从而提高开发效率和软件质量。
1218 0
「架构」模型驱动架构设计方法及其运用