返回首页
/
提交按钮5626
正在初始化 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
  • progressNum Number类型 用于控制进度变化数值,变化范围设置0-100,值到100之后按钮会自动变换成下一个状态

🚀 进阶技巧与官方资源

  • 可将本案例的状态机与字段说明交给 AI,生成相应运行时的初始化与交互代码模板,再按项目结构调整
  • 若绑定无效,优先核对 stateMachines 名称、字段命名与类型是否一致
  • 官方运行时文档:https://rive.app/docs/runtimes/

解锁完整使用文档

此文档包含详细的代码实现细节、Rive 状态机配置以及组件交互逻辑。

进度控制形态变化

提交按钮5626

$3usd

一次性购买,永久使用该资源 · 永久访问

解锁案例全部工程资源:
.riv 运行时文件
.rev 工程文件
使用文档

运行时支持

WebiOSmacOSAndroidFlutterReact NativeFramerWebflowWixDefoldUnityUnrealC++

规格参数

.riv 运行时资源
586.7 KB
支持能力
可检测鼠标是否悬浮于按钮
可检测按钮是否被点击
可控制进度条进度
.rev 可编辑源码
893.3 KB
文件中使用了以下功能
Data Binding
Listeners

你可能还喜欢

UI COMPONENTS
ID 1024
下载按钮
#进度控制#形变效果
在线体验
UI COMPONENTS
ID 7803
下载按钮
#进度控制#形变效果
在线体验
UI COMPONENTS
ID 2346
下载按钮
#进度控制#形态变化
在线体验