iOS动画——核心技术与案例实战

目前，APP Store上的应用已经超过150万个，而纵观排名较为靠前的应用，无一例外都有着一个共同的特点，那就是良好的用户体验。动画作为用户体验中复杂、绚丽的技术已经备受开发人员和产品设计人员的重视。而如何将炫酷的动画效果快速高效地展现出来已经成为iOS开发工程师面临的首要挑战。

《iOS动画——核心技术与案例实战》以“iOS核心动画架构＋实战代码”的形式阐述如何根据不同的应用场景设计高效、可靠、复杂的动画效果，为读者带来了丰富的实战动画案例，更从动画系统架构的角度阐释动画的原理，因此《iOS动画——核心技术与案例实战》不仅面向读者“授之以鱼”更加“授之以渔”。

　　郑微，硕士研究生，毕业于重庆大学。主要研究方向是信号与信息处理(含嵌入式系统设计)。目前已在国内外核心期刊发表相关技术论文7篇，发明专利2项。具有多年软件研发经验，在iOS动画特效、音视频流媒体播放、特效算法上经验丰富。对多核算法优化有丰富的实战经验。

层次分明：显示层动画、内容层动画、3D动画、转场动画。

内容丰富：UIView、Layer、常用转场动画合集。

适用性强：轻松过滤出适合自己的核心内容。

实用性强：iOS核心动画架构＋实战代码，贴近实际使用场景。

序言

平时在家我经常会下载一些iOS排名比较靠前的应用或者游戏来玩，这些应用或者游戏都有比较显著的特点：界面优美、运行流畅、效果炫酷。这里暂且不去讨论iOS的硬件性能和UI美工设计是否优美，只是单纯从动画效果的角度看，它们对iOS动画效果的应用有着非常精致的把控。

在日常工作中，每开发一款APP，我们都会绞尽脑汁想让这款应用与众不同。其实不用太过于纠结系统，因为iOS的硬件都很棒。也不必太过于纠结美工，相信一个稍微靠谱的美工做出来的UI都不会太差。只需要选择和设计一些比较优美的动画，就可以让自己的应用上一个新的台阶。

在工作过程中大家都经历过这三个阶段。第一阶段初入江湖。在这个阶段如果想设计一个比较炫酷的动画效果，要么请教“大神”，要么进行网络搜索，而很少有自己的想法。这主要是因为大家对动画的架构、常用API、常用效果没有一个全面的认识，这个阶段基本属于代码收集阶段。第二阶段渐入佳境。相信大家在这个阶段都会有一些自己的思想，通过不断的尝试、对API不断地调整都能够实现最终想要的效果。总体来说这一阶段属于代码整理阶段。第三阶段登堂入室。需求来了之后在开发人员的大脑中很快被分解为若干子功能，迅速定位子功能需要实现的代码块。通过“搬砖+修改”的模式实现快速开发。这一阶段基本属于代码灵活运用阶段。

如果从零开始一步步完成这样三个阶段，相信大家都能做到，但是这会花费非常多的时间。在工作中我也曾被第一阶段和第二阶段反复困扰过，走了不少弯路，花费了大量的时间和精力，查看了各种官方手册和相关书籍，直到进入第三阶段才体会到“一览众山小”的感觉。所以我很想把iOS关于动画的相关知识为大家抽丝剥茧地整理一番，以帮助更多的人花费更少的时间掌握尽可能多的知识。

1．这本书有哪些特点

（1）层次分明

iOS动画效果非常丰富，本书一共16章，根据动画实现方式及效果分为4卷。第一卷（第1～5章）介绍显示层动画效果，第二卷（第6～12章）介绍内容层动画效果，第三卷（第13～14章）介绍3D动画效果，第四卷（第15～16章）介绍转场动画效果。这种划分有利于读者在学习的过程中对所要查找的动画效果快速定位，以及将知识点分类掌握。

第一卷为显示层动画效果，即利用UIView图层显示的效果实现各种动画。常见的有位置动画、颜色动画、淡入淡出动画、旋转动画、关键帧动画、逐帧动画等，文中针对要显示的动画效果一般采用3张图渐进描述，对于复杂的动画效果多采用6张图或9张图描述动画的渐变过程。其效果分别如图1～图4所示。

第二卷为内容层动画效果。内容层动画依赖视图的Layer图层，结合常用Layer子类，如CAEmitterCell粒子动画、CAGradientLayer扫描动画、CAShapeLayer图表类动画、CAReplicatorLayer图层快速复制动画等实现内容层动画展示，如图5～图8所示。

