SuperAPI AI 工具集

rive-interactive

设计与创作

查看项目

更新于 10-15 21:47

技能介绍

用途:Rive Interactive 面向需要运行时交互的矢量动画场景,区别于仅按时间轴播放的 Lottie,它通过状态机、输入和双向数据绑定,让动画能响应应用代码与用户操作。

主要能力:状态机系统支持状态、转换、监听器;输入类型包括布尔、数值和触发器;ViewModel API 提供字符串、数值、颜色、枚举、触发器等属性的双向绑定;动画可发出自定义事件供代码监听;支持 Web、React、React Native、iOS、Android、Flutter,矢量图形文件体积较小。

使用方式:React 中安装 npm install rive-react。基础用法通过 <Rive src artboard animations layout /> 播放动画;交互控制使用 useRive 与 useStateMachineInput,布尔/数值输入赋值,触发器调用 fire();数据绑定使用 useViewModel、useViewModelInstance 及 useViewModelInstanceString/Number/Color/Enum/Trigger 等钩子,并需设置 autoBind: false;事件监听需开启 automaticallyHandleEvents 并用 rive.on(EventType.RiveEvent, handler)。可用 useRiveFile 预加载,useOffscreenRenderer 优化性能。技能附带 component_generator.py 与 viewmodel_builder.py 脚本。

适用场景:复杂状态切换的 UI 动画、按钮/开关/加载器等交互组件、游戏化界面、实时数据可视化、需运行时控制的设计师动画。

限制:需先在 Rive 编辑器中制作 .riv 文件并定义状态机与 ViewModel;输入名、属性名须与编辑器完全一致,否则返回 null 或不更新;ViewModel 手动绑定必须关闭 autoBind;事件监听必须开启 automaticallyHandleEvents。官方文档见 https://rive.app/docs,React 库见 https://github.com/rive-app/rive-react。