跳到主要内容

插值(缓动)(Interpolation (Easing))

Youtube

当您在某个属性上设置两个关键帧时,这两个关键帧之间的值会自动计算,这就叫做插值(Interpolation)。通过调整插值设置,您可以得到截然不同的动画节奏和观感。

您可以通过以下两种方式设置关键帧缓动:

  • 时间轴右侧的插值面板(Interpolation Panel)
  • 图表编辑器(Graph Editor)(可通过时间轴附近的快捷按钮切换)

使用插值面板(Using the Interpolation Panel)

当您在时间轴中选中任意数量的关键帧时,插值面板会显示在时间轴右侧。

图片

插值图会可视化展示:从当前所选关键帧到下一个关键帧之间,属性值如何随时间变化。横轴(x)表示时间,纵轴(y)表示属性值变化。

您可以通过图表上方的图标切换插值类型。

线性(Linear)

图片

线性是默认插值类型,会以恒定速率从当前关键帧值过渡到下一个关键帧值。

三次曲线(Cubic)

图片

三次曲线插值会使用一条曲线在关键帧值之间过渡,并提供两个可拖拽手柄来调整曲线形状。

您可以在 y 轴方向自由拖动手柄。若拖出图表边界,图表视图会自动调整,保证手柄始终可见。

默认三次曲线通常会在开头和结尾变化较慢,中间变化更快。

保持(Hold)

图片

保持不会在关键帧之间插值,它会一直维持当前值,直到到达下一个关键帧时瞬间切换。

插值字段(Interpolation Field)

预览图下方有一个文本字段,用数值形式表示当前插值。共四个值(通常在 0 到 1 之间),分别表示两侧曲线手柄位置。

如果您需要精确输入品牌规范中的缓动值,可直接在这里输入。这个字段也方便在文件和工具之间复制粘贴缓动参数。

手动输入时,可使用逗号或空格分隔四个值。

图片

图表编辑器(The Graph Editor)

Youtube

Rive 的图表编辑器用于可视化对象属性随时间变化的趋势,帮助您更直观地控制变化速率与数值本身。

启用图表编辑器(Enabling the Graph Editor)

点击时间轴上的图表编辑器按钮,即可启用图表编辑器。启用后图表编辑器会替代时间轴区域。

注意:只有当前选中的对象才会显示在图表编辑器中。

使用图表编辑器(Using the Graph Editor)

图表编辑器会显示当前插值曲线。您有两种方式在图表中编辑插值:

使用三次曲线插值(Using Cubic Interpolation)

如果您在插值面板中使用的是“三次曲线插值”,仍需在插值面板中调整曲线。

使用三次曲线值(Using Cubic Value)

在插值面板中选择“三次曲线值”后,您可以直接在图表上调整插值。与普通三次曲线插值不同,三次曲线值可以直接影响动画属性的实际数值。