第5章补间动画

内容提要

本章主要介绍了利用补间动画制作几种基本动画(移动、缩放、倾斜、旋转、颜色、透
明度和3D 旋转)的方法,利用动画编辑器制作和控制动画的基本方法,帧相关概念及
操作。

学习建议

首先掌握制作简单动画的基本方法,不要在制作动画元素上花费过多的精力和时
间;初步理解利用时间轴和动画编辑器制作补间动画的方法;逐步掌握制作复杂动画的
方法。

5.制作补间动画的要素
1 

Animate支持“补间动画”“传统补间”两种不同类型的补间动画。其中,“传统补间” 
是早期版本Flash中创建的补间动画,提供了一些用户可能希望使用的某些特定功能。
“补间动画”是Animate增加的创建补间动画的方法,可对补间动画进行最大程度的控
制,提供了更多的补间控制。

Animate中,传统补间动画是利用一个图层的两个关键帧制作一个动画片段的。而
补间动画中,每个动画的起始帧(默认是第1帧)是“关键帧”,其他更改实例属性的帧叫
作“属性关键帧”。

【例5-1】用补间动画制作一个简单的动画。

动画情景:叉车从左侧沿着曲线移动到右侧。

(1)新建Ac0文档。
tionScript3.

(2)新建“影片剪辑”类型元件,命名为“叉车”。在元件编辑窗口中导入图片(素材\ 
图片\PNG\ 叉车.n)。
pg

(3)单击“场景1”按钮,返回到场景。
(4)创建关键帧。将元件“叉车”拖动到“图层_1”第1帧舞台的左侧,如图5-1所示。
(5)创建补间动画。右击“图层_1”第1帧或第1帧中的实例,在弹出的快捷菜单中
选择“创建补间动画”命令(见图5-2), 创建补间动画,如图5-3所示。
提示:在一个图层执行“创建补间动画”命令后,该图层添加了补间动画,并将图层的
图标更改为补间动画标识。


图5-1　创建关键帧


图5-2　在快捷菜单中选择“创建补间动画”命令


图5-3　创建补间动画后的时间轴

执行创建补间动画命令,将默认创建24 个帧(添加了23 个帧)的动画片段,通过插

入帧可以延长动画帧,也可以用鼠标左键按住结束帧左右拖动,可以修改补间的帧数。
Animate默认的动画播放帧频为每秒24 帧,因此创建的动画片段的时间为1秒。
创建的补间动画片段,除了第1帧是关键帧外,其他帧均为普通帧。

(6)创建属性关键帧。单击选择第24 帧(或将播放头移动到第24 帧), 将该帧中的
实例拖动到舞台的右侧,创建“位置”属性关键帧,如图5-4所示。
图5-4　拖动结束帧中的实例创建“属性关键帧”

提示:拖动实例更改实例的位置属性,在结束帧创建了“属性关键帧”(用小菱形“◆” 
表示)。同时,显示了带点的线段,该线段是实例移动的路径。


(7)修改移动路径。单击“工具”面板中的“选择工具”按钮,然后将鼠标指向路径,当
指针下方出现弧线标志时,按住鼠标左键拖动,修改移动路径,如图5-5所示。
图5-5　用“选择工具”修改路径

(8)测试影片
。
提示:在一个图层制作补间动画的3个要素如下
。
(1)创建关键帧。在关键帧中创建实例,并创建补间动画。
(2)创建属性关键帧。根据动画需要创建动画片段的开始属性关键帧和结束属性关
键帧
(
。
3)设置属性。在属性关键帧中设置实例的属性或帧的属性。
反复操作(2)和(3)可以添加实例的补间动画。
介于两个属性关键帧之间的所有帧中实例的属性均由Animate软件自动完成。

5.常用的几种基本动画
2 

为了介绍几种基本动画的制作方法,创建一个文档,并将该文档保存为“补间原始文档”。

(1)新建文档。执行菜单“ →“ →“ →AtoSrpt3.确定”
文件” 新建” 常规”cinci0→“ 命
令。工作区窗口布局选择“基本功能”。

(2)创建新元件。在“库”面板中,单击“新建元件”按钮,打开“创建新元件”对话框。
在对话框的“名称”文本框中输入“叉车”,“类型”选择“影片剪辑”,单击“确定”按钮,打开
元件“叉车”编辑窗口。
(3)执行菜单“文件”→“导入”→“导入到舞台”命令,打开“导入”对话框,选择图片
pn
(素材\图片\PNG\ 叉车.g), 单击“打开”命令,将图片导入元件编辑窗口。

