返回首页
/
下载按钮1024
正在初始化 Rive 交互...

使用文档

指南

🙋🏻‍♂️ rev文件使用方式

导入rive编辑器中可以任意编辑,按照自己的需要修改并导出riv文件使用

🎯 基本逻辑

启动状态机预览后,实现点击变化效果; 进度控制时,需要手动调整绑定的状态数据数值来实现进度控制的效果预览; 对应的进度数值达到100后会自动切换状态进行变化

🎁 导出riv时注意

如需更换自己的字体为了减少riv文件体积,请注意以下设置:

找到对应字体,然后在导出设置时选择Glyphs used,这样只会导出使用了的字符,可以大大减少riv文件的大小

🥳 riv文件使用要点

✍🏼 rive初始化设置

stateMachines: "main" autoBind: true (其他可以不设置或者采用默认设置)

💥 绑定数据字段

  • isHover Boolean类型 鼠标hover在按钮上会被设置为tue,不hover的时候为false
  • isClicked Boolean类型 按钮被点击后,值被设置为true,在点击之前值为false
  • progressNum Number类型 用于控制进度变化数值,变化范围设置0-100,值到100之后按钮会自动变换成下一个状态
  • endTextTrigger Trigger类型 每次点击按钮最终状态的文字就会触发一次

🚀 进阶技巧与官方资源

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

下载按钮1024

免费

登录下载

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

运行时支持

WebiOSmacOSAndroidFlutterReact NativeFramerWebflowWixDefoldUnityUnrealC++

规格参数

效果尺寸
300x120 px
.riv 运行时资源
25.7 KB
支持能力
可检测鼠标是否悬浮于按钮
可检测按钮是否被点击
可检测鼠标是否悬浮于最后状态的文字
可检测最后状态状态文字是否被点击
可控制进度条进度
.rev 可编辑源码
919.6 KB
文件中使用了以下功能
Data Binding
Listeners

你可能还喜欢

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