# Rive Interactive - 基于状态机的矢量动画 ## 概述 Rive 是一个基于状态机的动画平台，使设计人员能够创建具有复杂逻辑和运行时交互性的交互式矢量动画。与纯时间线动画工具（如 Lottie）不同，Rive 支持状态机、输入处理以及应用程序代码和动画之间的双向数据绑定。 **主要特点**： * 复杂交互逻辑的状态机系统 * ViewModel API 用于双向数据绑定 * 输入处理（布尔值、数字、触发输入） * 用于动画到代码通信的自定义事件 * 运行时属性控制（颜色、字符串、数字、枚举） * 跨平台支持（Web、React、React Native、iOS、Android、Flutter） * 带矢量图形的小文件 **何时使用此技能**： * 创建具有复杂状态转换的 UI 动画 * 构建交互式动画组件（按钮、切换开关、加载器） * 使用状态驱动动画实现类似游戏的 UI * 将实时数据绑定到动画可视化 * 创建响应用户输入的动画 * 使用设计师创建的需要运行时控制的动画 **替代方案**： * **Lottie** (lottie-animations)：用于更简单的基于时间线的动画，无需状态机 * **Framer Motion** (motion-framer)：用于具有弹簧物理特性的代码优先 React 动画 * **GSAP** (gsap-scrolltrigger)：用于具有精确控制的基于时间线的网页动画 ## 核心概念 ### 1\.状态机状态机通过状态和转换定义动画行为： * **状态** ：不同的动画状态（例如，空闲、悬停、按下） * **输入** ：控制转换的变量（布尔值、数字、触发器） * **转换** ：在状态之间移动的规则 * **Listener** : React hooks 响应状态变化 ### 2\.输入三种输入类型控制状态机行为： * **Boolean** ：开/关状态（例如，isHovered、isActive） * **数字** ：数值（例如进度、音量） * **触发器** ：一次性事件（例如，点击、提交） ### 3\.视图模型动态属性的数据绑定系统： * **字符串属性**：文本内容（例如，用户名、标题） * **数字属性**：数字数据（例如股票价格、分数） * **颜色属性**：动态颜色（十六进制值） * **枚举属性**：从预定义选项中选择 * **触发器属性**：动画事件 ### 4\.活动从动画发出的自定义事件： * **一般事件** ：自定义命名事件 * **事件属性**：附加到事件的数据 * **事件监听器** : React hooks 来处理事件 ## 常见模式 ### 模式 1：基本 Rive 动画 **用例**：在 React 中显示简单的 Rive 动画 **实施**： # 安装 npm 安装 rive-react 从“rive-react”导入 Rive；导出默认函数 SimpleAnimation() { 返回（ <河 src="动画.riv" 画板=“主” 动画=“空闲” 布局={{ 适合：“包含”，对齐：“中心” }} 样式={{宽度：'400px'，高度：'400px'}} /> ）； } **要点**： * `src`: .riv 文件的路径 * `artboard`: 显示哪个画板 * `animations`: 播放哪个动画时间线 * `layout`：动画如何适应容器 ### 模式 2：带输入的状态机控制 **用例**：根据用户交互控制动画状态 **实施**：从 'rive-react' 导入 { useRive, useStateMachineInput }; 导出默认函数InteractiveButton() { const { rive, RiveComponent } = useRive({ src: '按钮.riv', stateMachines: '按钮状态机', 自动播放：正确， }); // 获取状态机输入常量悬停输入 = useStateMachineInput( 河, '按钮状态机', '悬停', 假的）； const clickInput = useStateMachineInput( 河, '按钮状态机', '被点击', 假的）；返回（

悬停输入 && (悬停输入.value = true)} onMouseLeave={() => 悬停输入 && (悬停输入.value = false)} onClick={() => clickInput && clickInput.fire()} // 触发输入样式={{ 光标: '指针' }} >

