目　　录

模块1 UI动效设计基础
【学习目标】 1
1.1　了解UI动效 1
1.1.1　什么是UI动效 1
1.1.2　UI动效的发展 2
1.1.3　动效在UI中的作用 3
1.2　UI交互设计 4
1.2.1　用户青睐的交互设计模式 5
1.2.2　提升产品转化率 5
1.3　UI动效设计的要点与作用 7
1.3.1　增强用户体验 7
1.3.2　提升产品气质 7
1.3.3　还原设计亮点 8
1.4　如何设计动效 8
1.4.1　首先需要有一个想法 8
1.4.2　实现想法 9
1.5　动效的类型有哪些 10
1.5.1　转场过渡 10
1.5.2　层级展示 11
1.5.3　空间扩展 11
1.5.4　聚焦重点 11
1.5.5　内容呈现 12
1.5.6　操作反馈 12
1.6　基础变化类型 13
1.6.1　移动、旋转和缩放 13
1.6.2　属性变化 13
1.6.3　变化节奏 14
1.6.4　基础变化的组合应用 14
1.7　UI动效设计软件 15
1.8　模块小结 17
1.9　素养拓展 17
1.10　课后测试 17
1.10.1　选择题 17
1.10.2　创新题 18

模块2 After Effects基础操作
【学习目标】 19
2.1　After Effects概述 19
2.2　After Effects工作界面 20
2.2.1　认识After Effects工作界面 20
2.2.2　菜单栏 21
2.2.3　工具栏 22
2.2.4　“项目”面板 23
2.2.5　“合成”窗口 24
2.2.6　“时间轴”面板 24
2.2.7　其他面板 25
2.3　After Effects的基本操作 26
2.3.1　创建项目文件 26
2.3.2　在项目文件中创建合成文件 27
2.3.3　保存和关闭项目文件 27
2.3.4　After Effects中的基本工作流程 28
2.4　素材的导入与管理操作 28
2.4.1　导入素材的基本方法 29
2.4.2　导入PSD格式素材 30
任务1：通过导入PSD格式文件创建合成 30
2.4.3　导入AI格式素材 31
任务2：通过导入AI格式文件创建合成 30
2.4.4　素材的管理操作 32
2.4.5　嵌套合成文件 34
2.5　认识“时间轴”面板 35
2.5.1　“音频/视频”选项 35
2.5.2　“图层基础”选项 36
2.5.3　“图层开关”选项 36
2.5.4　“转换控制”选项 36
2.5.5　“父级和链接”选项 37
2.5.6　“时间控制”选项 37
2.6　After Effects中的图层 38
2.6.1　认识不同类型的图层 38
2.6.2　图层的混合模式 41
2.7　模块小结 43
2.8　素养拓展 43
2.9　课后测试 44
2.9.1　选择题 44
2.9.2　创新题 44

模块3　基础关键帧动效制作
【学习目标】 45
3.1　了解关键帧与关键帧动画 46
3.2　关键帧的编辑操作 46
3.2.1　关键帧的创建方法 46
3.2.2　选择关键帧 47
3.2.3　移动关键帧 48
3.2.4　复制关键帧 48
3.2.5　删除关键帧 48
任务1：制作背景图片滑动切换动效 48
3.3　基础“变换”属性 53
3.3.1　“锚点”属性 53
3.3.2　“位置”属性 53
3.3.3　“缩放”属性 54
3.3.4　“旋转”属性 54
3.3.5　“不透明度”属性 55
任务2：制作火箭飞行加载动效 53
3.4　运动路径 61
3.4.1　将直线运动路径调整为曲线运动路径 61
3.4.2　运动自定向 62
任务3：制作飞机飞行动效 60
3.5　图表编辑器 66
3.5.1　认识图表编辑器 66
3.5.2　设置对象的缓动效果 67
任务4：制作圆球弹跳变形动效 65
3.6　模块小结 73
3.7　素养拓展 74
3.8　课后测试 74
3.8.1　选择题 74
3.8.2　创新题 74

