新印象 After Effects移动UI动效制作与设计精粹

　　这是一本关于UI动效制作技法的教程，主要介绍在UI设计完成后，如何使用After Effects来制作动效。全书内容以After Effects为基础，以UI设计成品为素材，通过技法讲解和实例操作的形式介绍了常见UI动效的制作方法，包括认识UI动效、After Effects动效制作基础、UI组件动效、常见的UI动效、常用的动效制作脚本和电动车助手App动效实现等内容。为了帮助读者快速掌握UI动效制作技法，本书实例遵循“UI组件小效果→常见的UI效果→全套UI效果”的模式进行讲解。本书可供UI动效制作初学者、UI设计师阅读和学习，也可作为高等院校数字艺术类、UI设计类相关专业的教材。

　　铛辉，周铛辉，现任网易视觉设计师，获得网易LOFTER设计师。 拥有两年互联网创业团队经历，且担任主要设计负责人，拥有多个落地项目经验，多次获得UI设计和平面设计大奖。

目录
1．1　UI简介．18
1．1．1　什么是UI18
1．1．2　发展现状及未来．18
1．1．3　UI的应用领域．19
1．1．4　什么才是优秀的UI19
1．2　UI动效．20
1．2．1　UI动效很重要．20
1．2．2　UI动效的设计原则21
1．2．3　UI动效制作的要点22
1．2．4　过渡效果．．23
1．2．5　自定义动画．．24
第　2章 After Effects动效制作基础
2．1　认识After Effects界面26
2．1．1　认识基本的面板．26
2．1．2　工具栏中常用的工具．．29
2．1．3　导入素材的方法32
2．1．4　导入PSD/AI/Sketch文件的方法32
2．1．5　出现红条提示的处理方法．35
2．2　认识合成．36
2．2．1　新建合成．．36
2．2．2　合成的设置和操作37
2．2．3　合成的嵌套功能37
2．3　学习基本操作技巧．37
2．3．1　蒙版38
2．3．2　轨道遮罩．．40
2．3．3　父级关联．．41
2．3．4　其他图层操作．44
2．4　图层类型和效果预设．45
2．4．1　视频和音频图层45
2．4．2　文本图层．．45
2．4．3　纯色图层．．46
2．4．4　灯光图层．．46
2．4．5　摄像机图层．46
2．4．6　空对象图层．47
2．4．7　形状图层．．47
2．4．8　调整图层．．47
2．4．9　3D图层．47
2．4．10　效果和预设的添加与使用．．48
2．5　渲染与导出．49
2．5．1　设置需要渲染的工作区域．49
2．5．2　渲染队列的常用设置．．50
2．5．3　使用Adobe Media Encoder导出．53
实例：制作一个3D切换效果的幻灯片．53
第3章　从基本组件开始学习制作
3．1　按钮（Button）与开关（Switch）．　60
3．1．1　学习各类按钮动效60
实例：制作单击按钮时的涟漪效果60
实例：制作实现功能变换的按钮62
3．1．2　有趣的开关．．65
实例：制作常规的开关操作动效65
实例：制作萌趣生动的开关．67
3．2　菜单（Menu）．70
实例：制作弹出式菜单．．70
实例：制作分层菜单74
3．3　列表（List）．78
实例：制作列表的出现效果．78
实例：制作列表页的毛玻璃效果80
3．4　卡片（Card）和轮播图（Carousel）．83
3．4．1　卡片83
实例：制作查看相册图片效果．83
实例：制作图文卡片的展开动效86
3．4．2　轮播图．．90
实例：制作拥有视差效果的轮播图90
3．5　加载（Loading）和进度条（Progress）．．94
3．5．1　基础的加载动效．94
实例：实现Material　Design风格加载动效94
3．5．2　基础的进度条动效97
实例：制作快速实现进度圈动效97
第4章　将动效运用在UI设计中
4．1　制作灵动的UI特效102
实例：制作LOGO的切片动效．102
实例：制作科技感旋转球体．105
实例：制作水波纹加载球动效．107
实例：制作“高大上”的金属效果动效．111
实例：制作生动有趣的图标．115
4．2　打造个性化的UI组件120
实例：制作卡片式轮播图动效．120
实例：制作酷炫的电流加载动效123
实例：制作液态效果的下拉刷新动效．126
实例：制作有重力感的绳子动效．．132
4．3　生动的插画动效140
实例：制作在睡觉的猫．．140
实例：制作“萌萌哒”小球的果冻动画．144
实例：制作夜空中飞入云层的飞机．．150
第5章　常用的动效制作脚本
5．1　导出Lottie动画的扩展脚本——Bodymovin．154
5．1．1　Lottie概述　154
5．1．2　Bodymovin的安装与相关设置．．　155
5．1．3　Bodymovin的使用方法　156
5．2　形状融合脚本——Shape Fusion．．　158
5．2．1　Shape Fusion的安装　158
5．2．2　Shape Fusion的使用方法．．　159
5．3　图形动画脚本——Motion 2．　160
5．3．1　快速调整中心点或速率曲线　160
5．3．2　快速实现动效的操作工具　161
5．3．3　其他脚本菜单．．．　163
5．4　模拟触控点脚本——Touch Point Pro．．163
5．4．1　Touch Point Pro的安装．．　164
5．4．2　Touch Point Pro的使用方法．　164
第6章　电动车助手App动效实现
6．1　设计介绍166
6．2　制作车辆状态的展示动效169
6．2．1　车辆状态的卡片样式．　170
6．2．2　车辆状态的仪表盘．．　171
6．2．3　电池使用状态的卡片样式　173
6．2．4　天气状态的卡片样式．　174
6．2．5　承载所有卡片的合成．　175
6．2．6　完整效果．　176
6．3　制作车辆控制后的车辆状态详情的展示动效．183
6．3．1　车辆控制状态　184
6．3．2　车辆状态详情　187
6．3．3　展示动效．　189
6．4　制作界面合并与界面演示介绍的动效．193
6．4．1　界面合并．　194
6．4．2　界面演示介绍　198