插值（缓动）

当你在某个属性上设置两个关键帧时，这两个关键帧之间的值会自动计算出来。这称为插值。你可以自定义插值设置，从而创建截然不同的效果。

你可以通过时间轴右侧的插值面板来设置关键帧的缓动，也可以使用图形编辑器。图形编辑器可通过时间轴选项附近的快捷按钮开启。

使用插值面板

当你在时间轴上选择任意数量的关键帧时，插值面板会显示在时间轴右侧。

插值图会直观显示从所选关键帧到下一个关键帧之间，属性值如何随时间变化。其中 x 轴表示时间，y 轴表示所选属性的变化。

你可以通过选择图表上方的任意图标来选择要使用的插值类型。

线性

线性是默认的插值类型，它会让一个关键帧值到下一个关键帧值之间以恒定速率变化。

三次

三次插值使用曲线在关键帧值之间进行插值。它提供两个可拖拽的手柄，用于自定义曲线。

你可以在 Y 轴方向上将手柄拖拽到任意距离。如果将手柄拖到图表之外，图表视图会更新，以确保手柄始终保持可见。

默认的三次曲线会在第一个关键帧到下一个关键帧之间创建一条平缓曲线，使数值在开始和结束时变化较慢，在中间阶段变化最快。

保持

保持不会在关键帧之间插值。它会一直保持当前值，直到到达下一个关键帧，然后立即设置为下一个值。

弹性（Elastic）

弹性会超出目标值并振荡，然后才稳定下来。振幅（Amplitude） 控制超出多远，周期（Period） 控制多快稳定。

插值字段

预览图下方的文本字段会以数值格式表示插值。总共四个值（通常在 0 到 1 之间）表示手柄的位置——两个用于进入曲线，两个用于离开曲线。你可以通过在预览窗口中拖拽手柄来观察这些值如何变化。

如果你希望设置特定的缓动值，例如某个品牌设计语言中定义的缓动值，可以使用此字段。该字段也便于在不同文件和工具之间复制粘贴数值。

手动输入数值时，请使用逗号或空格分隔四个值。

默认插值

你可以设置默认插值，用于控制新关键帧所使用的插值方式。

设置默认插值有两种方式：

将所选关键帧设为默认

选择一个关键帧，然后在检查器中打开插值选项，并点击 Set as default。

从检查器设置默认值

取消选择舞台上的所有内容。检查器会显示新关键帧的默认插值选项。

选择你希望新关键帧默认使用的插值。

图形编辑器

Rive 的图形编辑器会直观呈现对象属性如何随时间变化。通过这个图表，我们可以编辑变化速率以及正在进行插值的数值。

启用图形编辑器

使用时间轴上的图形编辑器按钮来启用图形编辑器。你会注意到图形编辑器会替代时间轴。

请注意，只有被选中的对象才会显示在图形编辑器中。

使用图形编辑器

图形编辑器会直观表示当前插值。你可以通过两种方式在图表上编辑插值。

使用三次插值

三次插值描述的是应用在一个关键帧到下一个关键帧之间的缓动函数，类似于 CSS 中的 cubic Bezier 缓动曲线。它会塑造数值随时间变化的速度，但始终会准确落在你设置的关键帧值上。请在插值面板中调整三次曲线；图形编辑器会显示该曲线，但需要在面板中进行设置。

使用三次值

三次值会直接在图形编辑器上提供可拖拽的 Bezier 手柄，类似于 After Effects。由于 Rive 会存储每个手柄的 X 和 Y 位置，因此它比三次插值使用的数据稍多，但也让你能更精细地控制运动，包括在回到最终关键帧之前先超出某个值。

这种超出就是关键区别。三次插值只能在你设置的关键帧值之间移动，因此如果将某个属性从 0 动画到 0，就完全不会产生运动。三次值允许你拉动手柄，让曲线越过 0 再返回，从而即使起始值和结束值相同，也能产生真实的运动。这使三次值非常适合制作弹跳、预备动作以及其他需要超出最终值的效果。