Adobe Animate MG动画+UI动效设计实践教程

第 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