2.5 基本动画制作

前面的学习是制作Animate CC 2017动画前的准备，本节将进入Animate CC 2017动画的具体制作阶段。Animate CC 2017基本动画分为逐帧动画、传统补间动画、补间形状动画、补间动画和动画预设5种类型。

2.5.1 逐帧动画

逐帧动画是动画中最基本的类型，它与传统的动画制作方法类似，制作原理是在连续的关键帧中分解动画，即使每一帧中的内容不同，然后连续播放形成动画。

在制作逐帧动画的过程中，需要手动制作每一个关键帧中的内容，因此工作量极大，动画文件也较大，并且要求用户有比较强的逻辑思维和一定的绘图功底。逐帧动画适合表现一些细腻的动画，例如3D效果、面部表情、走路和转身等。

1．利用外部导入方式创建逐帧动画

外部导入方式是逐帧动画最为常用的方法。用户可以将在其他应用程序中创建的动画文件或者图形图像序列导入Animate CC 2017软件中。具体导入方法：执行菜单中的“文件|导入|导入到舞台”命令，在弹出的“导入”对话框中选择“素材及结果\2.5.1创建逐帧动画\1.gif”文件，如图2-118所示，单击“打开”按钮，然后在弹出的如图2-119所示的提示对话框中单击“是”按钮，即可将序列中的全部图片导入舞台。此时，每一张图片会自动生成一个关键帧，并存放在“库”面板中，如图2-120所示。

2．在Animate CC 2017中制作逐帧动画

除了前面使用外部导入的方式创建逐帧动画外，还可以在Animate CC 2017软件中制作每一个关键帧中的内容，从而创建逐帧动画。图2-121为利用逐帧绘制方法制作出的人物走路的画面分解图。

2.5.2 传统补间动画

传统补间动画是Animate CC 2017中较为常见的基本动画类型，使用它可以制作出对象的位移、变形、旋转、透明度、滤镜及色彩变化等动画效果。

与前面介绍的逐帧动画不同，使用传统补间创建动画时，只要将两个关键帧中的对象制作出来即可。在两个关键帧之间的过渡帧由Animate CC 2017自动创建，并且只有关键帧是可以进行编辑的，而各过渡帧虽然可以查看，但是不能直接进行编辑。除此之外，在制作时，还需要满足以下条件。

●在一个动画补间动作中至少要有两个关键帧。

●两个关键帧中的对象必须是同一个对象。

●两个关键帧中的对象必须有一些变化，否则制作的动画将没有动作变化的效果。

1．创建传统补间动画

传统补间动画的创建方法有以下两种。

（1）通过右键菜单创建传统补间动画

首先在“时间轴”面板中选择同一图层的两个关键帧之间的任意一帧，然后单击鼠标右键，从弹出的快捷菜单中选择“创建传统补间”命令，如图2-122所示，这样就在两个关键帧之间创建出了传统补间动画，所创建的传统补间动画会以浅蓝色背景显示，并且在关键帧之间有一个箭头，如图2-123所示。

通过右键菜单除了可以创建传统补间动画外，还可以取消已经创建好的传统补间动画。具体方法：选择已经创建的传统补间动画的两个关键帧之间的任意一帧，然后单击鼠标右键，从弹出的快捷菜单中选择“删除补间”命令，如图2-124所示，即可取消补间动作。

（2）使用菜单命令创建传统补间动画

在使用菜单命令创建传统补间动画的过程中，同样需要选择同一图层的两个关键帧之间的任意一帧，然后执行菜单中的“插入|补间动画”命令；如果要取消已经创建好的传统补间动画，可以选择已经创建的传统补间动画的两个关键帧之间的任意一帧，然后执行菜单中的“插入|删除补间”命令。

2．传统补间动画属性设置

无论使用前面介绍的哪种方法创建补间动画，都可以通过“属性”面板进行动画的各项设置，从而使其更符合动画需要。选择已经创建的传统补间动画的两个关键帧之间的任意一帧，然后调出“属性”面板，如图2-125所示，在其“补间”选项中设置动画的运动速度、旋转方向与旋转次数等属性。

（1）缓动

默认情况下，过渡帧之间的变化速率是不变的，在此可以通过“缓动”选项逐渐调整变化速率，从而创建出更为自然的由慢到快的加速或由快到慢的减速效果，默认值为0，取值范围为-100～+100，负值为加速动画，正值为减速动画。

（2）缓动编辑

