React Rive：Props变更时无法切换动画状态的问题求助

我是Rive新手，希望在React应用中添加简单动画。父组件调用SystemActive组件时，通过action prop传入状态机参数（"bumpy"或"stop"），但当prop变更时，Rive动画并未切换状态，始终播放首次加载的动画。请问如何实现prop变更时动画切换到对应状态？

原调用代码 #

<SystemActive riveRef={riveRef} action={startSpeaking? "bumpy" : "stop"} />

原Rive组件代码 #

import React, { useEffect, useState } from "react";
import Rive, { useRive, Layout, Fit, Alignment } from "@rive-app/react-canvas";
import System from "../../assets/riv/pte_chat1.riv";

const SystemActive = ({ action, riveRef }) => {
  console.log("Current Action in SystemActive:", action);

  const { RiveComponent } = useRive({
    // src: System,
    // stateMachines: action,
    src: "https://cdn.rive.app/animations/vehicles.riv",
    stateMachines: action,
    autoplay: true,
    fitCanvasToArtboardHeight: true,
    layout: new Layout({
      fit: Fit.Cover,
      alignment: Alignment.Center,
    }),
  });

  return (
    <div style={{ zIndex: 10000, width: "538px", height: "140px" }}>
      <RiveComponent />
    </div>
  );
};

export default SystemActive;

解决方法 #

问题核心是useRive初始化后不会自动响应action prop的变化，需要手动通过Rive实例控制状态切换：

1. 从useRive中获取Rive实例对象，用于手动操作动画状态
2. 用useEffect监听action prop的变化，当参数更新时切换状态机并控制播放

修改后的组件代码 #

import React, { useEffect } from "react";
import { useRive, Layout, Fit, Alignment } from "@rive-app/react-canvas";

const SystemActive = ({ action }) => {
  console.log("Current Action in SystemActive:", action);

  // 获取Rive实例和渲染组件，初始化时绑定初始状态机
  const { RiveComponent, rive } = useRive({
    src: "https://cdn.rive.app/animations/vehicles.riv",
    stateMachines: action,
    autoplay: true,
    fitCanvasToArtboardHeight: true,
    layout: new Layout({
      fit: Fit.Cover,
      alignment: Alignment.Center,
    }),
  });

  useEffect(() => {
    if (!rive) return;

    // 停止当前所有运行的状态机
    rive.stateMachines.forEach(sm => sm.stop());
    // 获取新状态机实例并启动播放
    const targetStateMachine = rive.stateMachine(action);
    if (targetStateMachine) {
      targetStateMachine.play();
    }
  }, [action, rive]);

  return (
    <div style={{ zIndex: 10000, width: "538px", height: "140px" }}>
      <RiveComponent />
    </div>
  );
};

export default SystemActive;

关键说明 #

• rive.stateMachine(action)：通过状态机名称获取对应的实例
• 先停止原有状态机再启动新的，避免多个状态机同时运行导致冲突
• useEffect的依赖数组包含action和rive，确保参数或实例就绪时触发状态切换

内容的提问来源于stack exchange，提问作者tlockhart