）； } **输入类型**： * 布尔值: `input.value = true/false` * 数字：`input.value = 50` * 触发器：`input.fire()` ### 模式 3：ViewModel 数据绑定 **用例**：将应用程序数据绑定到动画属性 **实施**：导入 { useRive, useViewModel, useViewModelInstance, useViewModelInstanceString, useViewModelInstanceNumber } 来自 'rive-react'; 从 'react' 导入 { useEffect, useState }; 导出默认函数 Dashboard() { const [stockPrice, setStockPrice] = useState(150.0); const { rive, RiveComponent } = useRive({ src: '仪表板.riv', 自动播放：正确， autoBind: false, // 手动绑定 ViewModel }); // 获取ViewModel和实例 const viewModel = useViewModel(rive, { name: '仪表板' }); const viewModelInstance = useViewModelInstance(viewModel, { rive }); // 绑定属性 const { setValue: setTitle } = useViewModelInstanceString( '标题', 视图模型实例）； const { setValue: setPrice } = useViewModelInstanceNumber( '股票价格', 视图模型实例）；使用效果（（）=> { if (setTitle) setTitle('股票仪表板'); }, [setTitle]); 使用效果（（）=> { 如果（setPrice）setPrice（stockPrice）； }, [设置价格, 库存价格]); // 模拟实时更新使用效果（（）=> { 常量间隔 = setInterval(() => { setStockPrice((上一个) => 上一个 + (Math.random() - 0.5) * 10); }, 1000); 返回（）=>清除间隔（间隔）； }, []); return ; } **ViewModel 属性挂钩**： * `useViewModelInstanceString` \- 文本属性 * `useViewModelInstanceNumber` \- 数字属性 * `useViewModelInstanceColor` \- 颜色属性（十六进制） * `useViewModelInstanceEnum` \- 枚举选择 * `useViewModelInstanceTrigger` \- 动画触发器 ### 模式 4：处理 Rive 事件 **用例**：对 Rive 动画发出的事件做出反应 **实施**：从 'rive-react' 导入 { useRive, EventType, RiveEventType }; 从'react'导入{useEffect}；导出默认函数 InteractiveRating() { const { rive, RiveComponent } = useRive({ src: '评级.riv', stateMachines: '状态机 1', 自动播放：正确，自动处理事件：true， }); 使用效果（（）=> { if (!rive) 返回； const onRiveEvent = (事件) => { const eventData = event.data; if (eventData.type === RiveEventType.General) { console.log('事件：', eventData.name); // 访问事件属性 const rating = eventData.properties. rating; const 消息 = eventData.properties.message; 如果（评级 >= 4）{ alert(`感谢 ${ rating} 颗星：${message}`); } } }; rive.on(EventType.RiveEvent, onRiveEvent); 返回（）=> { rive.off(EventType.RiveEvent, onRiveEvent); }; }, [rive]); return ; } ### 模式 5：预加载 Rive 文件 **用例**：通过预加载动画优化加载时间 **实施**：从 'rive-react' 导入 { useRiveFile, useRive } ；导出默认函数 PreloadedAnimation() { const { riveFile, 状态 } = useRiveFile({ src: '大动画.riv', }); const { RiveComponent } = useRive({ riveFile: riveFile, 画板：“主要”，自动播放：正确， }); if (状态 === '正在加载') { return

加载动画...

; } if (状态 === '失败') { return

加载动画失败

; } return ; } ### 模式 6：使用 Refs 控制动画 **用例**：从父组件控制动画 **实施**：导入 { useRive, useViewModel, useViewModelInstance, useViewModelInstanceTrigger } 来自 'rive-react'; 从'react'导入{useImperativeHandle，forwardRef}； const AnimatedComponent =forwardRef((props, ref) => { const { rive, RiveComponent } = useRive({ src: '标志.riv', 自动播放：正确，自动绑定：假， }); const viewModel = useViewModel(rive, { useDefault: true }); const viewModelInstance = useViewModelInstance(viewModel, { rive }); const { 触发器： spinTrigger } = useViewModelInstanceTrigger( '触发旋转', 视图模型实例）； // 向父级公开方法 useImperativeHandle(参考, () => ({ 自旋：() => spinTrigger && spinTrigger(), 暂停：() => rive && rive.pause(), 播放： () => rive && rive.play(), })); return ; }); 导出默认函数 App() { 常量animationRef = useRef(); 返回（