第三卷为3D动画效果。3D动画效果以矩阵变换为基础，利用x、y、z与变换矩阵相互作用实现各种3D效果，如图9所示。比如Cover Flow的3D动画展示效果，如图10所示。

第四卷为转场动画效果。转场动画常用于多视图场景下视图切换，如常见的水滴、翻页、波纹效果，或者自定义视图控制器转场动画，如图11～图12所示。

（2）内容丰富

对于相同类型、相同知识点的动画，书中做了详细的归纳和总结，这种归纳和总结有利于读者对动画整体架构的把握和快速精准的使用，如图13～图15所示是部分动画合集知识点。

（3）适用性强

本书针对每个章节给出适合阅读的人群，便于读者过滤出适合自己的核心内容。

（4）实用性强

在讲解每个动画案例的同时，尽可能贴近实际使用场景，如第二卷的各种Layer层动画实战案例、Button按钮相关动画效果等，如图16～图17所示。

2．iOS动画架构一览

根据不同维度对动画架构进行划分，可以很好地帮助大家理解iOS动画的结构及不同类型动画之间的相互联系。如图18～图20所示。

3．如何使用这本书

俗语说得好：“工欲善其事，必先利其器”，要想很好地使用这本书，必须先准备好一定的工具。本书中的所有代码都是基于Swift语言开发的，建议使用Xcode 8.0、SDK 10.0以上版本调试。源码下载地址详见：http://www. broadview.com.cn/30748。

工具和源码准备好之后呢？大家都知道几乎没有一本书百分之百适合我们，但或许有某个章节或者某个知识点刚好是大家想要学习和掌握的，本书也不例外。为了方便大家更好地使用这本书，特将本书的特点描述如下，希望广大读者根据自己的实际情况进行相关内容的阅读学习。

iOS初级开发工程师：建议从第1章动画入门开始，循序渐进地阅读。

iOS中级开发工程师：建议浏览或者跳过第一卷，重点关注第二、三、四卷。

iOS高级开发工程师：建议挑选工作中需要或感兴趣的章节阅读，如第9章“粒子动画”、第10章“光波扫描动画”。

iOS超级开发工程师：建议从整体架构和动画整理归纳的角度阅读本书。

致谢

在此感谢电子工业出版社的杨中兴编辑为本书提出的宝贵意见，感谢各位技术博主对本书的大力支持。最后感谢一直深爱并默默支持我的妻子，感谢她对我的关心和照顾，使得我可以抽出更多时间全身心地编写此书。

由于时间仓促，书中难免存在不足之处，欢迎大家批评指证。

郑微

2016年12月于武汉

