第4章二维动画制作技术PPT课件

1、第第4章章 二维动画制作技术二维动画制作技术二维动画制作技术二维动画制作技术 动画基础知识第一部分 运动规律与常规动作 基于Adobe Animate的二维动画制作技术第二部分第三部分4.1 动画基础知识 4.1.1 动画的概念 4.1.2 动画的分类 4.1.3 传统动画与An动画 原原画与动画画与动画 动作动作设计设计 时间时间与速度与速度 循环循环动作动作主要内容4.1.1 动画的概念什么是动画：l 通过连续播放一系列静止的画面，当连续播放达到一定的速度时，人们看到的就是动画。l 基本原理：人眼的视觉暂留现象。l 电影采用：每秒24幅画面的速度拍摄播放l 电视采用：每秒21幅（PAL制）

2、 每秒30幅（NSTC制）4.1.2 动画的分类l 几种几种分类方式分类方式l 从制作技术和手段分： 传统动画（手绘为主）；电脑动画（计算机为主）传统动画（手绘为主）；电脑动画（计算机为主） 平面动画（传统手绘动画（铅笔，水墨、蜡笔、油彩等）折纸平面动画（传统手绘动画（铅笔，水墨、蜡笔、油彩等）折纸剪纸动画等）、立体动画（偶动画）剪纸动画等）、立体动画（偶动画） 电脑动画（二维、三维）电脑动画（二维、三维）4.1.2 动画的分类l 几种几种分类方式分类方式l 从空间的视觉效果分： 二维；二维；三维三维4.1.2 动画的分类l 几种几种分类方式分类方式l 从每秒播放的画面幅数分： 全动画（每秒全

3、动画（每秒2424幅）；半动画（少于幅）；半动画（少于2424幅）幅）l 从动作的表现形式分： 完善动画（动画电视）；局限动画（幻灯片动画）完善动画（动画电视）；局限动画（幻灯片动画）4.1.3 传统动画与An动画l 传统动画以绘画形式作为表现手段，通过拷贝台和定位尺来绘制动画，通过给原画中加中间画的画法，绘制出一张张静态的，但又是逐渐变化着的动态画面。通过摄影机或电脑逐格拍摄或扫描，然后以24帧/秒或25帧/秒的速度连续放映。4.1.3 传统动画与An动画l An动画利用帧（静态画面）将一定的时间进行划分，每一合成帧（将各层元素合并看待）代表传统动画中的一个画面。将许多合成帧按一定顺序排列在

4、一起，就组成了一个An动画片。合成帧合成帧4.1.3 传统动画与An动画 设备要求低，制作周期短 易学易用，门槛低 短小精悍，适合网络传播 元件的使用，避免了大量的重复劳动，同时减小了文件的大小 图层的使用，在很多方面简化了动画的制作难度，省时省力l An动画与传统动画的比较4.1.3 传统动画与An动画l 动画制作流程12 原画与动画原画l也称动画设计，是动画片里每个角色动作的主要创作者，也称动画设计，是动画片里每个角色动作的主要创作者，是动作设计和绘制的第一道工序。是动作设计和绘制的第一道工序。l是运动物体关键动态的画面是运动物体关键动态的画面, ,一套动作中的关键帧。一套动作中的关键帧。

5、l是指动画创作中一个场景动作之起始与终点的画面，决定是指动画创作中一个场景动作之起始与终点的画面，决定了动作的走向、节奏、幅度了动作的走向、节奏、幅度、镜头运动方式、特效处理等镜头运动方式、特效处理等一系列制作动画关键的东西。一系列制作动画关键的东西。 原画原画和和动画动画是是传统动画制作流程中最为关键的步骤。传统动画制作流程中最为关键的步骤。13 原画与动画动画l也称中间画，是原画的助手和合作者，是第也称中间画，是原画的助手和合作者，是第二二道工序。道工序。l是运动物体关键动态之间渐变过程的画面。是运动物体关键动态之间渐变过程的画面。l利用电脑对两幅关键帧进行插值计算，自动生成中间画面，利用

