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

更多精彩尽在www.sxpdf.com

本书由“书行天下PDF电子书”整理

书行天下PDF电子书（www.sxpdf.com）:免费提供各类精品
电子书的网站！书行天下提供的书籍绝对可以当得起你书架上
的 一席之地！总有些书是你一生之中不想错过的！

书行天下PDF电子书是一个免费PDF在线阅读与下载的网络书店！

www.sxpdf.com
书行天下所有PDF电子书籍全部免费分享，只为以书
会友，欢迎大家支持！

更多精彩尽在www.sxpdf.com

扉☒.pdf 1 2016/12/23 17:05:11

C
M
Y
CM
MY
CY
CMY
K

更多精彩尽在www.sxpdf.com

内容简介
目前，APP Store 上的应用已经超过 150 万个，而纵观排名较为靠前的应用，无一例外都
有着一个共同的特点，那就是良好的用户体验。动画作为用户体验中最复杂、最绚丽的技术
已经备受开发人员和产品设计人员的重视。而如何将炫酷的动画效果快速高效地展现出来已
经成为 iOS 开发工程师面临的首要挑战。
本书以“iOS 核心动画架构＋实战代码”的形式阐述如何根据不同的应用场景设计高效、
可靠、复杂的动画效果，为读者带来了丰富的实战动画案例，更从动画系统架构的角度阐释
动画的原理，因此本书不仅面向读者“授之以鱼”更加“授之以渔”。

未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。
版权所有，侵权必究。

图书在版编目（CIP）数据

iOS 动画：核心技术与案例实战 / 郑微编著.—北京：电子工业出版社，2017.2
ISBN 978-7-121-30748-5
Ⅰ.①i… Ⅱ.①郑… Ⅲ.①移动终端－应用程序－程序设计 Ⅳ.①TN929.53
中国版本图书馆 CIP 数据核字（2016）第 316808 号

策划编辑：杨中兴 邮编：100036
责任编辑：黄爱萍 字数：212 千字
印 刷：三河市华成印务有限公司
装 订：三河市华成印务有限公司
出版发行：电子工业出版社

北京市海淀区万寿路 173 信箱
开 本：720×1000 1/16 印张：13.25
版 次：2017 年 2 月第 1 版
印 次：2017 年 2 月第 1 次印刷
定 价：69.00 元

凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社
发行部联系，联系及邮购电话：（010）88254888，88258888。

质量投诉请发邮件至 [email protected]，盗版侵权举报请发邮件至 [email protected]。
本书咨询联系方式：（010）51260888-819，[email protected]。

更多精彩尽在www.sxpdf.com

序言

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

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

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

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

更多精彩尽在www.sxpdf.com

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

1.这本书有哪些特点

（1）层次分明
iOS 动画效果非常丰富，本书一共 16 章，根据动画实现方式及效果分为 4
卷。第一卷（第 1～5 章）介绍显示层动画效果，第二卷（第 6～12 章）介绍内
容层动画效果，第三卷（第 13～14 章）介绍 3D 动画效果，第四卷（第 15～16
章）介绍转场动画效果。这种划分有利于读者在学习的过程中对所要查找的动
画效果快速定位，以及将知识点分类掌握。
第一卷为显示层动画效果，即利用 UIView 图层显示的效果实现各种动
画。常见的有位置动画、颜色动画、淡入淡出动画、旋转动画、关键帧动画、
逐帧动画等，文中针对要显示的动画效果一般采用 3 张图渐进描述，对于复
杂的动画效果多采用 6 张图或 9 张图描述动画的渐变过程。其效果分别如
图 1～图 4 所示。

图 1 位置动画

图 2 颜色渐变动画

图 3 关键帧动画

更多精彩尽在www.sxpdf.com

序言·V

图 4 逐帧动画

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

图 5 CAEmitterCell：粒子“鬼火”效果

图 6 CAGradientLayer：指纹扫描效果

图 7 CAShapeLayer：动态图表效果

更多精彩尽在www.sxpdf.com

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

图 8 CAReplicatorLayer：“恒星”公转效果

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

图 9 变换矩阵原理解析 图 10 Cover Flow 展示效果

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

图 11 转场翻页效果

更多精彩尽在www.sxpdf.com

序言·VII

图 12 自定义转场蒙版效果

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

图 13 UIView 常用动画合集

图 14 Layer 常用动画合集

更多精彩尽在www.sxpdf.com

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

图 15 常用转场动画合集

（3）适用性强
本书针对每个章节给出适合阅读的人群，便于读者过滤出适合自己的核心
内容。
（4）实用性强
在讲解每个动画案例的同时，尽可能贴近实际使用场景，如第二卷的各种
Layer 层动画实战案例、Button 按钮相关动画效果等，如图 16～图 17 所示。

图 16 按钮水纹点击效果

图 17 按钮登录效果

更多精彩尽在www.sxpdf.com

序言·IX

2.iOS 动画架构一览

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

图 18 iOS 动画分层结构

图 19 核心动画类结构

图 20 QuartzCore 框架下常用图层

3.如何使用这本书

俗语说得好：“工欲善其事，必先利其器”，要想很好地使用这本书，必

更多精彩尽在www.sxpdf.com

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

须先准备好一定的工具。本书中的所有代码都是基于 Swift 语言开发的，建议使
用 Xcode 8.0 、 SDK 10.0 以 上 版 本 调 试 。 源 码 下 载 地 址 详 见 ： http://www.
broadview.com.cn/30748。

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

· iOS 初级开发工程师：建议从第 1 章动画入门开始，循序渐进地阅读。
· iOS 中级开发工程师：建议浏览或者跳过第一卷，重点关注第二、三、

四卷。
· iOS 高级开发工程师：建议挑选工作中需要或感兴趣的章节阅读，如第 9

章“粒子动画”、第 10 章“光波扫描动画”。
· iOS 超级开发工程师：建议从整体架构和动画整理归纳的角度阅读本书。

致谢

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

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

郑微
2016 年 12 月于武汉

更多精彩尽在www.sxpdf.com