(4)单击“场景1”按钮,返回到场景,保存文档。执行菜单“文件”→“保存”或“另存
为”命令,打开“另存为”对话框。
在对话框中,选择工作目录,在“文件名”文本框中输入文件名“补间原始文档”,单击
“保存”按钮,保存文档。

5.2.1　移动位置的动画
【例5-2】用补间动画制作移动位置的动画
。
动画情景:叉车沿着三角形路径移动并回到原来的位置
。


103 


(1)新建文档。打开文档“补间原始文档”,另存为“补间移动位置动画”。
(2)创建实例。选择“图层_1”的第1帧,将元件“库”面板中的元件“叉车”拖动到舞
台左下方。
(3)创建补间动画。右击“图层_1”的第1帧或第1帧中的实例,在弹出的快捷菜单
中选择“创建补间动画”命令,创建补间动画。
(4)创建属性关键帧。右击第30 帧,在弹出的快捷菜单中选择“插入关键帧”→“位
置”命令,在第30 帧创建“位置”属性关键帧,如图5-6所示。
图5-6　插入属性关键帧
用同样的方法,分别在第10 帧和第20 帧创建“位置”属性关键帧,如图5-7所示。


图5-7　创建
3 
个“位置”属性关键帧

(5)调整实例的位置。将第10 帧中的实例拖动到舞台的右下方,第20 帧中的实例
拖动到舞台的右上方,如图5-8所示。
图5-8　创建三角形路径的补间动画

(6)测试影片。
104 


5.2.2　缩放动画
【例5-3】用补间动画制作改变大小的动画。

动画情景:叉车从左侧移动到舞台中心(1~10 帧)放大到原来的150%(10~20 
帧), 再缩小到原来大小(20~30 帧)后,移动到舞台右侧(30~40 帧)。

(1)打开文档“补间原始文档”,另存为“补间改变大小动画”。
(2)选择第1帧,将元件“库”中的元件“叉车”拖动到舞台左侧。
(3)在第40 帧处插入帧,并创建第1~40 帧的补间动画。
(4)单击选择第10 帧,将实例横向拖动到舞台中心。
(5)右击第10 帧,在弹出的快捷菜单中选择“插入关键帧”→“缩放”命令,插入“缩
放”属性关键帧,如图5-9所示。
提示:选择第10 帧后,移动实例的操作,将在第10 帧创建“位置”属性关键帧。为设
置第10 帧开始的实例缩放,在第10 帧插入“缩放”属性关键帧。

(6)在第20 帧插入“缩放”属性关键帧,第30 帧分别插入“位置”和“缩放”属性关键
帧。选择第40 帧,将实例拖动到舞台右侧,创建“位置”属性关键帧。
(7)选择第20 帧或第20 帧中的实例,执行菜单“修改”→“变形”→“缩放和旋转”命
令,打开“缩放和旋转”对话框,将“缩放”设置为150%,如图5-10 所示。
图5-9　插入属性关键帧图5-10　“缩放和旋转”对话框

(8)测试影片。完成动画的时间轴,如图5-11 所示。
图5-11　完成动画的时间轴

提示:创建属性关键帧时,可以选择添加“全部”属性,也可以指定需要更改实例的某
一种属性(位置、缩放、旋转等)。

执行菜单“插入”→“时间轴”→“关键帧”命令或按功能键F6,可以插入“全部”属性关
键帧。

105 


5.2.3　倾斜动画
【例5-4】用补间动画制作倾斜变形的动画。

动画情景:叉车从左侧移动到舞台中心(1~10 帧), 倾斜变形(10~20 帧), 再变形恢
复为原始状态(20~30 帧)后,移动到舞台右侧(30~40 帧)。

(1)打开文档“补间原始文档”,另存为“补间倾斜动画”。
(2)选择“图层_1”的第1帧,将元件“库”中的元件“叉车”拖动到舞台左侧。
(3)在第40 帧处插入帧,并创建第1~40 帧的补间动画。
(4)单击选择“图层_1”的第10 帧,将实例横向拖动到舞台中心,创建“位置”属性关
键帧
(
。
5)右击第10 帧,在弹出的快捷菜单中选择“插入关键帧”→“倾斜”命令,在第10 帧
添加“倾斜”属性关键帧。使用同样的方法,分别在第20 帧和第30 帧创建“倾斜”属性关

键帧
(
。
6)选择第20 帧中的实例,执行菜单“窗口”→“变形”命令。在打开的“变形”面板
中,“倾斜”设置为水平倾斜45°,如图5-12 所示。


图5-12　设置为水平倾斜45°