6、电脑对两幅关键帧进行插值计算，自动生成中间画面，这是电脑辅助动画的主要优点之一，不仅精确流畅，而且将这是电脑辅助动画的主要优点之一，不仅精确流畅，而且将动画制作人员从繁琐的劳动中解放出来。动画制作人员从繁琐的劳动中解放出来。14 动作设计l动作设计是原画的主要任务。动作设计是原画的主要任务。l原画要根据动画分镜头脚本和导演意图，以及动画的原理原画要根据动画分镜头脚本和导演意图，以及动画的原理、动画的规律来完成动画镜头中各类角色的动作设计。、动画的规律来完成动画镜头中各类角色的动作设计。例如 先有创作构思和动作分析的过程，再着手动作的绘制先有创作构思和动作分析的过程，再着手动作的绘制 动作分解，

7、找出动作起止的关键帧画面动作分解，找出动作起止的关键帧画面 为了方便制作补间，通常将角色按照动作拆开来画，所以为了方便制作补间，通常将角色按照动作拆开来画，所以身体的各部分都是单独的原件，如手臂，身体，头，嘴，身体的各部分都是单独的原件，如手臂，身体，头，嘴，头发等全部做成独立的元件。在根据设计单独移动和组合。头发等全部做成独立的元件。在根据设计单独移动和组合。 绘画功底影响原画质量绘画功底影响原画质量 动作设计和经验影响动画的流畅度动作设计和经验影响动画的流畅度15 动作的时间与速度时间l时间指动画片中物体在完成某一动作时所需的时间长度，时间指动画片中物体在完成某一动作时所需的时间长度，一般

8、以一般以“秒秒”为单位。为单位。l由于动画片的动作节奏快，镜头短，还以由于动画片的动作节奏快，镜头短，还以“格格”为单位。为单位。在在AnAn中，一格就是一帧。中，一格就是一帧。l动作不同，所需的时间也不同。这需要在工作中慢慢摸索动作不同，所需的时间也不同。这需要在工作中慢慢摸索，积累经验。如眨眼用，积累经验。如眨眼用6 6帧的时间，打鼓用帧的时间，打鼓用1919帧的时间等帧的时间等16 动作的时间与速度速度l速度指物体在运动过程中的快慢。速度指物体在运动过程中的快慢。l运动物体是受力的支配，受力大的物体速度快；受力小的物运动物体是受力的支配，受力大的物体速度快；受力小的物体速度慢。相同距离中

9、，运动物体所占用的时间短，速度体速度慢。相同距离中，运动物体所占用的时间短，速度就就快快; ;占用时间长，速度就慢。占用时间长，速度就慢。l实际状况下，加速度和减速度应用非常普遍实际状况下，加速度和减速度应用非常普遍17 动作的时间与速度速度l加速度：自由落体、突然起跳、动物逃窜等加速度：自由落体、突然起跳、动物逃窜等l减速减速度：水平滚动、向上抛物、左右摇摆等度：水平滚动、向上抛物、左右摇摆等l总之，设计动作时，要准确运用速度上的各种变化，使动作总之，设计动作时，要准确运用速度上的各种变化，使动作强弱分明，快慢有序，更有节奏感和感染力。强弱分明，快慢有序，更有节奏感和感染力。18 循环动作的

10、设计l生活中存在大量的循环动作。如大雁展翅飞翔，马在草地奔跑生活中存在大量的循环动作。如大雁展翅飞翔，马在草地奔跑，人在散步等，都是重复飞，跑，走的动作。动画中可采用循，人在散步等，都是重复飞，跑，走的动作。动画中可采用循环动作的技法，既节省工作量，又可加深印象。环动作的技法，既节省工作量，又可加深印象。l循环动作的最大特点：动作的开始和结束画面相同。循环动作的最大特点：动作的开始和结束画面相同。19 循环动作的设计l设计的基本方法：动作开始设计的基本方法：动作开始- -结尾结尾- -开始相接，从一个动作开始开始相接，从一个动作开始到结束，再从结束到开始过程连接，称为单循环。到结束，再从结束到