目录

第一卷 显示层动画
第 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

更多精彩尽在www.sxpdf.com

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

第 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

更多精彩尽在www.sxpdf.com

目录·XIII

第二卷 内容层动画

第 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

更多精彩尽在www.sxpdf.com

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

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 127
10.2.1 光波方向 / 124
10.2.2 光波颜色梯度 / 126
10.2.3 光波“彗星拖尾”效果 /
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

更多精彩尽在www.sxpdf.com

目录·XV

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

更多精彩尽在www.sxpdf.com

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

更多精彩尽在www.sxpdf.com

第一卷

显示层动画

◎ 第 1 章 动画之旅启航：登录按钮动画效果
◎ 第 2 章 显示层初级动画效果合集
◎ 第 3 章 显示层关键帧动画
◎ 第 4 章 显示层逐帧动画
◎ 第 5 章 GIF 动画效果

更多精彩尽在www.sxpdf.com

第 1 章 动画之旅启航：登录
按钮动画效果

本章内容

· 掌握动画分析步骤“三步曲”
· 掌握 UIView 下 Frame 属性动画移动效果

在本章，将实现简单的“登录界面按钮移动效果”，并通过这个动画效果
为大家介绍动画设计和分析的思路。本章的目标不仅仅是让大家弄清楚动画效
果是如何通过代码来实现的，更重要的是希望大家通过对本章节的学习，掌握动
画设计和分析的思路。并以这个思路为基础，设计更为复杂、绚丽的动画效果。

首先先来看看动画设计中的三个角色：产品设计师、算法分析师以及伟大
的程序员都有哪些职责。

（1）产品设计师：告诉大家想做一个什么样的动画。
（2）算法分析师：分析动画的实现原理并设计相应的动画算法。
（3）程序员：思考如何用代码实现算法。
在一般中小规模的公司中，开发人员往往都是身兼数职。不仅要编写代码
还要参与到算法的设计中去，甚至参与到动画原型的设计中去。所以弄清楚动
画设计过程中的不同角色，以及搞清楚动画的分析过程是非常有必要的。

更多精彩尽在www.sxpdf.com

第 1 章 动画之旅启航：登录按钮动画效果·3

1.1 动画分析方法

如图 1.1 所示是我们想要实现的动画效果，那么如何来分析它呢？其实产品
设计师在设计动画时，如果能够将动画分解为单帧图像，或者能够较为慢速地
展现动画的变化过程，那么对于算法分析师和程序员分析动画的原理，以及设
计合适的展现算法起着非常重要的作用。图 1.1 描述了登录按钮从左到右逐渐移
动的效果，并最后停留在视图层中间位置这一过程。

图 1.1 登录界面图标移动分帧效果

这个动画效果非常简单，可以用一句话来描述其实现算法，即图像的水平
方向位置坐标和时间呈线性渐变关系。接下来思考如何用代码实现这个效果。
按照动画的展示过程，这里将动画分为：动画起始阶段、动画进行阶段和动画
结束阶段。

1.动画起始阶段
在动画启动的瞬间，希望动画从屏幕可视界面外飞入进来。如图 1.2 所示的
登录按钮是需要实现的动画起始位置。在 iOS 视图中，左上角为视图的原点（0，
0），水平向右为 x 轴递增方向，竖直向下为 y 轴递增方向，只有当 View 视图

更多精彩尽在www.sxpdf.com

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

位于手机屏幕展示坐标系之内，大家才能看到（虚线区域内控件不可见），否
则登录按钮是不可见的。所以在动画的起始阶段可以将动画的位置属性设置在
界面之外。

图 1.2 动画起始阶段登录按钮所在位置

2.动画进行阶段

经过前面的分析，大家已经了解了这个动画效果的实现算法，即登录按
钮的坐标沿水平方向随时间线性变化。如表 1.1 所示描述了不同时间段登录
按钮的坐标变化情况。幸运的是大家不需要手动设计这一过程，甚至不需要
手动写线性渐变的方法，因为 iOS 在 UIView 的显示层已经帮我们把这个功能
集成了。iOS 在 UIView 图层中不仅集成了动画的线性渐变方法，而且动画的
加速、减速以及复杂的动画变化时间函数、运动路径函数也已经为大家集成
好了，所以只需要学会如何使用这些丰富的 API 即可，且这个功能只需要几
行代码就可以实现。

表 1.1 6S 下 QQ 图标移动效果：QQ 图标 x、y 坐标随时间变化关系表

View(x,y)坐标 0.25s 0.5s 0.75s 1.0s
（-394,y） （-256,y） （-118,y） （20,y）

更多精彩尽在www.sxpdf.com

第 1 章 动画之旅启航：登录按钮动画效果·5

3.动画结束阶段
在动画效果结束之后没有触发新的回调事件，只是更新了当前登录按钮的
最后位置，所以图片最终停留在视图层的中间位置。

1.2 登录按钮移动动画效果：闭包形式

首先创建一个单视图工程，创建好之后可以看到如图 1.3 所示的工程文件目
录结构：

图 1.3 单视图工程文件结构

动画实现的第一阶段：动画起始阶段
在开始正式添加动画代码之前需要为应用添加一个背景图片。在
Main.storyboard 中为整个工程添加一个已经准备好的背景图片，背景图片依托
在 UIImageView 上。如图 1.4 所示为当前工程的 Main.storyboard 中图层结构，
其中 View Controller 为整个工程的视图控制器，login 为 UIImageView 登录背景
图片。如图 1.5 所示是准备好的背景图片，通过图 1.5 可以看出，要想实现图 1.1
所示的动画效果，只需为整个登录界面添加一个登录按钮即可。

图 1.4 Main.storyboard 中图层结构

更多精彩尽在www.sxpdf.com

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

图 1.5 登录背景图片

动画起始阶段代码需要放在什么位置才合适呢？要想弄清楚这个问题先搞
清楚 ViewController.swift 中几个方法的执行顺序。需要关注以下 3 个方法。

viewDidLoad()
viewWillAppear()
viewDidAppear()