第一卷　显示层动画
第1章　动画之旅启航：登录按钮动画效果 / 2
1．1　动画分析方法 / 3
1．2　登录按钮移动动画效果：闭包形式 / 5
1．3　登录按钮移动动画效果：方法形式 / 8
1．4　UIView视图中常见动画的属性分析 / 9
1．5　本章小结 / 11
第2章　显示层初级动画效果合集 / 12
2．1　UIView显示层初级动画属性一览 / 12
2．2　初级动画效果合集 / 13
2．2．1　位置动画 / 13
2．2．2　几何形状动画 / 14
2．2．3　位置+形状动画 / 15
2．2．4　淡入淡出动画 / 16
2．2．5　颜色渐变动画 / 17
2．2．6　缩放动画：基于UIView的transform属性 / 18
2．2．7　旋转动画：基于UIView的transform属性 / 19
2．2．8　位移动画：基于UIView的transform属性 / 19
2．2．9　组合动画效果 / 21
2．3　动画常用属性及回调方法的使用 / 24
2．3．1　动画常用属性的使用 / 24
2．3．2　动画回调方法的使用 / 26
2．3．3　案例：抽奖转盘旋转动画效果的简单实现 / 28
2．4　本章小结 / 30
第3章　显示层关键帧动画 / 31
3．1　关键帧动画实现原理 / 31
3．2　案例：关键帧动画之飞机降落 / 32
3．3　案例：关键帧动画之抽奖转盘滚动 / 38
3．4　本章小结 / 39
第4章　显示层逐帧动画 / 41
4．1　逐帧动画实现原理 / 41
4．2　基于NSTimer的逐帧动画效果 / 42
4．3　基于CADisplayLink的逐帧动画效果 / 44
4．4　基于draw方法的逐帧动画效果 / 45
4．5　本章小结 / 48
第5章　GIF动画效果 / 50
5．1　GIF图片初识 / 50
5．2　GIF有什么特点 / 51
5．3　GIF在iOS中的使用场景 / 51
5．4　GIF分解单帧图片 / 52
5．4．1　GIF图片分解过程 / 52
5．4．2　GIF图片分解代码实现 / 53
5．4．3　GIF图片分解最终实现效果 / 56
5．5　序列图像合成GIF图像 / 57
5．5．1　GIF图片合成思路 / 57
5．5．2　GIF图片合成代码实现 / 58
5．6　Gif图像展示 / 61
5．6．1　GIF图片展示思路 / 61
5．6．2　GIF图片展示：基于UIImageView / 62
5．7　本章小结 / 64
第二卷　内容层动画
第6章　Core Animation：CABasicAnimation动画效果 / 66
6．1　UIView和CALayer的区别 / 66
6．2　Core Animation核心动画 / 67
6．3　CALayer层动画合集 / 68
6．3．1　位置动画 / 68
6．3．2　缩放动画 / 71
6．3．3　旋转动画 / 73
6．3．4　位移动画 / 74
6．3．5　圆角动画 / 74
6．3．6　边框动画 / 75
6．3．7　颜色渐变动画 / 76
6．3．8　淡入淡出动画 / 78
6．3．9　阴影渐变动画 / 79
6．4　本章小结 / 80
第7章　Core Animation： CAKeyframeAnimation、CAAnimation Group动画 / 82
7．1　CAKeyframeAnimation动画属性要点 / 83
7．2　CAKeyframeAnimation淡出动画效果 / 83
7．3　CAKeyframeAnimation任意路径动画 / 85
7．4　CAAnimationGroup组合动画效果 / 88
7．5　本章小结 / 90
第8章　综合案例：登录按钮动画效果 / 91
8．1　综合案例1：水纹按钮动画效果实现原理 / 91
8．2　水纹按钮动画效果具体代码实现 / 94
8．3　综合案例2：登录按钮动画效果实现原理 / 98
8．4　登录按钮动画效果代码实现 / 100
8．4．1　第一阶段动画 / 100
8．4．2　第二阶段动画 / 106
8．4．3　第三阶段动画 / 110
8．5　本章小结 / 112
第9章　CAEmitterCell粒子动画效果 / 114
9．1　iOS粒子系统概述 / 114
9．2　案例：粒子火焰效果 / 115
9．3　案例：“鬼火”火焰效果代码实现 / 116
9．4　案例：霓虹效果代码实现 / 118
9．5　本章小结 / 120
第10章　CoreAnimation： CAGradientLayer光波扫描动画效果 / 122
10．1　CAGradientLayer追本溯源 / 123
10．2　光波效果实现原理分析 / 124
10．2．1　光波方向 / 124
10．2．2　光波颜色梯度 / 126
10．2．3　光波“彗星拖尾”效果 / 127
10．2．4　光波扫描效果 / 129
10．3　案例：指纹扫描效果 / 130
10．4　案例：音响音量跳动效果 / 131
10．5　本章小结 / 136
第11章　CoreAnimation： CAShapeLayer打造“动态”图表效果 / 138
11．1　CAShapeLayer追本溯源 / 139
11．2　贝济埃曲线 / 139
11．2．1　初识贝济埃曲线 / 139
11．2．2　贝济埃曲线在iOS中的应用 / 140
11．3　绘制动态图表 / 145
11．3．1　动态折线动画 / 145
11．3．2　动态柱状图动画 / 147
11．4　本章小结 / 151
第12章　CAReplicatorLayer：图层复制效果 / 152
12．1　CAReplicatorLayer追本溯源 / 153
12．2　恒星旋转动画实现 / 153
12．3　音量跳动动画效果 / 155
12．4　本章小结 / 157
第三卷　3D动画
第13章 3D动画初识 / 159
13．1 锚点的基本概念 / 160
13．2 矩阵变换的基本原理 / 160
13．3 3D旋转效果 / 162
13．4 本章小结 / 166
第14章 Cover Flow 3D效果 / 167
14．1 案例：Cover Flow效果实现原理 / 167
14．2 案例：Cover Flow效果代码实现 / 168
14．3 本章小结 / 172
第四卷　转场动画
第15章 CoreAnimation： CATransition转场动画 / 174
15．1 CATransition初识 / 174
15．2 案例：基于CATransition的图片查看器 / 176
15．3 CATransition转场动画key-effect一览 / 179
15．4 本章小结 / 184
第16章 视图过渡动画 / 185
16．1 视图控制器过渡动画相关协议 / 185
16．2 视图控制器过渡动画代码实现 / 187
16．3 侧滑栏动画实现 / 190
16．4 本章小结 / 195