Rive 事件

⚠️ 已弃用：请使用数据绑定代替事件

概述

Rive 事件允许 Rive 在动画或状态机中的特定时刻触发自定义事件，你可以在代码中监听和响应这些事件。

示例

• 星级评分示例

添加事件监听器

类似于 DOM 元素的 addEventListener() / removeEventListener() API，你将使用从 useRive Hook 返回的 rive 实例上的 on() / off() API 来订阅 Rive 事件。只需提供 RiveEvent 枚举和一个回调函数，运行时将在检测到任何 Rive 事件时调用该回调。

注意： 你必须使用 useRive() Hook 来订阅 Rive 事件。

示例用法

import { useRive, EventType, RiveEventType } from '@rive-app/canvas';
import { useCallback, useEffect } from 'react';

const MyTextComponent = () => {
const {rive, RiveComponent} = useRive({
    src: "/static-assets/star-rating.riv",
    artboard: "my-artboard-name",
    autoplay: true,
    // automaticallyHandleEvents: true, // 自动处理 OpenUrl 事件
    stateMachines: "State Machine 1",
});

const onRiveEventReceived = (riveEvent) => {
    const eventData = riveEvent.data;
    const eventProperties = eventData.properties;
    if (eventData.type === RiveEventType.General) {
    console.log("事件名称", eventData.name);
    // 添加的事件相关元数据
    console.log("评分", eventProperties.rating);
    console.log("消息", eventProperties.message);
    } else if (eventData.type === RiveEventType.OpenUrl) {
    console.log("事件名称", eventData.name);
    // 手动处理 OpenUrl 事件
    window.location.href = eventData.url;
    }
};

// 等待 rive 对象实例化后再添加 Rive 事件监听器
useEffect(() => {
    if (rive) {
    rive.on(EventType.RiveEvent, onRiveEventReceived);
    }
}, [rive]);

return (
    <RiveComponent />
);
};