模块4　蒙版动效制作与输出
【学习目标】 75
4.1　形状的应用 76
4.1.1　形状路径 76
4.1.2　创建路径群组 77
4.1.3　设置形状路径属性 77
任务1：制作圆环Loading动效 77
4.2　创建蒙版动效 84
4.2.1　蒙版动效原理 84
4.2.2　形状工具 84
4.2.3　钢笔工具 85
4.2.4　创建蒙版 85
4.2.5　设置蒙版属性 86
4.2.6　蒙版的叠加处理 87
任务2：制作二维码扫描动效 84
4.2.7　轨道遮罩 92
任务3：制遮罩标题文字动效 89
4.3　在After Effects中渲染输出动效 97
4.3.1　认识渲染工作区 97
4.3.2　理解渲染输出选项 98
4.3.3　渲染输出 99
任务4：将动效输出为视频和图片 96
4.4　模块小结 103
4.5　素养拓展 104
4.6　课后测试 104
4.6.1　选择题 104
4.6.2　创新题 105

模块5　UI元素动效
【学习目标】 105
5.1　图标动效 106
5.1.1　图标在UI中的作用 106
5.1.2　图标动效的常见表现方法 108
5.1.3　制作简约线框图标变换动效 110
任务1：制作简约线框图标变换动效 110
5.1.4　制作美食图标动效 115
任务2：制作美食图标动效 115
5.2　加载进度条与开关按钮动效 123
5.2.1　常见的加载进度条表现形式 123
5.2.2　制作矩形进度条动效 124
任务3：制作矩形进度条动效 124
5.2.3　开关按钮的功能特点 128
5.2.4　制作开关按钮动效 128
任务4：制作开关按钮动效 128
5.3　文字动效 132
5.3.1　文字动效的优势 132
5.3.2　文字动效的常见表现形式 133
5.3.3　制作手写文字动效 135
任务5：制作手写文字动效 135
5.4　Logo动效 139
5.4.1　Logo动效概述 139
5.4.2　Logo动效的优势 140
5.4.3　设计Logo动效时需要注意的问题 142
5.4.4　制作动感切片Logo动效 142
任务6：制作动感切片Logo动效 142
5.5　工具栏动效 147
5.5.1　工具栏动效设计 147
5.5.2　制作液态标签栏图标动效 148
任务7：制作液态标签栏图标动效 148
5.6　模块小结 154
5.7　素养拓展 154
5.8　课后测试 154
5.8.1　选择题 154
5.8.2　创新题 155

模块6　界面转场与菜单动效
【学习目标】 156
6.1　界面切换转场动效的核心规则 156
6.1.1　转场动效自然流畅 156
6.1.2　动效层次分明 157
6.1.3　关联是过渡动效的重要功能 157
6.1.4　界面切换过渡要快速 157
6.1.5　动效要清晰 158
6.1.6　制作登录转场动效 159
任务1：制作登录转场动效 159
6.2　常见的界面切换转场动效 166
6.2.1　弹出 166
6.2.2　侧滑 167
6.2.3　渐变放大 167
6.2.4　其他 168
6.2.5　制作图片翻页切换动效 168
任务2：制作图片翻页切换动效 168
6.3　导航菜单切换动效 176
6.3.1　交互式动态导航菜单的优势 176
6.3.2　导航菜单动效的设计要点 176
6.3.3　制作侧滑导航菜单动效 177
任务3：制作侧滑导航菜单动效 177
6.4　模块小结 181
6.5　素养拓展 181
6.6　课后测试 182
6.6.1　选择题 182
6.6.2　创新题 182

模块7　综合案例
【学习目标】 182
7.1　制作天气界面动效 183
7.1.1　动效分析 183
7.1.2　制作步骤 183
7.2　制作界面加载动效 188
7.2.1　动效分析 188
7.2.2　制作步骤 188
7.3　制作App界面滑动动效 194
7.3.1　动效分析 194
7.3.2　制作步骤 194
7.4　制作App欢迎界面动效 201
7.4.1　动效分析 201
7.4.2　制作步骤 201
7.5　模块小结 210
7.6　素养拓展 210
7.7　课后测试 211
7.7.1　选择题 211
7.7.2　创新题 211