单击“缓动”选项右侧的按钮，在弹出的“自定义缓入/缓出”对话框中可以设置过渡帧更为复杂的速度变化，如图2-126所示。其中，帧由水平轴表示，变化的百分比由垂直轴表示，第1个关键帧表示为0%，最后1个关键帧表示为100%。对象的变化速率用曲线图中的速率曲线表示，曲线水平时（无斜率），变化速率为0；曲线垂直时，变化速率最大。

（3）旋转

“旋转”用于设置对象旋转的动画，单击右侧的按钮，会弹出如图2-127所示的下拉列表框，当选择“顺时针”或“逆时针”选项时，可以创建顺时针或逆时针旋转的动画。在下拉列表框的右侧还有一个参数设置，用于设置对象旋转的次数。

（4）贴紧

勾选“贴紧”复选框，可以将对象紧贴到引导线上。

（5）同步

勾选“同步”复选框，可以使图形元件实例的动画和主时间轴同步。

（6）调整到路径

在制作运动引导线动画时，勾选“调整到路径”复选框，可以使动画对象沿着运动路径运动。

（7）缩放

勾选“缩放”复选框，可以改变对象的大小。

2.5.3 补间形状动画

补间形状动画用于创建形状变化的动画效果，使一个形状变成另一个形状，同时可以设置图形的形状位置、大小和颜色的变化。

补间形状动画的创建方法与传统补间动画类似，只要创建出两个关键帧中的对象，其他过渡帧便可通过Animate CC 2017自己制作出来。当然，创建补间形状动画还需要满足以下条件。

●在一个补间形状动画中至少要有两个关键帧。

●两个关键帧中的对象必须是可编辑的图形，如果是其他类型的对象，则必须将其转换为可编辑的图形。

●两个关键帧中的图形必须有一些变化，否则制作的动画将没有动作变化的效果。

1．创建补间形状动画

当满足了以上条件后，就可以制作补间形状动画。与创建传统补间动画类似，创建补间形状动画也有两种方法。

（1）通过右键菜单创建补间形状动画

选择同一图层的两个关键帧之间的任意一帧，然后单击鼠标右键，从弹出的快捷菜单中选择“创建补间形状”命令，如图2-128所示，这样就在两个关键帧之间创建出了补间形状动画，所创建的补间形状动画会以浅绿色背景进行显示，并且在关键帧之间有一个箭头，如图2-129所示。

提示：如果创建后的补间形状动画以一条绿色背景的虚线段表示，则说明补间形状动画没有创建成功，原因是两个关键帧中的对象可能没有满足创建补间形状动画的条件。

如果要删除创建的补间形状动画，其方法与前面介绍的删除传统补间动画相同。只要选择已经创建的补间形状动画的两个关键帧之间的任意一帧，然后单击鼠标右键，从弹出的快捷菜单中选择“删除补间”命令即可。

（2）使用菜单命令创建补间形状动画

与前面制作传统补间动画的方法相同，首先要选择同一图层的两个关键帧之间的任意一帧，然后执行菜单中的“插入|补间形状”命令，即可在两个关键帧之间创建补间形状动画；如果要取消已经创建好的补间形状动画，可以选择已经创建的补间形状动画的两个关键帧之间的任意一帧，然后执行菜单中的“插入|删除补间”命令即可。

2．补间形状动画属性设置

补间形状动画的属性同样可以通过“属性”面板的“补间”选项进行设置。首先选择已经创建的补间形状动画的两个关键帧之间的任意一帧，然后调出“属性”面板，如图2-130所示，在其“补间”选项中设置动画的运动速度、混合等属性即可。其中的“缓动”参数设置请参考前面介绍的传统补间动画。

“混合”下拉列表中有“分布式”和“角形”两个选项可供选择。其中，“分布式”选项创建的动画中间形状更为平滑和不规则；“角形”选项创建的动画中间形状会保留有明显的角和直线。

3．使用形状提示控制形状变化

在制作补间形状动画时，如果要控制复杂的形状变化，那么就会出现变化过程杂乱无章的情况，这时可以通过执行菜单中的“修改|形状|添加形状提示”命令，为动画中的图形添加形状提示点，通过形状提示点可以指定图形如何变化，并且可以控制更加复杂的形状变化。

2.5.4 补间动画

补间动画不仅可以大大简化Animate CC 2017动画的制作过程，而且还提供了更大程度的控制。在Animate CC 2017中，补间动画是一种基于对象的动画，不再是作用于关键帧，而是作用于动画元件本身，从而使Animate CC 2017的动画制作更加专业。

1．补间动画与传统补间动画的区别

Animate CC 2017软件支持传统补间动画和补间动画两种不同的补间动画类型，它们之间存在以下差别。

