正在初始化 Rive 交互...
使用文檔
指南
🙋🏻♂️ Rive檔案使用方式
匯入Rive編輯器中可以任意編輯,按照自己的需要修改並匯出riv檔案使用。
🎯 基本邏輯
啟動狀態機預覽後,實現點擊變化效果;進度控制時,需要手動調整綁定的狀態數據數值來實現進度控制的效果預覽;對應的進度數值達到100後會自動切換狀態進行變化。
🎁 匯出riv時注意
如需更換自己的字體為了減少riv檔案體積,請注意以下設定:
找到對應字體,然後在匯出設定時選擇Glyphs used,這樣只會匯出使用了的字符,可以大大減少riv檔案的大小。

🥳 Rive檔案使用要點
✍🏼 Rive初始化設定
stateMachines: "main" autoBind: true (其他可以不設定或者採用預設設定)
💥 綁定數據欄位
- isHovered 布林類型:滑鼠hover在按鈕上會被設定為true,不hover的時候為false。
- isClicked 布林類型:按鈕被點擊後,值被設定為true,在點擊之前值為false。
- progress 數字類型:用於控制進度變化數值,變化範圍設定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