在高级模式下制作动画

“高级”模式时间轴

在高级模式下,您可以在时间轴上添加关键帧来指明动画的起点和终点,借此为各个元素添加动画效果。您只需在具体关键帧处修改元素,Google Web Designer 即会创建过渡动画。

关键帧之间的间隔(即“跨距”)决定了每个动画的时长。例如,如果想加快动画速度,您应该缩短关键帧之间的间隔。通过加/减速选项,您可以更改动画转换时的加速和减速情况。

要在高级模式下为元素添加动画效果,请执行以下操作:

  1. 右键点击时间轴并选择插入关键帧,以添加关键帧
  2. 根据您希望元素在动画结束时的状态来更改元素的属性。例如,您可以更改元素的位置、颜色或不透明度,甚至可以更改所有这三个属性。

您可以添加更多关键帧,将同一个元素在多个跨距的动画串联起来。如果您希望相应元素再次呈现动画效果之前先在一段时间内保持不变,则可以添加一个关键帧,但不更改任何属性。

示例

上方的动画使用了 4 个关键帧,动画效果依次为:图片以淡入方式进入可视区域、暂停,然后向左滑动。

  1. 第一个关键帧设置元素在动画开始处的状态。在本例中,图片的不透明度设为了 0,因此不可见。
  2. 在第二个关键帧,元素的不透明度设为了 1 (100%)。图片在前 1 秒的跨距内以淡入方式进入可视区域。
  3. 在第三个关键帧,元素的属性没有任何更改(和前一个关键帧相比)。在这半秒内未发生任何动画,因此图片保持不变。
  4. 在最后一个关键帧,元素的位置发生了变化,使图片的右半部分显示在场景中。图片向左滑动到相应位置,此过程用时 1 秒。

要查看针对某个关键帧指定的属性,请右键点击该关键帧,然后从弹出式菜单中选择动画属性

如何添加关键帧

您可以通过多种方式添加关键帧。首先,请在时间轴上选择您要添加动画效果的元素所在的层,然后将进度条指针移动到您想要添加关键帧的位置。您可以选择多个层,方法是按住 Ctrl/ 进行选择。然后,请使用以下方法之一添加关键帧:

  • 右键点击时间轴,然后从弹出式菜单中选择插入关键帧
  • F6
  • 从“修改”菜单中依次选择时间轴 > 添加关键帧

在您更改动画元素的属性时,如果进度条指针所在的位置没有关键帧,Google Web Designer 会自动在该位置添加一个关键帧。

时间轴工作区的长度

如果您想添加超出时间轴末端的关键帧,则可以延长时间轴工作区的长度。例如,默认长度为 12 秒,但您可能想要在 15 秒处添加关键帧。要更改时间轴工作区的长度,请执行以下操作:

  1. 点击时间轴顶部的长度指示器。

  2. 输入新的时间轴长度(以秒为单位)。最小值是 12 秒。
  3. Enter 键。

时间轴工作区的长度必须足够完整呈现您的动画。未使用的时间轴部分并不会影响动画播放时间。

时间轴缩放

您可以拖动时间轴右上方附近的缩放滑块,来调整时间轴的缩放比例。如果关键帧之间的距离非常近,放大时间轴可能会有助于操作。缩放比例仅会更改时间轴视图,不会影响任何动画的时间。

如果您要更改包含多个关键帧的动画的时长,则可以调整多个跨距,让它们按比例延长或缩短。

该内容对您有帮助吗?
您有什么改进建议?

需要更多帮助?

登录可获取更多支持选项,以便快速解决您的问题