跳到主要内容

图形编辑器(Graph Editor)

图形编辑器把每个已设置关键帧的属性显示为一条曲线,横轴是时间,纵轴是该属性的值。时间轴显示关键帧发生在何时,图形编辑器则显示这些关键帧之间的值在做什么,因此你可以一眼看清运动的形状。

你可以沿时间和数值移动关键帧,在曲线上添加关键帧,并用 Bezier 手柄塑造三次值(Cubic Value)曲线,类似于 After Effects 中的图形编辑器。

打开图形编辑器(Opening the Graph Editor)​

点击时间轴工具栏中的图形编辑器按钮,或按 Shift + F3。图形编辑器会替换时间轴。再次点击该按钮即可返回时间轴。

你也可以在插值面板中点击 打开图形编辑器(Open graph editor)。

选择要显示的曲线(Choosing which curves to show)​

图形编辑器显示你在舞台上或在层级(Hierarchy)中选中的对象里、已设置关键帧的属性。

要只看某一个属性,在图形编辑器左侧的属性列表中点击它。按住 Shift 再点击,可以加入或移出更多属性。

值图表与速度图表(Value and Speed graphs)​

图形编辑器可以用两种方式绘制每个属性。用图形编辑器底部选项栏中的 值(Value) 与 速度(Speed) 标签切换,或按 Shift + G。

  • 值(Value) 绘制属性值随时间的变化。用它查看属性在每一时刻的位置,以及添加关键帧或更改关键帧的值。
  • 速度(Speed) 绘制值变化的快慢,单位是每秒。用它查看运动在何处加快和减慢,并塑造每个关键帧的缓入和缓出。

你也可以在时间轴选项菜单的 图表(Graph) 下选择要使用的图表。

三次与三次值(Cubic vs. Cubic Value)​

两种插值类型都会在关键帧之间绘制曲线,但只有三次值(Cubic Value)在图形编辑器里有可以拖拽的手柄。

  • 三次(Cubic) 的工作方式类似 CSS 中的三次 Bezier 缓动曲线。它塑造值随时间变化的速度,但始终精确落在你设置的关键帧值上。你在插值面板中编辑它;图形编辑器只显示这条曲线。
  • 三次值(Cubic Value) 为每个关键帧在图形编辑器中提供可拖拽的 Bezier 手柄。因为手柄同时存储时间和值,曲线可以在落到某个关键帧的值之前先超出该值。它占用的数据比三次(Cubic)略多。

这种超出是关键区别。用三次(Cubic)把某个属性从 0 动画到 0,完全不会产生运动。用三次值(Cubic Value),你可以拉动手柄,让曲线越过 0 再返回,从而即使起点和终点的值相同,也能产生真实的运动。这使三次值非常适合弹跳、预备动作以及其他需要超出最终值的效果。

提示

要将所选关键帧切换为三次值(Cubic Value),按 F9 设置缓入缓出,按 Shift + F9 设置缓入,或按 Cmd/Ctrl + Shift + F9 设置缓出。

编辑曲线(Editing curves)​

移动关键帧(Moving keys)​

上下拖拽关键帧可更改其值,左右拖拽可更改其时间。拖拽时按住 Shift,可将移动锁定在一个轴上。

要在值(Value)图表上添加关键帧,把指针悬停在曲线上,直到出现钢笔光标,然后点击。

用手柄塑造曲线(Shaping a curve with handles)​

  1. 选中要塑造的关键帧,并将其插值设为 三次值(Cubic Value)。
  2. 拖拽手柄以更改曲线。关键帧两侧的手柄互为镜像,因此曲线经过该关键帧时保持平滑。
  3. 要只移动一侧手柄、不带动另一侧,从而在方向上形成突变,拖拽时按住 Alt。

拖拽手柄时,按住 Shift 可将其锁定在一个轴上,或按 Esc 取消这次拖拽。

在速度(Speed)图表上,上下拖拽手柄会更改该关键帧处的速度,左右拖拽会更改缓动(ease),也就是手柄的影响向相邻关键帧延伸多远。

要把手柄设成精确数值,先选中它们。图形编辑器底部的选项栏会出现字段:值图表上是 值(Value) 和 缓动(Ease),速度图表上是 速度(Speed) 和 缓动(Ease)。输入一个值会应用到每一个选中的手柄,便于给多个关键帧设置相同的缓动。

自动贝塞尔(Auto Bezier)​

三次值(Cubic Value)关键帧可以自动设置手柄,使曲线平滑地穿过周围的关键帧。在插值面板中打开 应用自动贝塞尔(Apply auto bezier),并用 自动贝塞尔系数(Auto bezier coefficient) 控制曲线的强度。拖拽某个关键帧的手柄后,该关键帧的自动贝塞尔会关闭。

快捷键(Shortcuts)​

快捷键结果
Shift + 点击把关键帧或手柄加入选择
Shift + 拖拽把关键帧或手柄锁定在一个轴上
Alt + 拖拽手柄断开一个关键帧两侧手柄的镜像
Cmd/Ctrl + 拖拽关闭吸附
拖拽手柄时按 Esc取消拖拽

图形编辑器底部的选项栏有两个缩放按钮:

  • 适应(Fit)(F)缩放到使曲线进入视图。
  • 自动缩放高度(Auto-Zoom Height)(Shift + F)会持续调整垂直缩放,使曲线始终填满图表的高度。

按住 Space 并拖拽即可平移。

看完还有疑问?进群交流下!
与众多 Rive 创作者、开发者一起交流探讨与答疑解惑。
加入交流群