目 录
第 1章 MG动画的概述 ..................................................................................................1
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
