Rive React 项目教程

2024-09-16 16:53:45作者：申梦珏Efrain

1. 项目介绍

Rive React 是一个用于在 React 应用中集成 Rive 动画的开源库。Rive 是一个实时交互设计和动画工具，帮助团队创建和运行交互式动画。Rive React 库提供了一个 React 组件和自定义钩子，以便在 Web 应用程序中轻松集成 Rive 动画。

主要特点

React 组件: 提供一个基本的 React 组件用于显示简单的动画。
自定义钩子: 提供 useRive 钩子，允许开发者动态控制动画播放、订阅事件等。
开源: 项目源代码托管在 GitHub 上，支持社区贡献。

2. 项目快速启动

安装依赖

首先，使用 npm 安装 Rive React 库。推荐使用 @rive-app/react-canvas 依赖，除非你需要 WebGL 渲染器。

npm i --save @rive-app/react-canvas

渲染 Rive 组件

在你的 React 项目中，导入并使用 Rive 组件来显示一个简单的动画。

import Rive from '@rive-app/react-canvas';

export const Simple = () => (
  <Rive src="https://cdn.rive.app/animations/vehicles.riv" stateMachines="bumpy" />
);

使用 useRive 钩子

如果你需要更多控制，可以使用 useRive 钩子。这个钩子返回 Rive 实例和 React 组件。

import { useRive } from '@rive-app/react-canvas';

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

  return (
    <RiveComponent 
      onMouseEnter={() => rive && rive.play()} 
      onMouseLeave={() => rive && rive.pause()} 
    />
  );
}