在应用启动之后，在 viewDidLoad 中会装载所有的 View 视图，注意，虽然
所有 View 视图都被装载进来，但是这时所有的 View 视图并不是可见的。程序
接着调用 viewWillAppear 方法，这是视图在展现之前需要调用的方法。而最后
调用 viewDidAppear，表明所有的视图已经可见。经过以上分析，大家应该清楚，
在动画起始阶段可以将所有的初始化代码放置在 viewDidLoad()方法中。具体实
现代码如下所示。

1 var loginButton:UIButton?
2 override func viewDidLoad() {
3 super.viewDidLoad()
4 loginButton = UIButton(frame: CGRect(x:-394,y:230,

width:self.view.frame.width-20*2,height:50))
5 loginButton!.backgroundColor = UIColor(red: 50/255.0, green:
185/255.0, blue: 170/255.0, alpha: 1.0)

更多精彩尽在www.sxpdf.com

第 1 章 动画之旅启航：登录按钮动画效果·7

6 loginButton!.setTitle("登录", for: UIControlState. normal)
7 self.view.addSubview(loginButton!)

}

代码第 1 行创建了一个 UIButton 登录按钮。第 3 行重写 viewDidLoad 方法，
表明应用启动之后首先通过调用 viewDidload 方法加载各种 UI 组键。第 4 行设
置当前 UIButton 登录按钮的位置，按钮的 x 坐标设置在整个界面之外，因此当
前 Button 按钮是不可见的。第 5 行为登录按钮添加一个淡绿色背景。第 6 行设
置登录按钮 Title 内容。最后一行将按钮添加到 self.view 图层上。

动画实现的第二阶段和第三阶段：动画进行阶段和动画结束阶段
要想实现应用打开动画即展现的效果，需要在 View 视图整体展现之前完成
动画实现的第二阶段和第三阶段的设置（因为如果视图已经显示了才设置动画
效果，那么会有动画不连贯的现象），所以这部分功能只能放置在 viewWillAppear
方法中。
这里使用的 UIButton 按钮和 UI 控件都是继承 UIView 类，UIView 类中有
一个动画方法可以完成我们想要实现的功能：

open class func animate(withDuration duration: TimeInterval,
animations: @escaping () -> Swift.Void)

该方法属于类方法，类名可以直接调用，表明为当前的 UIView 添加一个动
画效果，它的每个参数的含义如下。

· duration：表明动画执行周期。
· animations：表明动画执行内容。
注意，这里 animations 是一个闭包，使用闭包的方式将动画代码追加进去。
在闭包中只需要将动画的结束状态设置完成，那么动画从开始到结束的中间过
程，iOS 都会自动实现。下面为 viewWillAppear()中的动画实现代码。

override func viewWillAppear(_ animated: Bool) {
1 UIView.animate(withDuration: 1, animations: {
2 self.loginButton!.frame = CGRect(x:20,

y:self.loginButton!.frame.origin.y,

更多精彩尽在www.sxpdf.com

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

width:self.loginButton!.frame.width,
height:self.loginButton!.frame.height))

})
}

animate 方法中，duration 表明动画执行周期为 1s，动画闭包部分表明登录
按钮最终的位置，即最终停留在手机屏幕的中间位置。

1.3 登录按钮移动动画效果：方法形式

除了使用闭包的方法之外，还可以使用另外一种方式实现这个动画效
果，即通过 commit 相关方法的形式来实现。通过修改 viewWillAppear()中的
内容，可以实现相同的动画效果。下面是动画移动效果的另外一种代码实现
方式。

override func viewWillAppear(animated: Bool) {
1 UIView.beginAnimations(nil, context: nil)//动画开始
2 UIView.setAnimationDuration(1)//动画周期设置
3 loginButton!.frame = CGRect(x:20,

y:loginButton!.frame.origin.y,
width:loginButton!.frame.width,
height:loginButton!.frame.height)//动画位置设置
4 UIView.commitAnimations()//动画提交
}

代码第 1 行表明动画开始，这里先忽略需要传递的参数，可以先传递两个
nil。第 2 行设置动画执行周期，这里将动画周期设置为 1s。第 3 行将登录按钮
设置在屏幕中间位置。代码最后一行将动画效果提交到系统上运行。

其实无论是第 1.2 节的动画实现方法抑或是第 1.3 节的动画实现方法，都可
以把动画实现的过程总结为如图 1.6 所示的 3 个步骤。

而第 1.2 节和第 1.3 节实现动画的唯一区别就是一个使用闭包的形式，而另
一个使用 beginAnimations 和 commitAnimations 方法的形式启动动画。

更多精彩尽在www.sxpdf.com

第 1 章 动画之旅启航：登录按钮动画效果·9

图 1.6 动画实现步骤

1.4 UIView 视图中常见动画的属性分析

我们在第 1.2 节和第 1.3 节主要依靠 UIView 下的 frame 属性来实现登录按
钮从左到右的进入效果。那么 UIView 下的其他属性是不是也可以有类似的效果
呢？要想回答这个问题，首先需要弄清楚 UIView 都有哪些常见的属性。

1.位置属性：frame bounds center
frame、bounds、center 都是描述 UIView 的位置信息，不同的是 frame 可以
对 x 坐标、y 坐标、width、height 四个属性进行操作，frame 的 x 坐标和 y 坐标
相对于父控件的原点来计算，而 bounds 一般只能对 width、height 进行操作，它
的 x、y 坐标只相对于自身而言，center 描述的是 x、y 信息，即 UIView 的中心
位置。下面是 CGRect、origin、size 的代码描述。

public struct CGRect {
public var origin: CGPoint
public var size: CGSize
public init()
public init(origin: CGPoint, size: CGSize)

}

再来看看三者的数据类型。frame 是 CGRect 类型，它是一个结构体，在结
构体中包含 origin 和 size 两个属性。其中 origin 描述 UIView 的 x、y 坐标起始
位置信息，size 描述 UIView 的 width、height 宽高信息。我们再来看看 origin
的 CGPoint 和 size 的 CGSize 又是什么。