提示:也可以利用“任意变形工具”,将第20 帧中的实例进行变形。

(7)选择右击第30 帧,在弹出的快捷菜单中,选择“插入关键帧”→“位置”命令,在属
性关键帧添加“位置”属性。
(8)选择第40 帧,将实例横向拖动到舞台的右侧。
(9)测试影片。
提示:制作一段改变某一属性的动画时,分别在动画片段的起止属性关键帧中添加
要改变的属性。

5.2.4　旋转动画
【例5-5】用补间动画制作旋转的动画。
动画情景:叉车从左侧移动到舞台中心(1~10 帧), 顺时针旋转180°(10~20 帧), 再

106 


°(20~30 帧) 移动到舞台右侧(30~40 帧) 。
逆时针旋转180后,

(1)打开文档“补间原始文档”,另存为“补间旋转动画”。
(2)选择“图层_1”的第1帧,将元件“库”中的元件“叉车”拖动到舞台左侧。
(3)在第40 帧处插入帧,并创建第1~40 帧的补间动画。
(4)选择“图层_1”的第10 帧,将实例横向拖动到舞台中心,创建“位置”属性关键帧。
(5)右击第10 帧,在弹出的快捷菜单中选择“插入关键帧”→“旋转”命令,在第10 帧
添加“旋转”属性关键帧。同样的方法,分别在第20 帧和第30 帧创建“旋转”属性关
键帧
(
。
6)选择第20 帧中的实例,执行菜单“窗口”→“变形”命令,在打开的“变形”面板中
“旋转”设置为180°,如图5-13 所示。

(7)右击第30 帧,在弹出的快捷菜单中选择“插入关键帧”→“位置”命令,在属性关
键帧添加“位置”属性。
(8)选择第40 帧,将实例横向拖动到舞台的右侧。
(9)测试影片。
提示:选择补间动画帧后,打开“属性”面板,在“旋转”选项组也可以设置旋转,如图
5-14 所示。补间动画“属性”面板中设置的旋转,是从关键帧到动画结束帧的旋转,中间
“旋转”属性帧将被清除。如果在中间需要设置旋转“属性”关键帧,则要重新创建“属性” 
关键帧,并设置旋转。


图5-13　“变形”面板图5-14　在补间动画“属性”面板中设置旋转

5.2.5　变化颜色的动画
【例5-6】用补间动画制作变化颜色的动画。

动画情景:叉车从左侧移动到舞台中心(1~10 帧), 变化颜色(10~20 帧), 再恢复到
原颜色(20~30 帧)后,移动到舞台右侧(30~40 帧)。

(1)打开文档“补间原始文档”,另存为“补间变化颜色动画”。
(2)选择“图层_1”的第1帧,将元件“库”中的元件“叉车”拖动到舞台左侧。
(3)在第40 帧处插入帧,并创建第1~40 帧的补间动画。
键帧
(
。
4)单击选择“图层_1”的第10 帧,将实例横向拖动到舞台中心,创建“位置”属性关
107 


(5)右击第30 帧,插入“位置” 
右侧。
属性关键帧。选择第40 帧,将实例横向拖动到舞台

(6)在舞台上选择实例“叉车”后,打开实例“属性”面板,在“色彩效果”选项组的“样
式”列表框中选择“高级”,为实例添加颜色属性。
(7)分别选择第10 帧、20 帧和30 帧,插入“颜色”属性关键帧。选择第20 帧中的实
例,打开实例“属性”面板,在“色彩效果”选项组的“样式”列表框中选择“高级”,将“红”和
“蓝”设置为0% 、“绿”设置为100%,如图5-15 所示。
提示:制作变化颜色的补间动画时,首先要为实例添加颜色属性。

(8)测试影片。
5.2.6　改变透明度的动画
【例5-7】用补间动画制作改变透明度的动画。

动画情景:叉车从左侧移动到舞台中心(1~10 帧), 逐渐透明(10~20 帧), 再逐渐恢
复透明度(20~30 帧)后,移动到舞台右侧(30~40 帧)。

