正在初始化 Rive 交互...
使用文档
指南
🙋🏻♂️ rev文件使用方式
导入rive编辑器中可以任意编辑,按照自己的需要修改并导出riv文件使用
🎯 基本逻辑
启动状态机预览后,实现点击变化效果; 进度控制时,需要手动调整绑定的状态数据数值来实现进度控制的效果预览; 对应的进度数值达到100后会自动切换状态进行变化
🎁 导出riv时注意
如需更换自己的字体为了减少riv文件体积,请注意以下设置:
找到对应字体,然后在导出设置时选择Glyphs used,这样只会导出使用了的字符,可以大大减少riv文件的大小


🥳 riv文件使用要点
✍🏼 rive初始化设置
stateMachines: "main" autoBind: true (其他可以不设置或者采用默认设置)
💥 绑定数据字段
- isHovered Boolean类型 鼠标hover在按钮上会被设置为tue,不hover的时候为false
- isClicked Boolean类型 按钮被点击后,值被设置为true,在点击之前值为false
- progress Number类型 用于控制进度变化数值,变化范围设置0-100,值到100之后按钮会自动变换成下一个状态
🚀 进阶技巧与官方资源
- 可将本案例的状态机与字段说明交给 AI,生成相应运行时的初始化与交互代码模板,再按项目结构调整
- 若绑定无效,优先核对
stateMachines名称、字段命名与类型是否一致 - 官方运行时文档:https://rive.app/docs/runtimes/
解锁完整使用文档
此文档包含详细的代码实现细节、Rive 状态机配置以及组件交互逻辑。
进度控制形变效果
下载按钮7803
$3usd
一次性购买,永久使用该资源 · 永久访问
解锁案例全部工程资源:
.riv 运行时文件
.rev 工程文件
使用文档
运行时支持
WebiOSmacOSAndroidFlutterReact NativeFramerWebflowWixDefoldUnityUnrealC++
规格参数
效果尺寸
220x80 px.riv 运行时资源
20.4 KB支持能力
可检测鼠标是否悬浮于按钮
可检测按钮是否被点击
可控制进度与进度数值
.rev 可编辑源码
891.1 KB文件中使用了以下功能
Listeners
Data Binding
Layout