）； } ### 模式 7：多属性 ViewModel 更新 **用例**：从复杂数据更新多个动画属性 **实施**：导入 { useRive, useViewModel, useViewModelInstance, useViewModelInstanceString、useViewModelInstanceNumber、 useViewModelInstanceColor } 来自 'rive-react'; 从'react'导入{useEffect}；导出默认函数 UserProfile({ user }) { const { rive, RiveComponent } = useRive({ src: '配置文件.riv', 自动播放：正确，自动绑定：假， }); const viewModel = useViewModel(rive, { useDefault: true }); const viewModelInstance = useViewModelInstance(viewModel, { rive }); // 绑定所有属性 const { setValue: setName } = useViewModelInstanceString('name', viewModelInstance); const { setValue: setScore } = useViewModelInstanceNumber('score', viewModelInstance); const { setValue: setColor } = useViewModelInstanceColor('avatarColor', viewModelInstance); 使用效果（（）=> { if (用户 && setName && setScore && setColor) { setName(用户名); setScore(用户.分数); setColor(parseInt(user.color.substring(1), 16)); // 将十六进制转换为数字 } }, [用户, setName, setScore, setColor]); return ; } ## 集成模式 ### 使用成帧器运动（运动成帧器）在 Rive 处理交互式内容时对容器进行动画处理：从'framer-motion'导入{motion}；从“rive-react”导入 Rive；导出默认函数 AnimatedCard() { 返回（ <运动.div 初始={{ 不透明度: 0, y: 20 }} 动画={{ 不透明度: 1, y: 0 }} whileHover={{ 比例: 1.05 }} > <河 src =“卡.riv” stateMachines="卡状态机" 样式={{宽度：'300px'，高度：'400px'}} /> ）； } ### 使用 GSAP ScrollTrigger (gsap-scrolltrigger) 滚动时触发 Rive 动画：从 'rive-react' 导入 { useRive, useStateMachineInput }; 从 'react' 导入 { useEffect, useRef }; 从“gsap”导入 gsap；从 'gsap/ScrollTrigger' 导入 ScrollTrigger； gsap.registerPlugin(ScrollTrigger); 导出默认函数 ScrollRive() { const containerRef = useRef(); const { rive, RiveComponent } = useRive({ src: '滚动动画.riv', stateMachines: '状态机 1', 自动播放：正确， }); const 触发器 = useStateMachineInput(rive, '状态机 1', 'trigger'); 使用效果（（）=> { if (!trigger) 返回； ScrollTrigger.create({ 触发器：containerRef.current，开始：'顶部中心'， onEnter: () => 触发.fire(), }); }, [触发]); 返回（

）； } ## 性能优化 ### 1\.使用离屏渲染器 <河 src="动画.riv" useOffscreenRenderer={true} // 更好的性能 /> ### 2\.优化 Rive 文件 **在 Rive 编辑器中**： * 将画板控制在 2MB 以下 * 使用矢量图形（尽可能避免光栅图像） * 最小化骨骼动画中的骨骼数量 * 降低状态机的复杂性 ### 3\.预加载关键动画 const { riveFile } = useRiveFile({ src: 'ritic.riv' }); // 应用程序初始化期间预加载 ### 4\.禁用自动事件处理 <河 src="动画.riv" 自动处理事件={false} // 手动控制 /> ## 常见陷阱和解决方案 ### 陷阱 1：未找到状态机输入 **问题**：`useStateMachineInput` 返回 null **解决方案**： // ❌错误：输入名称不正确 const input = useStateMachineInput(rive, '状态机', 'wrongName'); // ✅ 正确：匹配 Rive 编辑器中的确切名称 const input = useStateMachineInput(rive, '状态机', 'isHovered'); // 使用前始终检查输入是否存在如果（输入）{ 输入值=真； } ### 陷阱 2：ViewModel 属性未更新 **问题**：ViewModel 属性不更新动画 **解决方案**： // ❌ 错误：自动绑定已启用 const { rive } = useRive({ src: '仪表板.riv', 自动播放：正确， // autoBind: true (默认) }); // ✅ 正确：禁用 ViewModel 的 autoBind const { rive } = useRive({ src: '仪表板.riv', 自动播放：正确， autoBind: false, // 手动 ViewModel 控制所需 }); ### 陷阱 3：事件侦听器未触发 **问题**：Rive 事件未触发回调 **解决方案**： // ❌ 错误：缺少automaticHandleEvents const { rive } = useRive({ src: '评级.riv', stateMachines: '状态机 1', 自动播放：正确， }); // ✅ 正确：启用事件处理 const { rive } = useRive({ src: '评级.riv', stateMachines: '状态机 1', 自动播放：正确， automaticHandleEvents: true, // 事件必需 }); ## 资源 ### 官方文档 * **Rive 文档**： * **React Rive GitHub** ： * **Rive 社区** ： ### 河编辑器 * **网页编辑器** ： * **桌面应用程序**：适用于 macOS、Windows ### 学习资源 * **教程**： * **示例**： * **状态机指南** : ## 相关技能 * **lottie-animations** ：对于没有状态机的更简单的基于时间线的动画 * **motion-framer** ：用于带有手势的代码优先 React 动画 * **gsap-scrolltrigger** ：用于滚动驱动的动画 * **spline-interactive** ：用于 3D 交互式动画 ## 脚本该技能包括实用脚本： * `component_generator.py` \- 生成 Rive React 组件样板 * `viewmodel_builder.py` \- 构建 ViewModel 属性绑定从技能目录运行脚本： ./scripts/component_generator.py ./scripts/viewmodel_builder.py ## 资产入门模板和示例： * `starter_rive/` \- 完整的 React + Rive 模板 * `examples/` \- 现实世界的集成模式

丽芙互动

包含技能