状态机播放

播放状态机

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

在 useRive（或默认导出的 <Rive /> 组件的 stateMachine prop）上通过 stateMachine 参数指定要播放的状态机名称。

自动播放状态机

要默认自动播放状态机，只需将 autoplay 设置为 true。

export default function Simple() {
  const { RiveComponent } = useRive({
    src: 'https://cdn.rive.app/animations/vehicles.riv',
    stateMachine: "bumpy",
    autoplay: true,
  });

  return <RiveComponent />;
}

控制状态机播放

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

export default function Simple() {
  const { rive, RiveComponent } = useRive({
    src: "https://cdn.rive.app/animations/vehicles.riv",
    stateMachine: "bumpy",
    autoplay: true,
  });

  const handlePlay = useCallback(() => {
    rive?.play();
  }, [rive]);

  const handlePause = useCallback(() => {
    rive?.pause();
  }, [rive]);

  const handleStop = useCallback(() => {
    rive?.stop();
  }, [rive]);

  return (
    <div>
      <RiveComponent />
      <div style={{ marginTop: 12 }}>
        <button onClick={handlePlay}>Play</button>
        <button onClick={handlePause}>Pause</button>
        <button onClick={handleStop}>Stop</button>
      </div>
    </div>
  );
}