11、开始过程连接，称为单循环。l单单循环一般至少需要循环一般至少需要3 3张原画，用两组动画相连接才能组成。张原画，用两组动画相连接才能组成。如飞翔：如飞翔：1 1举翅向上，举翅向上，2 2展翅向下，展翅向下，3 3重复重复1 1举翅向上，中间补间举翅向上，中间补间动画即可。动画即可。l单单循环在一个动画镜头里，不宜重复次数过多，否则显得单调循环在一个动画镜头里，不宜重复次数过多，否则显得单调20 4.2.1 Adobe Animate软件界面介绍 4.2.2 An软件术语介绍 4.2.3 An的基本操作 4.2.4 基于An制作五种基本动画主要内容4.2 使用An软件进行二维动画制作21 4.2

12、.1 Adobe Animate软件界面介绍l版本（版本（播放环境播放环境）l开始页开始页l工作工作界面界面l时间轴窗口时间轴窗口l洋葱皮功能洋葱皮功能l多帧编辑功能多帧编辑功能l帧频帧频l标题栏标题栏l菜单栏菜单栏l时间轴窗口时间轴窗口l工具栏工具栏l工作区与场景工作区与场景l舞台舞台l属性面板属性面板l功能面板组功能面板组22 播放环境是是指最终发布的文件播放时所使用的技术。指最终发布的文件播放时所使用的技术。动画既可以支持动画既可以支持Flash playerFlash player的浏览器中播放，也可以在支持的浏览器中播放，也可以在支持HTML5HTML5和和JavaScriptJav

13、aScript的浏览器中播放。的浏览器中播放。HTML5 CanvasHTML5 Canvas可以创建在使用可以创建在使用HTML5HTML5和和JavaScriptJavaScript的的浏览器中播放动浏览器中播放动画画WebGLWebGL, ,为纯动画素材，以充分利用硬件图形加速功能为纯动画素材，以充分利用硬件图形加速功能ActionScript3.0ActionScript3.0可以创建在桌面浏览器的可以创建在桌面浏览器的Flash Flash playerplayer中播放的动中播放的动画和交互性。还支持将内容发布为画和交互性。还支持将内容发布为MacMac或或WindowsWindo

14、ws的放映文件。可以作的放映文件。可以作为独立应用程序在桌面播放，不需要浏览器。为独立应用程序在桌面播放，不需要浏览器。AIR for DesktopAIR for Desktop可以创建在可以创建在WindowsWindows或或MacMac桌面上以应用程序播放的桌面上以应用程序播放的动画和交互性，无需浏览器。动画和交互性，无需浏览器。AIR for AIR for AndroidAndroid或或AIR for AIR for iOSiOS可以为安卓或苹果移动设备发布一个可以为安卓或苹果移动设备发布一个APPAPP。23 播放环境注意：注意：并非所有的文档类型都支持所有的特性并非所有的文档

15、类型都支持所有的特性WebGLWebGL文档不支持文本文档不支持文本HTML5 CanvasHTML5 Canvas文档不支持文档不支持3D3D旋转和平移工具旋转和平移工具不不支持的工具将呈现灰色显示支持的工具将呈现灰色显示24 4.2.1 Adobe Animate软件界面介绍l时间轴窗口时间轴窗口时间轴窗口用于组织和控制文档内容在一定时间内播放的层数时间轴窗口用于组织和控制文档内容在一定时间内播放的层数和帧数。和帧数。分左右两部分：图层控制窗口和时间轴分左右两部分：图层控制窗口和时间轴下方时间轴信息栏：显示帧数，播放速率，时间等信息下方时间轴信息栏：显示帧数，播放速率，时间等信息几几个工具

16、按钮：个工具按钮： 滚动到播放头按钮：帧居中按钮滚动到播放头按钮：帧居中按钮 绘图纸外观按钮：洋葱皮按钮绘图纸外观按钮：洋葱皮按钮 绘图纸外观轮廓按钮：洋葱皮轮廓按钮绘图纸外观轮廓按钮：洋葱皮轮廓按钮 编辑多个帧按钮编辑多个帧按钮 洋葱皮范围按钮洋葱皮范围按钮25 4.2.1 Adobe Animate软件界面介绍l洋葱皮洋葱皮功能功能需要参考前后帧的内容，来辅助处理当前帧的内容需要参考前后帧的内容，来辅助处理当前帧的内容可以看到除当前帧以外的其它帧内容，对照编辑可以看到除当前帧以外的其它帧内容，对照编辑l多帧编辑多帧编辑功能功能有时候需要同时处理、修改连续的多个帧的内容，如同时移动、同有时候

