形状补间

上次更新日期: 2023年5月24日

在形状补间中,可在时间轴中的特定帧处绘制矢量形状。 接下来,更改该形状或在另一个特定框架处绘制另一个形状。 然后,Animate 为这两帧之间的帧内插这些中间形状,创建从一个形状变形为另一个形状的动画效果。

在 Animate 中,可以对均匀的实心笔触和不均匀的花式笔触添加形状补间。 还可以对使用可变宽度工具增强的笔触添加形状补间。 您可以对要使用的形状进行试验来确定结果。 可以使用形状提示来告诉 Animate 起始形状上的哪些点与结束形状上的特定点对应。

也可以对补间形状内的形状的位置和颜色进行补间。

若要对组、实例或位图图像应用形状补间,请分离这些元素。 若要对文本应用形状补间,请将文本分离两次,从而将文本转换为对象。 请参阅分离元件实例

创建形状补间

以下步骤演示如何在时间轴的第 1 帧与第 30 帧之间创建形状补间。 不过,您也可以在所选的时间轴的任何部分中创建补间。

在第 1 帧中,使用矩形工具绘制一个正方形。

选择同一图层的第 30 帧,然后通过选择“插入”>“时间轴”>“空白关键帧”或按 F7 来添加一个空白关键帧。

在舞台上,使用椭圆工具在第 30 帧中绘制一个圆。

此时,第 1 帧中包含一个带正方形的关键帧,并且第 30 帧中包含一个带圆形的关键帧。

时间轴上,从位于包含两个形状的图层中的两个关键帧之间的多个帧中选择一个帧。

选择“插入”>“形状补间”

Animate 将形状内插到这两个关键帧之间的所有帧中。

若要预览补间,请在时间轴中将播放头拖过这些帧,或按 Enter 键。

除了形状之外,要进行补间移动,请将第 30 帧中的形状移动到与第 1 帧不同的位置。

通过按 Enter 键预览动画。

若要对形状的颜色进行补间,请确保第 1 帧中的形状与第 30 帧中的形状具有不同的颜色。

若要向补间添加缓动,请选择一个帧,然后在属性检查器中的“缓动”字段中输入一个值。

若要在补间开始处缓动,请输入负值。 若要在补间结束处缓动,请输入正值。

创建缓动预设或自定义缓动

缓动预设是可以应用于舞台上某个对象的预配置缓动。

形状补间可以使用一组常用的缓动预设。 您可以从缓动预设列表中选择预设,然后将其应用于选定属性。 您还可以将自定义缓动应用于形状补间。

在 Animate 时间轴中单击包含形状补间的图层。

要打开“补间”属性,请单击属性面板中的“补间”类别。

补间属性
补间属性

从缓动类型弹出对话框中选择缓动预设。 双击该预设类型以应用。 

如果选择应用传统缓动,也可以通过移动滑块来增大或减小缓动强度。 

缓动预设类型
缓动预设类型

单击“缓动”旁边的“编辑”图标以应用自定义缓动。 

“自定义缓动”对话框显示一个表示运动程度随时间而变化的图形。 水平轴表示帧,垂直轴表示变化的百分比。 第一个关键帧表示为 0%,最后一个关键帧表示为 100%。

图形曲线的斜率表示对象的变化速率。 曲线水平时(无斜率),变化速率为零;曲线垂直时,变化速率最大,一瞬间完成变化。

您可通过从“自定义”列表中选择您的自定义缓动,来保存一个自定义缓动并重复使用它。 在进行更改后,在编辑模式下单击“保存和应用”按钮。 在以下屏幕快照中,您可以查找名为 MyEase1 的自定义缓动预设。 

通过选择相应的范围和应用预设缓动,您可以在时间轴中的多个范围内使用这些预设缓动。

多个间距的缓动预设
对多个间距应用缓动预设

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

若要控制更加复杂或罕见的形状变化,可以使用形状提示。 形状提示会标识起始形状和结束形状中相对应的点。 例如,如果要补间一张正在改变表情的脸部图画时,可以使用形状提示来标记每只眼睛。 这样在形状发生变化时,脸部就不会乱成一团,每只眼睛还都可以辨认,并在转换过程中分别变化。

字母形式的形状提示
字母形式的形状提示

形状提示包含从 a 到 z 的字母,用于识别起始形状和结束形状中相对应的点。 最多可以使用 26 个形状提示。