●传统补间动画是基于关键帧的动画，是通过两个关键帧中两个对象的变化来创建的动画，其中关键帧是显示对象实例的帧；而补间动画是基于对象的动画，整个补间范围只有一个动画对象，动画中使用的是属性关键帧，而不是关键帧。

●补间动画在整个补间范围上只有一个对象。

●补间动画和传统补间动画都只允许对特定类型的对象进行补间。如果应用补间动画，则在创建补间时会将所有不允许的对象类型转换为影片剪辑元件，而应用传统补间动画会将这些对象类型转换为图形元件。

●补间动画会将文本视为可补间的类型，而不会将文本对象转换为影片剪辑；传统补间动画则会将文本对象转换为图形对象。

●补间动画不允许在动画范围内添加帧标签，而传统补间动画则允许在动画范围内添加帧标签。

●补间目标上的任何对象脚本都无法在补间动画的过程中更改。

● 在时间轴中可以将补间动画范围视为对单个对象进行拉伸和调整大小，而传统补间动画则是对补间范围的局部或整体进行调整。

●如果要在补间动画范围中选择单个帧，必须按住〈Ctrl〉键单击该帧，而传统补间动画中的单帧只需要直接单击即可选择。

●对于传统补间动画，缓动可应用于补间内关键帧之间的帧；对于补间动画，缓动可应用于补间动画范围的整个长度，如果仅对补间动画的特定帧应用缓动，则需要创建自定义缓动曲线。

●只能使用补间动画来为3D对象创建动画效果，而不能使用传统补间动画为3D对象创建动画效果。

●只有补间动画才能保存为预设。

● 补间动画中属性关键帧无法像传统补间动画那样，对动画中单个关键帧的对象应用交互元件的操作，而是将整体动画应用于交互的元件。补间动画也不能在“属性”面板的“循环”选项下设置图形元件的“单帧”数。

2．创建补间动画

与前面的传统补间动画一样，补间动画对于创建对象的类型也有所限制，只能应用于元件的实例和文本字段。如果没有元件，将会弹出一个用于提示是否将选择的对象转换为元件的提示框，如图2-131所示。

在创建补间动画时，对象所处的图层类型可以是系统默认的常规图层，也可以是比较特殊的引导层、遮罩层或被遮罩层。在创建补间动画后，如果原图层是常规图层，那么它将成为补间图层；如果是引导层、遮罩层或被遮罩层，那么它将成为补间引导图层、补间遮罩图层或补间被遮罩图层。

创建补间动画有以下两种方法。

（1）通过右键菜单创建补间动画

在“时间轴”面板中选择某帧，或者在舞台中选择对象，然后单击鼠标右键，从弹出的快捷菜单中选择“创建补间动画”命令，如图2-132所示，即可创建补间动画，如图2-133所示。

如果要删除创建的补间动画，可以在“时间轴”面板中选择已经创建补间动画的帧，或者在舞台中选择已经创建补间动画的对象，然后单击鼠标右键，从弹出的快捷菜单中选择“删除补间”命令。

（2）使用菜单命令创建补间动画

除了使用右键菜单创建补间动画外，Animate CC 2017还提供了创建补间动画的菜单命令。利用创建补间动画的菜单命令创建补间动画的方法：首先在“时间轴”面板中选择某帧，或者在舞台中选择对象，然后执行菜单中的“插入|补间动画”命令。

3．在舞台中编辑属性关键帧

在Animate CC 2017中，“关键帧”和“属性关键帧”的性质不同。其中，“关键帧”是指舞台上实实在在有动画对象的帧，而“属性关键帧”则是指补间动画的特定时间或帧中为对象定义了属性值。

在舞台中可以通过变形面板或工具箱上的各种工具进行属性关键帧的各项编辑，包括位置、大小、旋转和倾斜等。如果补间对象在补间过程中更改舞台位置，那么在舞台中将显示补间对象在舞台上移动时所经过的路径，此时，可以通过工具箱上的（选择工具）、（部分选取工具）、（任意变形工具）以及变形面板编辑补间的运动路径。

4．使用“动画编辑器”调整补间动画

在Animate CC 2017中通过动画编辑器可以查看所有补间属性和属性关键帧，从而对补间动画进行全面细致的控制。在“时间轴”面板中双击补间动画中任意一帧，进入如图2-134所示的“动画编辑器”。