更多精彩尽在www.sxpdf.com

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

public struct CGSize { public struct CGPoint {
public var width: public var x: CGFloat
CGFloat public var y: CGFloat
public var height: public init()
CGFloat public init(x: CGFloat,
public init()
public init(width: y: CGFloat)
}
CGFloat, height: CGFloat)

CGpoint 中包含了 UIView 的 x、y 坐标，而 CGSize 中包含了 UIView 的
Width、Height 信息。通过对 frame 中数据类型的追本溯源，可以得到以下结论：
CGRect 分别对应 x 坐标、y 坐标、width、height 四个属性。这四个属性表明当
前 UI 在它的父控件上的位置，如 self.view 上。

通过以上分析可以知道，可以通过 x、y 坐标修改 UIView 的移动位置，还
可以通过修改 width 或者 height 来修改 UIView 的拉伸、收缩效果。对于 bounds
属性使用最多的还是 width、height 属性，center 则经常使用 x、y 坐标属性。

2.透明度属性：alpha（透明度属性、范围 0-1、浮点型）

UIView 的 alpha 透明度属性也可以用作动画效果。当 alpha 为 0 时，表明
UIView 已经隐藏，当 alpha 为 1 时 UIView 显示。结合这一特征可以通过修改
alpha 在动画开始、结束时的值，实现 UIView 的淡入淡出效果。

3.Layer 属性：圆角渐变、边框颜色、阴影、3D 等高级动画效果

UIView 是视图显示的容器，负责内容显示和事件响应。每个 UIView 都有
一个 Layer 图层，在这个图层中承载的是视图的内容，所以结合 Layer 可以实现
很多高级的动画效果。当然除了这些之外，UIView 还有很多其他属性，在后面
的章节中会为大家一一呈现。

更多精彩尽在www.sxpdf.com

第 1 章 动画之旅启航：登录按钮动画效果·11

1.5 本章小结

通过对本章的学习，相信大家基本上掌握了动画分析的基本步骤，在这里
总结一下动画实现的三个步骤：

（1）设置视图的动画初始状态。
（2）添加视图的动画相应属性。
（3）设置视图的动画最终状态。
在通过帧分解等方法了解了动画的实现原理之后，通过这三个步骤可以很
方便地实现各种动画效果。本章结合登录按钮移动效果为大家展示了动画分析
和实现的全过程，并通过代码详细介绍了通过闭包方式，以及 beginAnimations
和 commitAnimations 方法的形式实现动画。
对于 UIView 中常见的动画属性，结合 UIView 对视图的位置、透明度、几
何形状给大家做了简要的分析，在后面的章节中会结合具体的代码，为大家呈
现缤纷多彩的动画效果。

更多精彩尽在www.sxpdf.com

第 2 章 显示层初级动画效果
合集

本章内容

· 掌握 UIView 显示层常用动画效果合集：位置、几何形状、旋转、缩放、
· 掌握动画效果的组合使用
· 理解抽奖转盘动画效果的实现方法
本章将对 UIView 显示层常用的所有动画效果做一个小结，重点掌握动画中
位置、几何形状、旋转、缩放、淡入淡出、颜色渐变等动画效果，并对 CoreGraphics
框架中的 CGAffineTransform 属性做一定的了解。本章还是以第 1 章中的登录按
钮为例来实现这些动画效果。

2.1 UIView 显示层初级动画属性一览

UIView 显示层动画效果的实质还是通过修改 UIView 的各种属性来实现
的。比如，如果想实现移动动画效果，则可以设置 UIView 的 frame 位置属性，
如果想实现淡入淡出效果，则可以设置 UIView 的 alpha 属性。所以要想弄清楚
UIView 显示层都有哪些动画效果，首先要了解 UIView 的各种常用属性。

UIView 是大多数 UI 组件的父类，其常用的属性和方法有很多，不过涉及

更多精彩尽在www.sxpdf.com

第 2 章 显示层初级动画效果合集·13

动画效果的属性和方法并不是很多。下面是为大家整理的 UIView 动画效果经常
涉及的属性。

public init(frame: CGRect) *backgroundColor
public var bounds: CGRect
public var center: CGPoint
public var alpha: CGFloat
@property(nullable, nonatomic,copy)UIColor
public var transform: CGAffineTransform

2.2 初级动画效果合集

2.2.1 位置动画

在第 1 章中，利用 UIView 的 frame 属性实现了登录按钮的移动动画效果，
下面将结合 UIView 的 center 属性来实现这一效果。界面的初始化部分和登录按
钮的添加代码请参考第 1 章，这里就不再赘述。

UIView 的 center 属性表明当前 UI 的中心位置，我们想让登录按钮最终停
留在界面的中心位置，如图 2.1 所示。

图 2.1 位置动画最终效果

在 iPhone 6s plus 中，当前登录按钮的 center 可以通过 print 的形式打印出来。

更多精彩尽在www.sxpdf.com

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

最终登录按钮将停留在 center 为（207.0, 255.0）的位置上。所以要想实现第 1
章的动画移动效果只需要将按钮的最终中心位置设置在（207.0, 255.0）即可。
下面是具体代码实现。

override func viewWillAppear(animated: Bool) {
// 位置动画
1 UIView.beginAnimations(nil, context: nil)//动画开始
2 UIView.setAnimationDuration(1)//动画周期设置
3 loginButton!.center = CGPoint(x:207,y:255)//动画位置设置
4 UIView.commitAnimations()//动画提交
5 print("center:\(loginButton!.center)");
}

代码第 1 行使用 UIView 的类方法表明动画开始，第 2 行设置动画执行周期
为 1s，第 3 行设置动画中心位置，第 4 行提交动画，最后一行打印当前动画的
中心位置。

2.2.2 几何形状动画

可以根据不同的应用场景，把登录按钮进行压缩或者拉伸，动画效果如
图 2.2 所示。通过观察图 2.2 中第一张图和最后一张图，基本可以弄明白这个动
画效果的演变过程。在动画的变化过程中，登录按钮的宽度被压缩，高度被拉
伸。所以通过修改登录 UIButton 的宽高即可实现图中的动画效果。

图 2.2 动画拉伸压缩效果

更多精彩尽在www.sxpdf.com

第 2 章 显示层初级动画效果合集·15

下面是具体的代码实现。

override func viewWillAppear(_ animated: Bool) {
// 几何形状

1 UIView.beginAnimations(nil, context: nil)//动画开始
2 UIView.setAnimationDuration(1)//动画周期设置
3 loginButton!.bounds = CGRect(x:0,y:0,

width:loginButton!.frame.size.width*0.7,
height:loginButton!.frame.size.height*1.2)
4 UIView.commitAnimations()//动画提交
}

该代码与第 2.1 节的代码类似，重复部分就不再赘述，其核心代码在第 3
行，通过修改 UIButton 的 Bounds 属性来实现登录按钮宽度被压缩，高度被拉
伸的效果。登录按钮宽度修改为原来的 0.7 倍，相当于宽度被压缩。高度修改为
原来的 1.2 倍，相当于高度被拉伸。Bounds 中 x、y 坐标都设置为 0，因为 Bounds
中的 x、y 是相对于自身而言，实际并不修改登录按钮的位置。

2.2.3 位置+形状动画

如果想让位置和形状一起变化如何来实现呢？比如实现如图 2.3 所示的效
果。登录按钮一边向整个应用的左边对齐，一边宽度压缩、高度拉伸。细心的
读者可能会发现，利用位置动画和几何形状动画的组合动画即可实现这种效果。

图 2.3 登录按钮位置+形状动画效果

更多精彩尽在www.sxpdf.com

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

使用 Bounds+center 属性可以实现图 2.3 的动画效果，不过在本小节为大家
介绍另外一种动画实现方法。Bounds 属性的 width、height 可以修改拉伸缩放，
center 的 x、y 属性可以修改位置。使用 UIButton 的 frame 属性，可以同时囊括
x、y、width、height。下面是具体实现代码。

override func viewWillAppear(_ animated: Bool) {
// 位置＋形状动画
1 UIView.beginAnimations(nil, context: nil)//动画开始
2 UIView.setAnimationDuration(1)//动画周期设置
3 loginButton!.frame = CGRect(x:0 ,y:230,

width:loginButton!.frame.size.width*0.7,
height:loginButton!.frame.size.height*1.2)
4 UIView.commitAnimations()//动画提交
}

2.2.4 淡入淡出动画

在第 2.2.1 节实现的是登录按钮移动动画效果，这种类型的动画按照功能来
分还可以称之为进入动画。在本小节将为大家介绍另外一种控件进入动画：淡
入动画。如图 2.4 所示为淡入动画效果图。

图 2.4 淡入动画效果

更多精彩尽在www.sxpdf.com

第 2 章 显示层初级动画效果合集·17

从图 2.4 中可以看出按钮的透明效果逐渐变弱，登录按钮逐渐出现在视野之
内。回顾第 2.1 节中 UIView 的常用属性，alpha 的透明度属性可以实现这一效果。
注意：默认情况下 UIView 的子控件中 alpha 的值都为 1，即可见状态。要想实现淡
入过程，在代码中，需要先把 UIButton 的 alpha 属性设置为 0，然后在动画执行效
果中将动画的透明度属性设置为 1.0。下面是具体的实现代码。

1 loginButton!.alpha = 0;//登录按钮初始化时，将其透明度设置为 0，即隐藏状态
override func viewWillAppear(_ animated: Bool) {

// 淡入淡出
2 UIView.beginAnimations(nil, context: nil)//动画开始
3 UIView.setAnimationDuration(2)//动画周期设置
4 loginButton!.alpha = 1;
5 UIView.commitAnimations()//动画提交
}

2.2.5 颜色渐变动画

在第 2.2.1 节登录界面初始化为可用状态，颜色设置为青绿色。当按钮或者
控件变为不可用状态时需要将登录按钮设置为灰色，表明当前不可点击。这一
过程可以使用动画来描述。如图 2.5 所示描述了登录界面按钮从可用状态到不可
用状态的颜色渐变过程。

图 2.5 淡入动画效果

更多精彩尽在www.sxpdf.com

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

下面是具体的代码实现方法：

override func viewWillAppear(_ animated: Bool) {
// 颜色渐变
1 UIView.beginAnimations(nil, context: nil)//动画开始
2 UIView.setAnimationDuration(2)//动画周期设置
3 loginButton!.backgroundColor = UIColor.gray
4 UIView.commitAnimations()//动画提交
}

2.2.6 缩放动画：基于 UIView 的 transform 属性

UIView 有 一 个 非 常 重 要 的 动 画 属 性 transform ， 该 属 性 继 承 于
CGAffineTransform，“CG”实际上是 CoreGraphics 框架的缩写。可见 transform
属性是核心绘图框架与 UIView 之间的桥梁，借助于这一属性可以制作很多高级
的动画效果。

transform 最常用的三种动画分别是缩放、旋转和位移。在第 2.2.2 节介绍了
UIView 的缩放效果，即几何尺寸的变化，下面将采用 transform 属性完成这一
动画效果。下面是具体的代码实现。

override func viewWillAppear(_ animated: Bool) {
// CGAffineTransform:缩放
1 UIView.beginAnimations(nil, context: nil)//动画开始
2 UIView.setAnimationDuration(1)//动画周期设置
3 loginButton!.transform = CGAffineTransform(scaleX: 0.7,

y: 1.2)
4 UIView.commitAnimations()//动画提交
}

这段代码与第 2.2.2 节的缩放动画代码有很多重复的地方，这些重复的地方
就不一一赘述。重点来关注代码的不同点，即代码的第 3 行 CGAffineTransform 方
法是缩放动画的核心。

CGAffineTransform(scaleX: 0.7, y: 1.2)

该方法有两个输入参数，分别控制 UI 组件宽高的缩放比。当 sx 设置为 1.0

更多精彩尽在www.sxpdf.com

第 2 章 显示层初级动画效果合集·19

的时，表明 UI 组件宽度没有缩放；当 sx 设置为 0.5 时，表明 UI 组件宽度缩小
为原来的一半。这里设置登录按钮宽度为原来的 0.7 倍，高度设置为原来的 1.2 倍。

2.2.7 旋转动画：基于 UIView 的 transform 属性

若想让登录按钮旋转 45°如何来实现呢？通过第 2.2.6 节对 transform 属性的
介绍可以知道，CGAffineTransform 类中会有响应的旋转动画 API。下面是具体
的实现代码。

override func viewWillAppear(_ animated: Bool) {
// CGAffineTransform:旋转
1 UIView.beginAnimations(nil, context: nil)//动画开始
2 UIView.setAnimationDuration(1)//动画周期设置
3 let angle:CGFloat = CGFloat(M_PI_4);
4 loginButton!.transform = CGAffineTransform(rotationAngle:
angle)
5 UIView.commitAnimations()//动画提交
}

iOS 的 SDK 中提供了很多宏，方便开发者直接使用，在上面的代码中，使
用了描述角度的宏定义。若想让登录按钮旋转 45°，那么对应的弧度为：

public var M_PI_4: Double { get } /* pi/4 */

rotationAngle 方法是以弧度为单位进行旋转的，这里需要特别注意，下面
是旋转 45°时的动画效果，如图 2.6 所示。

2.2.8 位移动画：基于 UIView 的 transform 属性

位移动画的实现与旋转动画和缩放动画的实现类似，关键是对 transform 属
性的认识。位移动画，顾名思义，就是修改登录按钮当前的位置，即登录按钮
的 x、y 坐标，不过与之前讲到的位置动画有所不同。在第 2.2.1 节中，修改 x
值、y 值直接反应在登录按钮的左上角位置。如图 2.7 所示。

更多精彩尽在www.sxpdf.com

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

图 2.6 旋转动画效果

图 2.7 位置动画 x、y 位置

位移动画是设置当前的登录按钮相对于 x、y 轴移动了多少，比如想让登录
按钮在 x 轴负方向移动 20，在 y 轴正方向移动 100。实现代码如下所示。

override func viewWillAppear(_ animated: Bool) {
// CGAffineTransform:移动
1 UIView.beginAnimations(nil, context: nil)//动画开始
2 UIView.setAnimationDuration(1)//动画周期设置
3 loginButton!.transform =

更多精彩尽在www.sxpdf.com

第 2 章 显示层初级动画效果合集·21

CGAffineTransform(translationX: 0, y: 300)
4 UIView.commitAnimations()//动画提交
}

代码最终运行效果如图 2.8 所示。

图 2.8 位移动画效果

2.2.9 组合动画效果

在掌握了以上几种常用的 UIView 初级动画效果的基础上，还可以将之灵活组
合，以实现更为复杂和高级的效果。下面实现一个组合动画效果，如图 2.9 所示。

图 2.9 组合动画效果

更多精彩尽在www.sxpdf.com

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

图 2.9 组合动画效果（续）

根据图 2.10 所展示的动画演变过程，单击登录按钮之后，登录按钮一边旋
转，一边缩放，同时向登录界面的右上角移动，在移动的同时按钮的透明度也
在逐渐减弱。最后整个登录按钮消失在登录界面的右上角。下面来总结一下这
个复杂的组合动画效果涉及哪些效果：

（1）旋转动画效果
（2）位置动画效果
（3）缩放动画效果
（4）淡入淡出动画效果
虽然这个组合动画看起来比较复杂，但经过层层剖析之后会发现，其实
每个动画的知识点都是已经讲解过的，下面是具体代码实现方法。代码分为
两个部分，一部分是实例化登录按钮，另一部分是添加登录按钮之后的响应
方法。

1 var loginButton:UIButton?
2 override func viewDidLoad() {
3 super.viewDidLoad()
4 loginButton = UIButton(frame: CGRect(x:20,y:230,

更多精彩尽在www.sxpdf.com

第 2 章 显示层初级动画效果合集·23

5 width:self.view.frame.width-20*2,height:50))
6 loginButton!.backgroundColor = UIColor(red: 50/255.0,
7
green: 185/255.0, blue: 170/255.0, alpha: 1.0)
8 loginButton!.setTitle("登录", for:
}
UIControlState.normal)
loginButton!.addTarget(self,

action: #selector(ViewController.loginAction),
for: UIControlEvents.touchUpInside)
self.view.addSubview(loginButton!)

在 viewDidLoad()方法中实例化一个 UIButton，并将其添加在登录界面的合
适位置（注意这里是以 6s plus 模拟器为例，对于其他型号的模拟器，需要适当
调整登录按钮的位置坐标），代码第 7 行添加登录按钮响应方法。响应方法具
体代码如下所示。

func loginAction() {
1 UIView.beginAnimations(nil, context: nil)//动画开始
2 UIView.setAnimationDuration(2)//动画周期设置
3 let angle:CGFloat = CGFloat(M_PI);
4 loginButton!.transform = CGAffineTransform(rotationAngle:
angle)
5 loginButton!.frame = CGRect(x: 400,y: 0,

width: loginButton!.frame.width*0.1,
height: loginButton!.frame.height*0.1)
6 loginButton!.alpha = 0;
7 UIView.commitAnimations()//动画提交
}

代码第 1 行表明动画开始，第 2 行设置动画执行周期为 2s。第 3 行获取动
画旋转时的角度（180°），代码从第 4 行到第 6 行分别设置动画旋转效果、位
置、缩放效果和淡出效果。代码第 5 行采用 frame 属性将位置动画和缩放动画
集成在一起。代码第 7 行为动画提交。可见这段代码并不难理解，只是把我们
已经学过的知识进行灵活组合，所以在掌握了基础动画合集的基础上，通过简
单的组合，可以形成各种炫酷的效果。

更多精彩尽在www.sxpdf.com

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

动画就是这么简单！

2.3 动画常用属性及回调方法的使用

2.3.1 动画常用属性的使用

在第 2.2.1 节位置动画中，有一行代码描述了 UIView 动画执行的周期：
UIView.setAnimationDuration(1)。这行语句表明该动画的执行周期设置为 1s，其
实在 iOS 动画中还有很多用于设置动画效果的常用属性。下面是常用的 UIView
动画属性设置方法。

（1）setAnimationDelay
（2）setAnimationCurve
（3）setAnimationsEnabled
（4）setAnimationDuration
（5）setAnimationRepeatAutoreverses
（6）setAnimationRepeatCount
setAnimationDelay 方 法 用 于 设 置 动 画 延 迟 执 行 时 间 间 隔 ， 例 如
setAnimationDelay(1)，表明动画在启动之后，实际展示效果要等 1s 之后才能显
示出来，该方法中传递的整型参数单位为秒。
setAnimationCurve 方法用于设置动画加速、减速效果。setAnimationCurve
传递的参数是一个枚举类型，有以下几种常用类型。
（1）UIViewAnimationCurve.EaseInOut
（2）UIViewAnimationCurve.EaseIn
（3）UIViewAnimationCurve.EaseOut
（4）UIViewAnimationCurve.Linear

更多精彩尽在www.sxpdf.com

第 2 章 显示层初级动画效果合集·25
EaseInOut 类型表明在动画开始和结束时都呈现减速效果，即开始和结束时
动画执行速度较慢。EaseIn 类型表明在动画开始时呈现减速效果，即开始时动
画执行速度较慢。EaseOut 类型表明在动画结束时呈现减速效果，即结束时动画
执行速度较慢。Linear 类型表明动画在整个执行周期内速度一致，可以认为是
匀速运动。
setAnimationsEnabled 方法用于设置动画是否使能，它有 true 和 false 两个参
数。当设置为 false 时，动画效果禁止。当设置为 true 时，动画效果使能。
setAnimationDuration 方法用于设置动画执行时间周期，该方法中传递
的整型参数单位为秒。例如设置 setAnimationDuration(1)表明动画执行周期
为 1s。
setAnimationRepeatAutoreverses 方法用于设置动画是否有重复返回效果。例
如 实 现 一 个 位 移 动 画 ， 登 录 按 钮 沿 y 轴 正 方 向 移 动 300 。 当
setAnimationRepeatAutoreverses（true）设置为 true 时，效果如图 2.10 所示。

图 2.10 setAnimationRepeatAutoreverses 方法返回效果

更多精彩尽在www.sxpdf.com

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

图 2.10 setAnimationRepeatAutoreverses 方法返回效果（续）

setAnimationRepeatCount 方法用于设置动画重复执行次数。注意，这里如
果将动画重复执行次数设置为 2，动画返回效果设置为 false 时，那么第二次动
画并不是在达到图 2.11 中第四幅图的位置返回，而是重新从的第一幅图的位置
处开始执行。

2.3.2 动画回调方法的使用

动画除了常用的属性设置之外，回调方法也经常使用。动画中常见的回调
方法有动画开始时回调和动画结束时回调两种。而回调方法的设置也有两种情
况，一种是使用 delegate 委托代理实现动画回调，另一种是通过 set 方法实现回
调。先来看看第一种回调方法，

（1）delegate 回调方法
下面是具体实现代码。

override func viewWillAppear(_ animated: Bool) {
// CGAffineTransform:缩放
1 UIView.beginAnimations(nil, context: nil)//动画开始
2 UIView.setAnimationDelegate(self)//设置回调对象

更多精彩尽在www.sxpdf.com

第 2 章 显示层初级动画效果合集·27

3 UIView.setAnimationDuration(1)//动画周期设置
4 loginButton!.transform = CGAffineTransform(scaleX: 0.7, y:
1.2)
5 UIView.commitAnimations()//动画提交
}

代码第 2 行设置 self 回调对象，表明动画的回调方法都在 self 对象中实
现。下面是回调方法实现。这里想实现动画结束后的停止回调方法，所以
重写 animationDidStop 方法，注意，这里是 override 重写，而不是创建一个新
的方法。

override func animationDidStop(anim: CAAnimation, finished
flag: Bool) { (swift2.3)

print("animation stop!")
}

当动画执行完之后就会触发该回调方法打印 log：animation stop!

（2）setAnimationDidStopSelector 自定义回调方法

除 了 通 过 delegate 委 托 代 理 的 方 式 设 置 回 调 方 法 之 外 ， 还 可 以 使 用

setAnimationDidStopSelector 自定义委托代理方法。下面将举例实现自定义委托

代理方法。下面想实现一个缩放效果，在缩放效果动画结束之后，通过回调自

定义的动画结束方法完成回调。具体实现代码如下：

override func viewWillAppear(_animated: Bool) {
// CGAffineTransform:缩放
1 UIView.beginAnimations(nil, context: nil)//动画开始
2 UIView.setAnimationDelegate(self)//设置回调对象
3 UIView.setAnimationDuration(1)//动画周期设置
4 loginButton!.transform = CGAffineTransform(scaleX: 0.7,

y: 1.2)
5 UIView.setAnimationDidStop(#selector

(ViewController.animationEnd))
6 UIView.commitAnimations()//动画提交
}

在代码的第 5 行通过 setAnimationDidStop 方法设置了一个自定义的动画

更多精彩尽在www.sxpdf.com

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

回调方法 animationEnd。在自定义回调方法中打印一行 log，表明当前动画已
经结束，下面是具体实现代码。动画结束后会打印一行 log 信息 AnimationEnd!

func animationEnd(){
print("AnimationEnd!")

}

2.3.3 案例：抽奖转盘旋转动画效果的简单实现

在一些抽奖 APP 中经常会碰到抽奖转盘动画效果，这种动画效果实现起来
比较复杂，在这里结合已经学习过的常用动画合集以及动画属性回调方法实现
一个最简单的抽奖转盘连续转动效果。

在第 2.2.7 节介绍了使用 UIView 的 transform 属性实现旋转的效果，那可否
利用到转盘上呢？这里将登录按钮替换为 UIImageView（承载一张抽奖转盘
图），实现代码如下。

override func viewWillAppear(_ animated: Bool) {
// CGAffineTransform:旋转
1 UIView.beginAnimations(nil, context: nil)//动画开始
2 UIView.setAnimationDelegate(self)
3 UIView.setAnimationDidStop(#selector

(ViewController.animationEnd))
4 UIView.setAnimationDuration(0.1)//动画周期设置
5 let angle:CGFloat = CGFloat(M_PI_2);
6 imageView!.transform =

CGAffineTransform(rotationAngle: angle)
7 UIView.commitAnimations()//动画提交
}

动画最终执行效果如图 2.11 所示。

更多精彩尽在www.sxpdf.com

第 2 章 显示层初级动画效果合集·29

图 2.11 抽奖转盘滚动动画效果

在转盘滚动代码的第 5 行设置 90°滚动效果，如果想实现连续滚动是不是将
角度设置大一点就可以了呢？比如滚动 10 圈，这里将滚动角度修改为：

let angle:CGFloat = CGFloat(M_PI_2*4*10);

事实并非如此美好，当角度改为 M_PI_2*4*10，换算成角度为 360*10，即
表示 10 圈。Transform 认为 3600°刚好是 360°的整数倍，那么动画执行完之后又
回到了原始状态，所以这时候 UIView 就认为既然起始状态是 0°，旋转之后动
画的结束状态和起始状态一致，UIView 就不会进行任何旋转。

如何避免这一问题呢？可以结合第 2.3.2 节的方法，让转盘每次转动 90°，
当转盘停下来时，会回调 stop 方法，在 stop 方法中可以让转盘继续旋转，下面
是具体实现代码：

func animationEnd() {
1 UIView.beginAnimations(nil, context: nil)//动画开始
2 UIView.setAnimationDelegate(self)
3 UIView.setAnimationDidStop(#selector

(ViewController.animationEnd))
4 UIView.setAnimationDuration(0.1)//动画周期设置
5 let angleStart:CGFloat = CGFloat(M_PI_2)
6 index += 1
7 let angle:CGFloat = CGFloat(index)*angleStart
8 imageView!.transform =

更多精彩尽在www.sxpdf.com

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

9 CGAffineTransform(rotationAngle: angle)
} UIView.commitAnimations()

以上代码有几点需要注意：第一点，该动画设置了 delegate 回调对象。第
二点，该动画设置动画执行周期为 0.1s。第三点，该动画每次旋转 90°。

该回调方法中会启动新一轮旋转动画效果，每一次回调，旋转角度都在原
来的基础上增加 90°以达到继续旋转的效果。这里初始化 index 为 0，回调方法
中每次自加 1 以实现旋转累计增加 90°的效果。

2.4 本章小结

本章结合 UIView 的基本属性，详细介绍了 UIView 显示层常用动画效果。
并对位置动画、几何形状动画、淡入淡出动画、颜色渐变动画、旋转动画等动
画效果做了全面详尽的分析。相信大家通过对本章的学习，今后再使用 UIView
动画合集中的效果时都能游刃有余。

在本章的最后，重点介绍了 UIView 动画的各种属性设置和回调方法。
UIView 展示的主题效果受 UIView 动画合集中使用哪种类型的动画效果限制，
而 UIView 展示的一些细节则受到动画属性限制。比如动画执行周期、动画运动
加速效果、动画是否具有返回效果等。除了常用的动画属性设置之外，回调方
法也非常重要。比如抽奖转盘旋转动画，就是将动画的旋转效果结合动画结束
回调方法的一个典型应用。

更多精彩尽在www.sxpdf.com

第 3 章 显示层关键帧动画

本章内容

· 理解关键帧动画的实现原理
· 掌握动画中常用关键帧的设置
iOS 中的动画可以分为很多种类型，根据图层显示可以分为隐式动画和显
示动画。根据动画在 iOS 中实现的“位置”可以分为显示层（UIView）动画和
内容层（Layer）动画。在第 2 章中为大家详细介绍了 UIView 显示层动画合集，
以及 UIView 图层中各种各样的初级动画效果。本章将为大家介绍 UIView 层另
一种动画效果：关键帧动画。关键帧动画主要使用在通过动画的几张关键图片
描述整个动画的效果的情况下。

3.1 关键帧动画实现原理

关键帧动画的实现与 UIView 动画合集中提到的动画效果有一些不同，在
UIView 动画合集中都是通过修改当前 UI 控件的各种属性来实现想要的动画效
果，而关键帧动画只需要设置动画的几个关键的显示帧。

下面为大家举一个例子，如图 3.1 所示是飞机降落的动画效果。

更多精彩尽在www.sxpdf.com

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

图 3.1 飞机降落动画效果

该动画效果描述了飞机从机场的左上方降落到机场的右下方。使用 UIView
基础动画合集中的效果可以实现这一动画，不过这里将采用关键帧动画来实现，
并实现一些对动画更为精确的控制。假设当前动画运动的位置坐标是从（100，
100）位置运动到（300，300）位置，整个动画持续时间为 2s。那么就可以在
0s 的时候添加第一帧（起始帧），飞机位置（100，100）作为动画的起始帧。然
后在 2s 的时候添加关键帧（或者叫结束帧），飞机位置（300，300）。那么飞机
根据这两帧就可以实现降落的运动效果。

添加起始帧和结束帧可以基本完成飞机降落的动画效果，但是要想实现更
为精确的控制就必须再多添加几帧。比如飞机在 0.5s 时，控制飞机运动到（150，
175）的位置处。可以在动画的 0.5s 时添加一个关键帧，关键帧的内容描述当前
飞机运动到（150，175）处。

3.2 案例：关键帧动画之飞机降落

如图 3.2 所示，这里为大家准备了两张图，左图描述当前机场，右图描述当
前的飞机。

更多精彩尽在www.sxpdf.com