17、需要同时处理、修改连续的多个帧的内容，如同时移动、同时缩放等时缩放等整体修改的一个方便手段整体修改的一个方便手段l帧频帧频每秒播放的帧数每秒播放的帧数直接影响到动画播放的快慢直接影响到动画播放的快慢,fps,fps计算机显示器计算机显示器2121帧帧/s/s，用于电视播放需设置为，用于电视播放需设置为25fps25fps26 4.2.2 An软件术语介绍l帧的分类帧的分类普通帧：包括普通帧和空帧普通帧：包括普通帧和空帧关键帧：包括关键帧（黑色实心）和空白关键帧（空心）关键帧：包括关键帧（黑色实心）和空白关键帧（空心）过渡帧：形状过渡帧和动画过渡帧过渡帧：形状过渡帧和动画过渡帧帧帧是帧是AnAn

18、中的最小时间中的最小时间单位，时间轴上的一个小影格单位，时间轴上的一个小影格27 4.2.2 An软件术语介绍l关键帧关键帧重要概念，存在于补间动画的两端重要概念，存在于补间动画的两端只有关键帧才能调整元件属性，添加脚本命令只有关键帧才能调整元件属性，添加脚本命令普通帧只是关键帧状态的延续普通帧只是关键帧状态的延续过渡帧是由关键帧计算得到过渡帧是由关键帧计算得到的的l帧帧的的编辑操作编辑操作选择帧、插入帧、清除帧、复制剪切粘贴帧选择帧、插入帧、清除帧、复制剪切粘贴帧l帧帧“属性属性”面面板板主要功能主要功能28 4.2.2 An软件术语介绍l几几个操作个操作：（1 1）创建图层）创建图层几种：

19、一般图层，引导层，被引导层，遮罩层，被遮罩层几种：一般图层，引导层，被引导层，遮罩层，被遮罩层，文件夹，文件夹（2 2）选择）选择、移动、移动、删除、重命名、删除、重命名（3 3）分散到图层）分散到图层可以将一帧或几帧里的所选对象分散到独立的图层中，以可以将一帧或几帧里的所选对象分散到独立的图层中，以便分别向对象应用补间动画便分别向对象应用补间动画包括：图形对象，实例，位图，视频剪辑和分离的文本等包括：图形对象，实例，位图，视频剪辑和分离的文本等图层图层是一张张透明的动画纸图层是一张张透明的动画纸29 4.2.2 An软件术语介绍l图层的状态：图层的状态：（1 1）隐藏）隐藏/ /显示显示（2

20、 2）锁定）锁定/ /解锁解锁（3 3）显示轮廓）显示轮廓/ /取消显示轮廓取消显示轮廓图层30 4.2.2 An软件术语介绍元件l元件只需要创建一次，就可以在整个文档或其它文档中元件只需要创建一次，就可以在整个文档或其它文档中重复使用重复使用l创建的任何元件都自动成为当前文档库中的一部分创建的任何元件都自动成为当前文档库中的一部分l使用元件能减小文件的尺寸，原因：无论该元件被重复使用元件能减小文件的尺寸，原因：无论该元件被重复使用多少次，它所占用的空间始终是一个元件的大小。使用多少次，它所占用的空间始终是一个元件的大小。l制作动画时，尽量将各种元素转换成元件，不仅可以减制作动画时，尽量将各种

21、元素转换成元件，不仅可以减小文件尺寸，也可以减少修改和更新的工作量。小文件尺寸，也可以减少修改和更新的工作量。元件元件是可重复是可重复使用的图片、动画或按钮使用的图片、动画或按钮31 4.2.2 An软件术语介绍元件l三种类型的元件三种类型的元件 影片剪辑（影片剪辑（MCMC）u一段完整动画，可以包含一切素材，也可自动播放一段完整动画，可以包含一切素材，也可自动播放 按钮按钮u主要用于交互，也可用来制作特殊效果主要用于交互，也可用来制作特殊效果u按钮有四种状态：弹起，经过，按下，点击按钮有四种状态：弹起，经过，按下，点击 图形图形u类似影片剪辑，可以作为一段动画类似影片剪辑，可以作为一段动画u

