跳到主要内容
中文系列课

输入（Inputs）

警告（Warning）：本页记录的是旧版 Inputs 体系。新项目请使用 Data Binding。

旧体系概览​

在旧版工作流中，State Machine 输入（Inputs）是运行时控制动画状态的主要方式。

输入类型：

  • Trigger（触发）
  • Number（数值）
  • Boolean（布尔）

典型操作：

  • 查询输入列表
  • 按名称获取输入
  • 设置值 / 触发

Web（legacy API）​

通常在 onLoad 后再查询输入：

const r = new rive.Rive({
  src: 'https://cdn.rive.app/animations/vehicles.riv',
  stateMachines: 'bumpy',
  onLoad: () => {
    const inputs = r.stateMachineInputs('bumpy');
    const bump = inputs.find((i) => i.name === 'bump');
    bump?.fire();
  },
});

输入类型能力：

  • Trigger：fire()
  • Number：value 读写
  • Boolean：value 读写

React（legacy path）​

可通过 useStateMachineInput 获取输入：

const { rive } = useRive({ src: 'x.riv', stateMachines: 'bumpy', autoplay: true });
const bumpInput = useStateMachineInput(rive, 'bumpy', 'bump');

bumpInput?.fire();

React Native​

新版 Runtime​

仍有部分输入 API 可用（兼容用途），但官方已建议迁移 Data Binding。

Legacy Runtime​

通常不直接获取输入实例，而是通过 ref 直接调用：

riveRef.current?.setInputState('State Machine 1', 'level', 5);
riveRef.current?.fireState('State Machine 1', 'buttonPressed');

Flutter​

通过 StateMachine 访问输入：

final stateMachine = controller.stateMachine;
final trigger = stateMachine.trigger('myTrigger');
final n = stateMachine.number('myNumber');
final b = stateMachine.boolean('myBool');

trigger?.fire();
n?.value = 42;
b?.value = true;

使用完可 dispose() 输入对象。

Apple / Android（legacy）​

两端均提供按输入名写值/触发的 API（方法名略有差异），语义与上面一致。

Nested Inputs（旧能力）​

可通过 path 控制组件内部输入（而非主 artboard 输入）。

示例路径： Volume Molecule/FX Component

注意事项：

  1. 使用层级唯一名称（hierarchy unique name）
  2. 组件要在编辑器中标记导出
  3. 名称不要包含 /

迁移建议（Inputs -> Data Binding）​

  • Number/Boolean Input → Number/Boolean 属性
  • Trigger Input → Trigger 属性
  • Nested Input path → Data Binding path

相关：