输入

⚠️ 已弃用：请使用数据绑定代替输入来控制 Rive 动画

控制输入

状态机输入是控制 Rive 动画交互的关键方式。你可以设置数字、布尔值和触发输入。

示例

• 设置状态机输入 (React)

输入

React 运行时提供 useStateMachineInput Hook，使获取状态机输入的过程比基础 Web 运行时简单得多。

import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

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

    const bumpInput = useStateMachineInput(rive, "bumpy", "bump");

    return (
        <RiveComponent
            style={{ height: "1000px" }}
            onClick={() => bumpInput && bumpInput.fire()}
        />
    );
}

嵌套输入

某些状态机输入可能嵌套在画板的组件层级中。你可以使用路径 API 来访问它们。

要设置上述示例中的 Volume 输入：

const {rive, RiveComponent} = useRive({...});

useEffect(() => {
  if (rive) {
    rive?.setNumberStateAtPath("volume", 80.0, "Volume Molecule/Volume Component");
  }
}, [rive]);

所有选项：

• setNumberStateAtPath(inputName: string, value: number, path: string)
• setBooleanStateAtPath(inputName: string, value: boolean, path: string)
• fireStateAtPath(inputName: string, path: string)