跳到主要内容

Rive 事件（Rive Events）

警告（Warning）：Events 为旧体系。新项目请使用 Data Binding。

旧体系用途​

Rive Events 用于在设计期定义信号，在运行时统一订阅。
事件通常包含：

  • 名称（name）
  • 类型（type）
  • 自定义属性（properties）

常见场景：

  • 动画关键节点触发业务逻辑
  • 触发音频/震动/提示
  • 打开 URL
  • 传递语义数据（如评分值）

事件类型（常见）​

  • GeneralEvent
  • OpenUrlEvent

OpenUrlEvent 通常不会自动打开链接，需要你在业务代码里自行处理。

Web​

通过 on/off 订阅 EventType.RiveEvent：

r.on(EventType.RiveEvent, (e) => {
  const data = e.data;
  if (data.type === RiveEventType.General) {
    console.log(data.name, data.properties);
  } else if (data.type === RiveEventType.OpenUrl) {
    window.open(data.url);
  }
});

React​

需使用 useRive() 拿到 rive 实例后再订阅：

useEffect(() => {
  if (!rive) return;
  const h = (e) => console.log(e.data);
  rive.on(EventType.RiveEvent, h);
  return () => rive.off(EventType.RiveEvent, h);
}, [rive]);

React Native​

新版 Runtime​

ref 上可监听事件（兼容用途），但建议迁移 Data Binding。

Legacy Runtime​

通过 onRiveEventReceived 回调接收事件。

Flutter​

在 StateMachine 上注册 listener：

stateMachine.addEventListener(_onRiveEvent);

事件可携带 properties（如 number/string/bool custom property）。

Apple / Android​

通过 delegate/listener 机制订阅。
如果要打开 URL，需要在 app 侧显式执行打开逻辑。

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

  • 事件触发语义 → Trigger property
  • 事件参数 → Number/String/Boolean 属性
  • UI 回调时机 → 属性监听流（hook/flow/callback）

相关：