作者：程磊,廖丹,董雪 编
页数：200
出版社：清华大学出版社
出版日期：2024
ISBN：9787302669937
电子书格式：pdf/epub/txt
内容简介
本书以Adobe Animate CC 2024版软件介绍为前提，以软件的实际应用为目的，所涉及的案例详解可对UI动效、表情包、网页加载动效、按钮动效等方向在实际制作中提供一定的帮助，内容集作者多年教学经验所成，力求全面、深入浅出、实用性强。
本书采用理论与实践相结合的教学方法，由理论引入，通过真实案例循序渐进完成对Adobe Animate软件的介绍。
本书适用于高校广告学、动画艺术、艺术设计等专业的专科生、本科生、研究生及广告设计从业人士阅读和使用。
作者简介
程磊，北京电影学院本硕毕业。中国高等院校影视会员、中国电影电视技术学会会员，就职于黑龙江大学艺术学院，主要从事多媒体艺术领域研究及教学工作。参与多部影视、动画作品制作，发表多篇学术论文，有丰富的教学及实践经验。
廖丹，副教授/高级实验师，硕士生导师，黑龙江大学数字化艺术科学重点实验室副主任；2021年中央美术学院青年骨干教师访问学者。国际商业美术设计师协会会员、中国人工智能学会（CAAI）会员等。主持国社科项目1项，在《人民日报》、《艺术评论》 等报刊发表成果多篇。在2025哈尔滨亚冬会会徽设计征集中入围前四名。
崔建成，青岛科技大学艺术学院副教授、硕士生导师，全国信息化计算机应用高级交互师；主要从事视觉传达、数字艺术等方面设计；主持并完成省部级及其他教学、科研项目10余项；出版专著及教材30余部。
本书特色
《Adobe Animate MG动画 UI动效设计实践教程》拥有多年教学经验的高校教授编写；通过多媒体技术将可视化与动态化的案例植入本书知识点，帮助学生进行有效学习。
目录
1.1 MG动画 …………………………………………………………………………………………………. 2
1.2 MG动画的应用 ……………………………………………………………………………………………… 3
1.2.1 企业宣传 ………………………………………………………………………………………………………………….. 3
1.2.2 动态海报 ………………………………………………………………………………………………………………….. 4
1.2.3 广告 …………………………………………………………………………………………………………………………. 4
1.2.4 科教宣传 ………………………………………………………………………………………………………………….. 6
1.2.5 影视节目装 …………………………………………………………………………………………………………… 6
1.2.6 动态 LOGO ………………………………………………………………………………………………………………. 7
1.2.7 音乐 MV …………………………………………………………………………………………………………………… 7
第 2章 UI动效的概述 ……………………………………………………………………………………….9
2.1 UI概念 …………………………………………………………………………………………………………… 9
2.2 UI动效时长 ……………………………………………………………………………………………………. 9
2.3常见的 UI动效应用 ………………………………………………………………………………………… 9
2.3.1 导航栏动效 …………………………………………………………………………………………………………….. 10
2.3.2 移动端页面切换动效 ………………………………………………………………………………………………. 10
2.3.3 按钮动效 ………………………………………………………………………………………………………………… 10
2.3.4加载界面动效 …………………………………………………………………………………………………………. 11
2.3.5 动态网页 ………………………………………………………………………………………………………………… 12
第 3章设计基本原理 ………………………………………………………………………………………14
3.1视频基础知识 ……………………………………………………………………………………………….. 14
3.1.1 屏幕宽高比 …………………………………………………………………………………………………………….. 14
3.1.2 视频显示分辨率 ……………………………………………………………………………………………………… 15
3.1.3 帧速率 ……………………………………………………………………………………………………………………. 15
3.1.4 视频封装及编码格式 ………………………………………………………………………………………………. 15
3.2图形设计原理 ……………………………………………………………………………………………….. 16
3.2.1 对称 ……………………………………………………………………………………………………………………….. 16
3.2.2 对比 ……………………………………………………………………………………………………………………….. 16
3.2.3 对齐 ……………………………………………………………………………………………………………………….. 16
3.2.4 相似 ……………………………………………………………………………………………………………………….. 16
3.2.5 重复 ……………………………………………………………………………………………………………………….. 17
3.2.6 空间 ……………………………………………………………………………………………………………………….. 17
·VI· Adobe Animate MG动画+UI动效设计实践教程
3.3视觉暂留原理 ……………………………………………………………………………………………….. 17
3.4动画设计原理 ……………………………………………………………………………………………….. 17
3.4.1 挤压和拉伸 …………………………………………………………………………………………………………….. 18
3.4.2 预备动作 ………………………………………………………………………………………………………………… 18
3.4.3 渐入渐出（缓入缓出） …………………………………………………………………………………………… 18
3.4.4 惯性与重叠 …………………………………………………………………………………………………………….. 19
3.5叙事技巧 ………………………………………………………………………………………………………. 19
3.5.1 景别 ……………………………………………………………………………………………………………………….. 19
3.5.2 构图的表现对象 ……………………………………………………………………………………………………… 22
3.5.3 影视构图的常见基本形式 ……………………………………………………………………………………….. 22
3.5.4 构图的基本原则 ……………………………………………………………………………………………………… 25
3.5.5 镜头的角度 …………………………………………………………………………………………………………….. 26
3.5.6 镜头的运动方式 ……………………………………………………………………………………………………… 27
3.5.7 轴线 ……………………………………………………………………………………………………………………….. 28
3.5.8 常用剪辑及转场方式 ………………………………………………………………………………………………. 29
3.6动态界面设计 ……………………………………………………………………………………………….. 32
3.6.1 界面动效设计需考虑的问题 ……………………………………………………………………………………. 32
3.6.2 界面动效常见转场形式 …………………………………………………………………………………………… 32
第 4章素材导入与应用……………………………………………………………………………………34
4.1声音的理解 …………………………………………………………………………………………………… 34
4.1.1 声音的分类 …………………………………………………………………………………………………………….. 34
4.1.2 声画关系 ………………………………………………………………………………………………………………… 35
4.2声音在 AN中的应用 …………………………………………………………………………………….. 35
4.2.1 AN支持的声音格式………………………………………………………………………………………………… 35
4.2.2 声音在 AN中导入 ………………………………………………………………………………………………….. 36
4.2.3 声音在 AN中编辑 ………………………………………………………………………………………………….. 36
4.2.4 禁用及删除导入声音 ………………………………………………………………………………………………. 37
4.2.5 其他注意事项 …………………………………………………………………………………………………………. 38
4.3静态素材的导入 ……………………………………………………………………………………………. 38
4.3.1 静态素材格式 …………………………………………………………………………………………………………. 38
4.3.2 位图在 AN中的导入及应用 …………………………………………………………………………………….. 38
4.3.3 其他软件源文件导入及应用 ……………………………………………………………………………………. 40
4.3.4 实例—MG动画：媒婆动画 …………………………………………………………………………………. 42
4.4动态素材的导入 ……………………………………………………………………………………………. 43
4.4.1 可导入的视频格式 ………………………………………………………………………………………………….. 43
4.4.2 导入视频 ………………………………………………………………………………………………………………… 43
目录 ·VII·
第 5章初识 Animate ……………………………………………………………………………………….47
5.1软件介绍 ………………………………………………………………………………………………………. 47
5.2源文件介绍 …………………………………………………………………………………………………… 48
5.2.1 创建源文件 …………………………………………………………………………………………………………….. 48
5.2.2 存源文件 …………………………………………………………………………………………………………….. 49
5.2.3 关闭源文件及出软件 …………………………………………………………………………………………… 50
5.2.4 打开源文件 …………………………………………………………………………………………………………….. 50
5.2.5 修改源文件属性 ……………………………………………………………………………………………………… 51
5.2.6 源文件类型介绍 ……………………………………………………………………………………………………… 52
5.3软件界面介绍 ……………………………………………………………………………………………….. 52
5.3.1 软件界面颜色设置 ………………………………………………………………………………………………….. 52
5.3.2 工作区布局 …………………………………………………………………………………………………………….. 53
5.3.3 面板的调整 …………………………………………………………………………………………………………….. 53
5.3.4 “传统”模式下界面布局介绍 …………………………………………………………………………………. 54
第 6章绘图工具 …………………………………………………………………………………………….58
6.1绘制线条工具介绍 ………………………………………………………………………………………… 58
6.1.1线条工具 ………………………………………………………………………………………………………………… 58
6.1.2 实例—绘制马路线 ………………………………………………………………………………………………. 60
6.1.3 铅笔工具和画笔工具 ………………………………………………………………………………………………. 63
6.1.4 钢笔工具组 …………………………………………………………………………………………………………….. 63
6.1.5 实例—UI桃心图标 ………………………………………………………………………………………. 64
6.1.6 宽度工具 ………………………………………………………………………………………………………………… 65
6.1.7 其他可绘制的线条工具 …………………………………………………………………………………………… 66
6.2绘制图形工具介绍 ………………………………………………………………………………………… 66
6.2.1 传统画笔工具 …………………………………………………………………………………………………………. 67
6.2.2 流畅画笔工具 …………………………………………………………………………………………………………. 68
6.2.3 矩形工具 ………………………………………………………………………………………………………………… 68
6.2.4 基本矩形工具 …………………………………………………………………………………………………………. 69
6.2.5 椭圆工具 ………………………………………………………………………………………………………………… 70
6.2.6 基本椭圆工具 …………………………………………………………………………………………………………. 70
6.2.7 多角星形工具 …………………………………………………………………………………………………………. 70
6.2.8 实例—UI图标 ……………………………………………………………………………………………… 71
6.2.9 滴管工具 ………………………………………………………………………………………………………………… 75
6.2.10 墨水瓶工具 …………………………………………………………………………………………………………… 75
6.2.11 颜料桶工具 …………………………………………………………………………………………………………… 75
6.2.12 渐变变形工具 ……………………………………………………………………………………………………….. 75
6.3创建画笔功能介绍 ………………………………………………………………………………………… 77
·VIII· Adobe Animate MG动画+UI动效设计实践教程
6.3.1 创建画笔方法 …………………………………………………………………………………………………………. 77
6.3.2 创建画笔类型 …………………………………………………………………………………………………………. 77
6.3.3 实例—MG动画：自定义线条样式 ………………………………………………………………………. 78
第 7章图形的选取及修改 ………………………………………………………………………………..80
7.1选取工具 ………………………………………………………………………………………………………. 80
7.1.1 套索工具 ………………………………………………………………………………………………………………… 80
7.1.2 多边形工具 …………………………………………………………………………………………………………….. 80
7.1.3 魔术棒工具 …………………………………………………………………………………………………………….. 81
7.2修改工具 ………………………………………………………………………………………………………. 81
7.2.1 橡皮工具 ………………………………………………………………………………………………………………… 81
7.2.2 任意变形工具 …………………………………………………………………………………………………………. 82
7.2.3 分选取工具 …………………………………………………………………………………………………………. 82
7.3可选取可修改工具 ………………………………………………………………………………………… 82
7.3.1 修改图形边缘方法 ………………………………………………………………………………………………….. 83
7.3.2 修改图形边角方法 ………………………………………………………………………………………………….. 83
7.3.3 添加新锚点修改图形 ………………………………………………………………………………………………. 83
7.3.4 直接复制图形 …………………………………………………………………………………………………………. 83
7.4多图形处理方式 ……………………………………………………………………………………………. 83
7.4.1 基本处理功能 …………………………………………………………………………………………………………. 83
7.4.2 图形属性及转换方法介绍 ……………………………………………………………………………………….. 84
7.4.3 图形排列 ………………………………………………………………………………………………………………… 86
7.4.4 “对齐”面板 …………………………………………………………………………………………………………. 87
7.4.5 实例—MG动画：越野车绘制 ……………………………………………………………………………… 87
第 8章时间轴与基础动画 ………………………………………………………………………….93
8.1帧的介绍 ………………………………………………………………………………………………………. 93
8.1.1 自动关键帧 …………………………………………………………………………………………………………….. 93
8.1.2 帧的显示 ………………………………………………………………………………………………………………… 93
8.1.3 帧的不同类型 …………………………………………………………………………………………………………. 94
8.1.4 帧的常用命令 …………………………………………………………………………………………………………. 94
8.1.5 实例—UI动效：逐帧动画 …………………………………………………………………………………… 96
8.2图层的介绍 …………………………………………………………………………………………………… 98
8.2.1 图层的基本作 ……………………………………………………………………………………………………… 98
8.2.2 图层的控制 …………………………………………………………………………………………………………….. 99
8.3绘图纸外观功能 ………………………………………………………………………………………….. 101
8.3.1 功能介绍 ………………………………………………………………………………………………………………. 101
8.3.2 实例—MG动画：写字 ………………………………………………………………………………………. 102
8.4补间形状动画 ……………………………………………………………………………………………… 105
目录 ·IX·
8.4.1 基本内容介绍 ……………………………………………………………………………………………………….. 105
8.4.2 实例—UI动效：补间形状动画 …………………………………………………………………… 105
8.4.3 实例—MG动画：变形动画……………………………………………………………………………….. 107
8.5传统补间动画 ……………………………………………………………………………………………… 108
8.5.1 功能介绍 ………………………………………………………………………………………………………………. 108
8.5.2 实例—MG动画：写字动画……………………………………………………………………………….. 109
8.6补间动画 …………………………………………………………………………………………………….. 110
第 9章文本与动画 ……………………………………………………………………………………….. 111
9.1文本基本内容介绍 ………………………………………………………………………………………. 111
9.1.1 文本的分类 …………………………………………………………………………………………………………… 111
9.1.2 文本的创建 …………………………………………………………………………………………………………… 111
9.2基本文本属性 ……………………………………………………………………………………………… 112
9.2.1 字符 ……………………………………………………………………………………………………………………… 112
9.2.2 段落 ……………………………………………………………………………………………………………………… 112
9.2.3 选项 ……………………………………………………………………………………………………………………… 112
9.2.4 滤镜 ……………………………………………………………………………………………………………………… 113
9.3拆分字符 …………………………………………………………………………………………………….. 114
9.4实例—文本动画： Logo动效 ……………………………………………………………………. 115
第 10章元件与动画 ……………………………………………………………………………………… 122
10.1 元件创建与存储 ………………………………………………………………………………………… 122
10.1.1 创建元件 …………………………………………………………………………………………………………….. 122
10.1.2元件存储 …………………………………………………………………………………………………………….. 122
10.2元件类型 …………………………………………………………………………………………………… 123
10.2.1 元件类型介绍 ……………………………………………………………………………………………………… 123
10.2.2 实例—UI动效：齿轮图标自转动画 …………………………………………………………………. 124
10.2.3 实例—UI动效：数字加载动画 ………………………………………………………………………… 126
10.2.4 实例—MG动画：滤镜效果松树绘制 ……………………………………………………………….. 129
10.2.5 实例—基础按钮 ………………………………………………………………………………………………. 130
10.2.6 实例—动态按钮 ………………………………………………………………………………………………. 131
第 11章升级动画 ………………………………………………………………………………………… 134
11.1 父子关系动画 ……………………………………………………………………………………………. 134
11.1.1 建立父子关系 ……………………………………………………………………………………………………… 134
11.1.2 解除及更改父子关系 …………………………………………………………………………………………… 134
11.2 遮罩动画 …………………………………………………………………………………………………… 135
11.2.1 遮罩层的建立与解除 …………………………………………………………………………………………… 135
11.2.2 遮罩层注意事项 ………………………………………………………………………………………………….. 135
·X· Adobe Animate MG动画+UI动效设计实践教程
11.2.3 实例—UI动效：进度条加载动画 …………………………………………………………………….. 135
11.3 引导线动画 ……………………………………………………………………………………………….. 138
11.3.1 建立引导关系 ……………………………………………………………………………………………………… 138
11.3.2 引导关系注意事项 ………………………………………………………………………………………………. 138
11.3.3 其他功能 …………………………………………………………………………………………………………….. 138
11.3.4 实例—MG动画：星空动画 ……………………………………………………………………………… 139
11.4 图层混合动画 ……………………………………………………………………………………………. 143
11.4.1 混合模式建立 ……………………………………………………………………………………………………… 143
11.4.2 混合模式理解 ……………………………………………………………………………………………………… 144
11.4.3 实例—UI动效：Logo变色动画 ……………………………………………………………………….. 144
11.5 摄像头动画 ……………………………………………………………………………………………….. 145
11.5.1 启用及关闭摄像头 ………………………………………………………………………………………………. 145
11.5.2 摄像头的运动方式 ………………………………………………………………………………………………. 146
11.5.3摄像头图层色调设置 …………………………………………………………………………………………… 147
11.5.4图层深度功能 ……………………………………………………………………………………………………… 147
11.5.5附加或分离摄像头图层控制功能 ………………………………………………………………………….. 148
11.5.6 实例 —MG动画：越野车动画 ………………………………………………………………………….. 149
11.6 3D动画 …………………………………………………………………………………………………….. 158
11.6.1 调整 3D工具 ………………………………………………………………………………………………………. 158
11.6.2 实例—UI动效：3D翻转动画 ………………………………………………………………………….. 159
11.7 骨骼动画 …………………………………………………………………………………………………… 162
11.7.1 对元件添加骨骼 ………………………………………………………………………………………………….. 162
11.7.2 控制骨骼方式 ……………………………………………………………………………………………………… 162
11.7.3 实例—MG动画：台灯动画 ……………………………………………………………………………… 162
11.7.4 对形状添加骨骼 ………………………………………………………………………………………………….. 165
11.7.5 绑定工具 …………………………………………………………………………………………………………….. 166
11.7.6 骨骼约束 …………………………………………………………………………………………………………….. 166
11.7.7 骨骼弹簧 …………………………………………………………………………………………………………….. 167
11.8资源变形动画 ……………………………………………………………………………………………. 167
11.8.1资源变形工具 ……………………………………………………………………………………………………… 167
11.8.2“资源变形工具”与“骨骼工具”的差异 ……………………………………………………………. 168
11.8.3 “资源变形工具”的其他功能 ……………………………………………………………………………… 168
11.8.4 实例—MG动画：飘扬的旗帜 ………………………………………………………………………….. 168
11.9 缓动动画 …………………………………………………………………………………………………… 171
11.9.1 形状及传统补间动画缓动效果 ……………………………………………………………………………… 171
11.9.2 补间动画的缓动效果 …………………………………………………………………………………………… 172
11.10预设动画 …………………………………………………………………………………………………. 173
目录 ·XI·
11.11交互动画 …………………………………………………………………………………………………. 174
第 12章 Animate发布格式 ……………………………………………………………………………. 177
12.1 导出 PNG序列帧 ………………………………………………………………………………………. 177
12.1.1 元件导出 PNG序列 …………………………………………………………………………………………….. 177
12.1.2 场景内容导出 PNG序列 ……………………………………………………………………………………… 178
12.2 导出 GIF格式文件 ……………………………………………………………………………………. 179
12.3 导出 SVG格式文件 …………………………………………………………………………………… 180
12.4 导出视频 …………………………………………………………………………………………………… 181
12.5 导出其他格式 ……………………………………………………………………………………………. 181
12.5.1 导出 SWF文件 ……………………………………………………………………………………………………. 182
12.5.2 导出放映文件 ……………………………………………………………………………………………………… 182
12.5.3 导出其他静态图片格式 ……………………………………………………………………………………….. 183
12.6 与 Adobe其他视频软件协作 ……………………………………………………………………… 183
12.6.1 AN与 Premiere Pro协作 ………………………………………………………………………………………. 183
12.6.2 AN与 After Effects协作 ………………………………………………………………………………………. 183
参考文献 ……………………………………………………………………………………………………….. 185