(1)打开文档“补间原始文档”,另存为“补间改变透明度动画”。
(2)选择“图层_1”的第1帧,将元件“库”中的元件“叉车”拖动到舞台左侧。
(3)在第40 帧处插入帧,并创建第1~40 帧的补间动画。
键帧
(
。
4)单击选择“图层_1”的第10 帧,将实例横向拖动到舞台中心,创建“位置”属性关
(5)右击第30 帧,插入“位置”属性关键帧。选择第40 帧,将实例横向拖动到舞台右
侧,创建“位置”属性关键帧。
(6)在舞台上选择实例“叉车”后,打开实例“属性”面板,在“色彩效果”选项组的“样
式”列表框中选择“高级”,为实例添加颜色属性。
(7)分别选择第10 帧、20 帧和30 帧,插入“颜色”属性关键帧。选择第20 帧中的实
例,打开实例“属性”面板,在“色彩效果”选项组的“样式”列表框中选择“高级”,将Alpha 
设置为0%,如图5-16 所示。
图5-15　设置实例的颜色图5-16　设置实例的透明度

108 


提示:制作改变透明度的补间动画时,首先要为实例添加颜色属性。

(8)测试影片。
5.2.7　使用滤镜
使用滤镜,可以为文本、按钮和影片剪辑增添丰富的视觉效果。

【例5-8】为补间动画添加模糊效果。

动画情景:叉车从左侧移动到舞台中心(1~10 帧), 逐渐模糊(10~20 帧), 再逐渐恢

复清晰(20~30 帧)后,移动到舞台右侧(30~40 帧)。

(1)打开文档“补间原始文档”,另存为“添加模糊效果的动画”。
(2)选择“图层_1”的第1帧,将元件“库”中的元件“叉车”拖动到舞台左侧。
(3)在第40 帧处插入帧,并创建第1~40 帧的补间动画。
(4)单击选择“图层_1”的第10 帧,将实例横向拖动
到舞台中心,创建“位置”属性关键帧。
(5)右击第30 帧,插入“位置”属性关键帧。选择第
40 帧,将实例横向拖动到舞台右侧,创建“位置”属性关
键帧
(
。
6)在舞台上选择实例“叉车”后,打开实例“属性”面
板,在“滤镜”选项组中单击“添加滤镜”按钮列表框选择
“模糊”,为实例添加模糊滤镜,并将“模糊X”“模糊Y”设
置为0像素。

(7)分别选择第10 帧、20 帧和30 帧,插入“滤镜”属
性关键帧。选择第20 帧中的实例,打开实例“属性”面板, 
在“滤镜”选项组的“模糊”列表框中“模糊X”“模糊Y”设
置为40 像素,如图5-17 所示。
提示:为补间动画添加滤镜效果时,首先要为实例添
图5-17　设置实例的模糊滤镜
加滤镜属性。为实例添加滤镜时,先不添加效果,将参数
设置为0,创建属性帧时,再设置参数。

(8)测试影片。
5.2.8　3D 
旋转动画
3D 旋转动画除了可以在XY 平面转动外,还可以绕Y轴或X轴或任何方向旋转。
3D 旋转动画需要Ac0的支持。

tionScript3.

【例5-9】3D 旋转动画。

动画情景:卡通图片绕中心竖直轴(Y轴)旋转。

(1)新建Acinci0文档。
toSrpt3.

(2)新建“影片剪辑”类型元件,命名为“卡通”,在元件编辑窗口中导入图片(素材\图
p
片\PNG\ 男孩_01.ng), 并将图片中心对齐编辑窗口中心。

109 


提示:选择对象,执行菜单“
窗口”→“对齐”命令,打开“对齐”面板,选中“与舞台对
齐”复选框,并单击“水平中齐”和“垂直中齐”按钮,可以将对象对齐编辑窗口中心,如
图5-18 所示。

菜单“修改”→“对齐”的子菜单中,也可以找到相应的对齐命令。

(3)返回到场景。将“库”中的“卡通”元件拖动到舞台,并将该实例对齐舞台中心。
提示:此时,场景中只有一个图层“图层_1该图层中只有一个关键帧第1帧。,(”) 
(4)在第30 帧插入帧,并创建补间动画。
(5)单击第30 帧或该帧中的实例,执行菜单“窗口”→“变形”命令,打开“变形”面板, 
将“3D 旋转”选项组中的Y设置为359°,如图5-19 所示。
图5-18　“对齐”面板图5-19　“变形”面板
提示:因为若Y值输入360°,自动变更为0°,因此,用359°来表示旋转一周。

(6)测试影片。完成动画的场景,如图5-20 所示。
5.2.9　对补间动画应用缓动
为了产生更逼真的动画效果,可对补间动画应用缓动。
选择补间动画帧后,打开“属性”面板,在“缓动”选项组中设置“缓动值”,如图5-21 
所示。


图5-20　完成动画的场景图5-21　设置缓动强度

“缓动值”可以选择-100~100 中的一个值。正值是动画由快逐渐减速变化,负值是
动画由慢逐渐加速变化。