在“动画编辑器”中，通过在右侧网格曲线中单击鼠标右键，从弹出的快捷菜单中选择相关命令，可以对曲线进行复制、粘贴、翻转、反转等操作。另外单击（在图形上添加锚点）按钮，可以在曲线上添加锚点来改变运动轨迹，如图2-135所示。单击（适应视图大小）按钮，可以让曲线网格界面适应当前的时间轴面板大小，如图2-136所示。单击（为选定属性适用缓动）按钮，在弹出的图2-137所示的面板左侧可以选择各种缓动选项，也可以通过添加锚点来自定义缓动曲线。

5．在“属性”面板中编辑属性关键帧

除了可以使用前面介绍的方法编辑属性关键帧外，还可以通过“属性”面板进行一些编辑。首先在“时间轴”面板中将播放头拖动到某帧处，然后选择已经创建好的补间范围，展开“属性”面板，显示“补间动画”的相关设置，如图2-138所示。

●缓动：用于设置补间动画的变化速率，可以在右侧直接输入数值进行设置。

●旋转：用于显示当前属性关键帧是否旋转，以及旋转的次数、角度。

方向：用于设置旋转的方向。

●路径：如果当前选择的补间范围中的补间对象已经更改了舞台位置，则可以在此设置补间运动路径的位置和大小。其中，X和Y分别代表“属性”面板第1帧对应的属性关键帧中对象的X轴和Y轴位置；宽度和高度用于设置运动路径的宽度和高度。

●选项：勾选“同步图形元件”复选框，会重新计算补间的帧数，从而匹配时间轴上分配给它的帧数，使图形元件的动画和主时间轴同步。

2.5.5 动画预设

动画预设提供了预先设置好的一些补间动画，可以直接将它们应用于舞台对象，当然也可以将自己制作好的一些比较常用的补间动画保存为自定义预设，以便于与他人共享后，在以后工作中可以直接调用，从而节省动画制作时间，提高工作效率。

在Animate CC 2017中，动画预设的各项操作是通过“动画预设”面板进行的，执行菜单中的“窗口|动画预设”命令，可以调出“动画预设”面板，如图2-139所示。

1．应用动画预设

通过单击“动画预设”面板中的按钮，可以将动画预设应用于一个选定的帧或不同图层上的多个选定帧。其中，每个对象只能应用一个预设，如果第二个预设应用于相同的对象，那么第二个预设将替换第一个预设。应用动画预设的操作很简单，具体步骤如下。

1）首先在舞台上选择需要添加动画预设的对象。

2）在“动画预设”面板的“预设列表”中选择需要应用的预设，此时通过上方的“预览窗口”可以预览选定预设的动画效果。

3）选择合适的动画预设后，单击“动画预设”面板下方的按钮，即可将所选预设应用到舞台中被选择的对象上。

提示：在应用动画预设时需要注意，在“预设列表”中的各3D动画的动画预设只能应用于影片剪辑元件，而不能应用于图形或按钮元件，也不适用于文本字段。因此，如果要对选择对象应用各3D动画的动画预设，需要将其转换为影片剪辑元件。

2．将补间另存为自定义动画预设

除了可以将Animate CC 2017对象进行动画预设的应用外，Animate CC 2017还允许将已经创建好的补间动画另存为新的动画预设，以便以后调用。这些新的动画预设会存放在“动画预设”面板中的“自定义预设”文件夹内。将补间另存为自定义动画预设的操作可以通过“动画预设”面板下方的（将选区另存为预设）按钮来完成。具体操作步骤如下。

1）选择“时间轴”面板中的补间范围，或者选择舞台中应用了补间的对象。

2）单击“动画预设”面板下方的（将选区另存为预设）按钮，此时会弹出“将预设另存为”对话框，在其中设置另存预设的名称，如图2-140所示。

3）单击“确定”按钮，即可将选择的补间另存为预设，并存放在“动画预设”面板中的“自定义预设”文件夹中，如图2-141所示。

3．创建自定义预设的预览

将所选补间另存为自定义动画预设后，在“动画预设”面板的“预览窗口”中是无法正常显示效果的。如果要预览自定义的效果，可以执行以下操作。

1）首先创建补间动画，并将其另存为自定义预设。

2）创建一个只包含补间动画的.fla文件。注意要使用与自定义预设完全相同的名称，并将其保存为.fla格式的文件，然后通过“发布”命令为该.fla文件创建.swf文件。

3）将刚才创建的.swf文件放置在已保存的自定义动画预设XML文件所在的目录中。如果用户使用的是Windows系统，那么可以放置在如下目录中：<硬盘>\Program Files\Adobe\Adobe Animate CC 2017\Common\Configuration/Motion Presets。

4）重新启动Animate CC 2017，此时选择“动画预设”面板的“自定义预设”文件夹中的相应自定义预设，即可在“预览窗口”中进行预览了。