状态机播放

有关在 Rive 编辑器中设计和构建状态机的更多信息，请参考状态机概述。

Rive 状态机是一组动画状态及其之间的过渡。在运行时，观察或直接修改状态的能力有限。这是有意为之的，因为这会限制设计师在 Rive 中修改状态机而不创建破坏性变更的能力。相反，状态机通过基于数据绑定属性的过渡条件间接控制。

设计师在 Rive 编辑器中为每个画板分配默认状态机。他们可以创建多个状态机，每个代表不同的状态和过渡配置。渲染 Rive 文件和画板时，你可以选择要播放哪个状态机。如果未指定状态机，则使用该画板的默认状态机。

控制播放

状态机通过随时间「推进」来播放。这是每帧之间按帧间隔时间完成一次。例如，对于以每秒 60 帧运行的图形，状态机每帧推进大约 16.67 毫秒（1/60 秒）。这种推进会评估关键帧、过渡、数据绑定更改，并最终评估可见的画板元素，以创建随时间变化的运动效果。

此运行时提供了控制状态机是否正在播放的方法。暂停或停止时，状态机不会推进，最后一帧渲染的内容保持可见。从暂停恢复播放时，状态机从上次停止的位置继续；而从停止恢复播放时，它将从入口状态重新开始。

除了暂停/停止状态外，状态机还可能「静止」。这是一种优化，Rive 运行时检测到不会发生进一步的更改（例如，没有活动的过渡或动画）。在静止期间，状态机也会停止推进。这通过避免不必要的计算来提高性能和降低能耗。状态机通过改变其状态的外部操作（如用户输入或数据绑定更改）来解除静止。你还可以通过调用 play 强制状态机解除静止，尽管如果没有进一步的工作要做，它可能会立即重新静止。

播放状态机

自动播放状态机

要在状态机加载后立即自动播放，只需将 autoplay 设置为 true。

const r = new rive.Rive({
    src: 'https://cdn.rive.app/animations/vehicles.riv',
    canvas: document.getElementById('canvas'),
    autoplay: true,
    stateMachines: 'bumpy',
    onLoad: () => {}
});

控制状态机播放

你可以使用 play、pause 和 stop 方法手动播放和暂停状态机。

const r = new rive.Rive({
    src: 'https://cdn.rive.app/animations/vehicles.riv',
    canvas: document.getElementById('canvas'),
    stateMachines: 'bumpy',
    onLoad: () => {}
});

const handlePlay = () => {
  r.play()
}

const handlePause = () => {
  r.pause()
}

const handleStop = () => {
  r.stop()
}

reset()

要销毁当前的画板/动画/状态机实例并创建新的（可选择更改画板或 stateMachines），请使用 reset()。传入与构造函数中相同类型的选项。完整的 RiveResetParameters 字段（artboard、stateMachines、autoplay、autoBind）请参见 Rive 参数。

r.reset({
  stateMachines: 'bumpy',
  autoplay: true,
});