01初识UI动效 13
1.1认识UI 14
1.1.1UI操作系统的发展简介 14
1.1.2 UED团队的构成与介绍 17
1.1.3 UI的应用领域分析 18
1.1.4 UI设计师的自我修养 25
1.2认识UI动效 28
1.2.1孕育中的UI动效 29
1.2.2 UI动效行业的现状与发展 30
1.2.3 UI动效的应用领域分析 32
1.2.4让设计有意义地存在 37
1.3如何玩转UI动效 38
1.3.1系统设备的准备 38
1.3.2我的切身学习体会 39
1.3.3螺旋提升计划 40
1.3.4建造你的灵感弹药库 42
1.3.5如何正确看待“审美” 44
1.3.6嘿！你着什么急 44
1.4 UI动效制作的工具介绍 45
1.4.1二维/原型类动画工具 45
1.4.2 3D类动画工具 49
1.4.3 After Effects 52
02动手之前先动脑——如何提炼你的设计思维 55
2.1全局考量 56
2.1.1设计师和美工，仅一步之遥 56
2.1.2“先整体后局部”的思考程序 57
2.1.3美观，不代表一定优质 58
2.1.4设计该有温度 59
2.2如何构思你的动效方案 59
2.2.1你真的懂得如何去“看”吗 60
2.2.2绘制你的动画分镜头 62
2.2.3可行性评估 65
2.2.4可拓展性和品牌感 66
2.2.5构思期间的进展同步 66
2.3思维导图构建和灵感提炼 67
2.3.1什么是思维导图 67
2.3.2如何绘制你的思维导图 71
2.3.3养成灵感提炼的习惯 72
03教你如何快速玩转After Effects——五大学习阶段全修炼 73
3.1半小时，熟悉After Effects系统的基本操作 74
3.1.1认识After Effects的基本面板 74
3.1.2如何将PSD文件导入After Effects 75
3.1.3如何将AI文件导入After Effects 77
3.1.4如何将Sketch文件导入After Effects 80
3.1.5新建工程文件与相关参数设置 83
3.1.6顶部工具栏的认识 84
3.1.7图层编辑区域的介绍 84
3.1.8红条出现，别慌 87
3.2一小时，熟悉界面基本操作技巧 88
3.2.1新建固态层（Solid Layer） 88
3.2.2“嵌套”功能的使用 89
3.2.3创建“父子关联” 90
3.2.4 SHY和SOLO 91
3.2.5关于“MASK”（遮罩）功能的介绍 94
3.2.6 3D Layer（3D层） 99
3.2.7实战：After Effects摄像机的操作 101
3.3两小时，学会形状图层的运用 101
3.3.1如何创建Shape Layer 102
3.3.2 Contents属性的使用 103
3.3.3关于路径图形的创建 114
3.3.4 Anchor Point（图层轴心点） 115
3.3.5如何创建文字层 116
3.3.6 Null Object（空对象）的创建和使用 117
3.3.7“木偶图钉”工具的使用 118
3.3.8图层的复制、截断和去首尾处理 120
3.4一小时，让你的UI动起来 122
3.4.1帧与关键帧 122
3.4.2关键帧的创建与使用 123
3.4.3曲线动画效果的制作 126
3.5聊聊渲染 130
3.5.1After Effects渲染面板的介绍 130
3.5.2不同的渲染输出方式介绍 132
04动效大爆炸——H5动效的实现方式与Material Design动画原则 135
4.1了解HTML5 136
4.1.1什么是HTML5 136
4.1.2前端工程师的介绍 138
4.1.3动画实现大揭秘1：原生动画 139
4.1.4动画实现大揭秘2： CSS3动画 145
4.1.5动画实现大揭秘3： CSS2＋JavaScript 149
4.1.6动画实现大揭秘4： Canvas＋SVG 150
4.1.7动画实现大揭秘5： WebGL 154
4.1.8动画实现大揭秘6：另辟蹊径 156
4.2 Material Design动画，你必须要知道的 160
4.2.1什么是Material Design动画 160
4.2.2影响Material Design动画的客观属性 161
4.2.3 Material Design的动画表现形式 163
4.2.4 Material Design动画设计的注意事项 168
05游戏有外挂，动效有脚本——不同动效插件的介绍与使用方法 173
5.1概述 174
5.2 Shape Fusion（融合效果脚本插件） 174
5.2.1Shape Fusion的安装与加载方法 175
5.2.2 Shape Fusion的使用与操作流程 176
5.3 Mt.Mograph Motion（图形动画脚本插件） 178
5.3.1面板区域的介绍 179
5.3.2动画命令的介绍 180
5.4 Bodymovin（After Effects动画转HTML5的脚本插件） 185
5.4.1关于Lottie工具的介绍 186
5.4.2 Bodymovin的安装与加载方式 186
5.4.3如何在Bodymovin中完成动画的渲染输出 189
06手把手教你玩动效——动效制作方法的视频全解析 193
6.1概述 194
6.2基础篇 194
6.21水波纹加载动画 195
6.2.2界面构成五部曲 196
6.2.3 LOGO诞生记 197
6.2.4圆环波普棉花糖 198
6.2.5线体ICON变形计 199
6.2.6水滴融合Loading（有插件＋无插件双实现版本） 200
6.2.7灵动的文字百叶窗 201
6.2.8生长的自行车 202
6.2.9液态流体的LOGO 203
6.3进阶篇 204
6.3.1图形切割 204
6.3.2 2D卡通的爆炸LOGO 206
6.3.3电击的LOGO 207
6.3.4动感涂鸦字体LOGO 208
6.3.5 HUD炫动光环 209
6.4高级篇 210
6.4.1Hologram全息手表演示动效 211
6.4.2 QQ会员15周年加速特权篇动效方案 212
6.4.3粒子LOGO动画 213
07踏上不归路，就请坚持到底 215
7.1自学，究竟有多难 216
7.2关于Performance Flow（演绎过程） 220
7.3我的个人学习建议 222
后记 224