起始关键帧中的形状提示是黄色的,结束关键帧中的形状提示是绿色的,当不在一条曲线上时为红色。

要在补间形状时获得最佳效果,请遵循这些准则:

  • 在复杂的补间形状中,需要创建中间形状然后再进行补间,而不要只定义起始和结束的形状。

  • 确保形状提示是符合逻辑的。 例如,如果在一个三角形中使用三个形状提示,则在原始三角形和补间三角形中它们的顺序必须相同。 命令在第一个关键帧中不能为 a,b,c,在第二个中不能为 a,c,b

  • 如果按逆时针顺序从形状的左上角开始放置形状提示,它们的工作效果最好。

使用形状提示

选择补间形状序列中的第一个关键帧。

选择“修改”>“形状”>“添加形状提示”。 起始形状提示会在该形状的某处显示为一个带有字母 a 的红色圆圈。

将形状提示移动到要标记的点。

选择补间序列中的最后一个关键帧。 结束形状提示会在该形状的某处显示为一个带有字母 a 的绿色圆圈。

将形状提示移到结束形状中与您标记的第一点对应的点。

若要查看形状提示如何更改补间形状,请再次播放动画。 若要微调补间,请移动形状提示。

要添加更多形状提示,请重复此过程。 将出现新的提示,所带的字母紧接之前字母的顺序(bc 等等)。

查看所有形状提示

选择视图>显示形状 提示。 仅当包含形状提示的图层和关键帧处于活动状态时,“显示形状提示”才可用。

删除形状提示

将其拖离舞台。

删除所有形状提示

选择“修改”>“形状”>“删除所有提示”

使用可变宽度向笔触添加形状补间

Animate 允许您对具有可变宽度的笔触添加形状补间。 此前,Animate 仅支持对实心均匀笔触和形状创建形状补间。 这使得设计人员对不均匀的笔触(如使用可变宽度工具增强的笔触)无法创建形状补间。 对具有可变宽度的笔触进行补间极大地拓展了在 Animate 中的设计潜力。

对花式笔触添加形状补间与对形状或实心均匀笔触添加形状补间是一样的。 该工作流程需要由用户定义补间的起始和最终形状,然后 Animate 会创建补间的过渡帧。

关于可变宽度工具

可变宽度工具允许您增强均匀实心笔触来创建漂亮的花式笔触。

对可变宽度笔触添加形状补间

在 Animate CC 中,使用线条工具绘制一个线条。

笔触值设置为两个像素的线条笔触
使用线条工具在舞台上绘制的一个线条笔触,其值设为两个像素。

使用“可变宽度”工具在笔触中间添加宽度(见下图)。 有关使用可变宽度工具的信息,请参阅使用可变宽度工具增强笔触

值为 68.0 像素的可变宽度笔触
使用可变宽度工具创建的可变宽度笔触,笔触值设为 68.0 像素。

在时间轴上选择另一帧(如帧 30),然后为补间创建笔触的最终形状。

添加到形状补间最后一个关键帧的最终形状
添加到形状补间最后一个关键帧的最终形状。

右键单击帧 1 到 30 之间的任一帧,选择“创建形状补间”

对可变宽度配置文件添加形状补间

Animate 还允许您对另存为可变宽度配置文件的花式笔触添加形状补间。 您可以对补间的起始形状和最终形状应用宽度配置文件,以便让 Animate 创建一个平滑的形状补间。

宽度配置文件是为便于重复利用而使用可变宽度工具创建并保存的花式笔触。 要对可变宽度配置文件添加补间形状,可执行以下操作:

在 Animate 中,使用线条工具在舞台上绘制一个线条。

值为两个像素的线条笔触
使用线条工具在舞台上绘制的一个线条笔触,其值设为两个像素。

在属性监视器中,从“宽度”下拉菜单中选择并应用一个宽度配置文件。

笔触值为 68.0 像素的可变宽度笔触
使用可变宽度工具创建的可变宽度笔触,笔触值设为 68.0 像素。

在时间轴上选择另一帧(如帧 30),然后从属性监视器的“宽度”下拉菜单中选择所需的宽度配置文件。

要将形状补间添加到选定的宽度配置文件,请右键单击帧 1 到 30 之间的任一帧,选择“创建形状补间”