跳到主要内容
中文系列课

输入

⚠️ 弃用通知： 本页文档记录了旧的输入系统。**对于新项目：**请改用数据绑定。**对于现有项目：**计划尽快从输入迁移到数据绑定。此内容仅供旧版支持参考。

有关在 Rive 中创建输入的更多信息，请参考：输入。

控制状态机输入​

一旦 Rive 文件加载并实例化后，可以查询状态机的输入，并且可以设置这些输入值，对于触发器还可以通过程序触发。

输入也可以在运行时在组件上设置，参见下方的嵌套输入。

示例​

输入​

Web 运行时提供 onLoad 回调，在 Rive 文件加载并准备好使用时运行。我们使用此回调确保在查询输入之前状态机已实例化。

<div id="button">
    <canvas id="canvas" width="1000" height="500"></canvas>
</div>
<script src="https://unpkg.com/@rive-app/[email protected]"></script>
<script>
    const button = document.getElementById('button');

    const r = new rive.Rive({
        src: 'https://cdn.rive.app/animations/vehicles.riv',
        canvas: document.getElementById('canvas'),
        autoplay: true,
        stateMachines: 'bumpy',
        onLoad: (_) => {
            // 通过状态机名称获取输入
            const inputs = r.stateMachineInputs('bumpy');
            // 找到要设置值或触发的输入
            const bumpTrigger = inputs.find(i => i.name === 'bump');
            button.onclick = () => bumpTrigger.fire();
        },
    });
</script>

我们使用 Rive 对象上的 stateMachineInputs 函数来检索输入。每个输入都有一个名称和类型。有三种类型：

  • StateMachineInputType.Trigger 具有 fire() 函数
  • StateMachineInputType.Number 具有 value 数字属性，可以 get/set 值
  • StateMachineInputType.Boolean 具有 value 布尔属性，可以 get/set 值
const inputs = r.stateMachineInputs("bumpy");
inputs.forEach((i) => {
  const inputName = i.name;
  const inputType = i.type;
  switch (inputType) {
    case rive.StateMachineInputType.Trigger:
      i.fire();
      break;
    case rive.StateMachineInputType.Number:
      i.value = 42;
      break;
    case rive.StateMachineInputType.Boolean:
      i.value = true;
      break;
  }
});

嵌套输入​

⚠️ 弃用功能： 嵌套输入是旧输入系统的一部分。**改用数据绑定**来控制运行时的组件属性。

你可以在运行时控制组件的输入。这些输入不在主画板上，而是在组件上。要设置嵌套输入，你需要知道输入在画板级别上存在的路径。

示例​

Image

⚠️

  • 使用画板的唯一层级名称，而不是画板的名称。
  • 不要包含主画板的名称。在上述示例中，路径是 Volume Molecule，而不是 Menu/Volume Molecule。
  • 确保组件在编辑器中标记为已导出，以便在运行时访问它们：

Image

你可以深入到任意多个组件层级。例如，上面显示的 Volume Molecule 画板有两个具有以下唯一层级名称的组件：

  • Volume Component
  • FX Component

一旦你深入到超过一个组件层级，路径将是由 / 分隔的唯一层级名称字符串。

Image

如果你在运行时加载 Menu 画板，并想要获取/设置 FX Component 画板上的输入，路径将是 Volume Molecule/FX Component

⚠️ 不要在组件名称中使用 /，因为这会破坏运行时的搜索功能。

要为上述示例设置 Volume 输入：

const rive = new Rive({...});
...
rive?.setNumberStateAtPath("volume", 80.0, "Volume Molecule/Volume Component");

所有选项：

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