22、也也有时间轴，也可以加入其它元件和素材有时间轴，也可以加入其它元件和素材u但不具有交互性，不能添加滤镜和声音但不具有交互性，不能添加滤镜和声音32 4.2.2 An软件术语介绍元件l创建元件的创建元件的3 3种方法种方法 创建一个空元件，然后在元件编辑窗口中制作或导创建一个空元件，然后在元件编辑窗口中制作或导入内容入内容 通过舞台上选定的对象来创建一个元件通过舞台上选定的对象来创建一个元件 将已有的动画转换为元件将已有的动画转换为元件33 4.2.2 An软件术语介绍实例l当将元件从当将元件从“库库”中拖入舞台时，舞台上就增加了一个该元中拖入舞台时，舞台上就增加了一个该元件的实例件的实例l创建

23、元件之后，可以在文档中任何需要的地方（包括在其它创建元件之后，可以在文档中任何需要的地方（包括在其它元件内）创建该元件的实例。元件内）创建该元件的实例。l可以随意对实例进行缩放，改变大小和透明度等操作，不会可以随意对实例进行缩放，改变大小和透明度等操作，不会影响元件本身。影响元件本身。l但如果对元件进行了修改，但如果对元件进行了修改，AnAn会更新所有该元件的实例会更新所有该元件的实例l改变实例的操作：属性面板（改变类型，颜色，交换实例）改变实例的操作：属性面板（改变类型，颜色，交换实例）34 4.2.2 An软件术语介绍库l库是用来存储和管理导入的文件（视频剪辑、声音剪辑库是用来存储和管理导

24、入的文件（视频剪辑、声音剪辑、位图等）、矢量插图和用户创建的元件、位图等）、矢量插图和用户创建的元件l零件仓库，后台零件仓库，后台l“库库”面板：基本操作面板：基本操作l管理库：使用文件夹、重命名、复制元件管理库：使用文件夹、重命名、复制元件l打开外部库打开外部库l灵活使用其它文件的库可以节约重新制作元件的时间，灵活使用其它文件的库可以节约重新制作元件的时间，减少工作量减少工作量35 4.2.3 An的基本操作l帧属性面板帧属性面板l图层的基本操作图层的基本操作l创建元件创建元件l元件与实例元件与实例l改变实例的类型改变实例的类型l管理库管理库l打开外部库打开外部库绘制与文本操作36 4.2.

25、4 基于An制作五种基本动画An的动画类型逐帧动画形状补间动画动作补间动画路径动画遮罩动画37 4.2.4 基于An制作五种基本动画一、逐帧动画l一帧一帧绘制出来，和传统动画类似一帧一帧绘制出来，和传统动画类似l举例：文字举例：文字logologo；导入序列图像，闪烁星星，流动方块等；导入序列图像，闪烁星星，流动方块等二、补间动画l补间的概念：补间的概念：l只需只需要绘制出开始和结束两个帧的内容（关键帧）要绘制出开始和结束两个帧的内容（关键帧），中间过渡部分由电脑自己计算出来（过渡帧），中间过渡部分由电脑自己计算出来（过渡帧）l两种补间：动作补间；形状补间两种补间：动作补间；形状补间38 4.

26、2.4 基于An制作五种基本动画动作补间动画l元件实例属性的变化过渡元件实例属性的变化过渡l参数参数包括：缩放、缓动、旋转，调整到路径，同步，对包括：缩放、缓动、旋转，调整到路径，同步，对齐等齐等l举例：举例： 运动的小球运动的小球 行驶的汽车行驶的汽车 动画贺卡动画贺卡39 4.2.4 基于An制作五种基本动画形状补间动画l从一个形状过渡到另一个形状从一个形状过渡到另一个形状l过渡帧中的内容是依靠两个关键帧上的形状计算得到的过渡帧中的内容是依靠两个关键帧上的形状计算得到的l简单变形：要求元素必须是非成组、非元件的矢量图形简单变形：要求元素必须是非成组、非元件的矢量图形l即对于一个元件的实例，需要先进行分离，转换成非成即对于一个元件的实例，需要先进行分离，转换成非成组状态组状态l控制控制变形：为了更好的控制变形，可以添加控制点变形：为了更好的控制变形，可以添加控制点l举例：举例： 小球变形、花朵变形、文字变形等小球变形、花朵变形、文字变形等40 4.2.