Rive React 项目教程

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()} 
    />
  );
}

3. 应用案例和最佳实践

应用案例

• 登录表单动画: 使用 Rive 动画增强用户体验，例如在用户输入时播放动画。
• 鼠标跟踪动画: 创建交互式动画，响应用户的鼠标移动。

最佳实践

• 性能优化: 使用 @rive-app/react-canvas-lite 依赖，如果 Rive 图形不使用 Rive Text。
• 条件渲染: 将 useRive 的使用隔离到自己的包装组件中，以避免在条件渲染时动画重置。

4. 典型生态项目

相关项目

• Rive 官方网站: Rive 官网
• Rive 论坛: Rive 论坛
• Rive 文档: Rive 文档

社区资源

• GitHub 仓库: Rive React GitHub
• Storybook 示例: Rive React Storybook

通过这些资源，你可以更深入地了解 Rive React 的使用和社区贡献。