返回首頁
/
下載按鈕2346
正在初始化 Rive 交互...

使用文檔

指南

🙋🏻‍♂️ Rive檔案使用方式

匯入Rive編輯器中可任意編輯,按照自己的需要修改並匯出RIV檔案使用。

🎯 基本邏輯

啟動狀態機預覽後,實現點擊變化效果;進度控制時,需要手動調整綁定的狀態數據數值來實現進度控制的效果預覽;對應的進度數值達到100後會自動切換狀態進行變化。

🎁 匯出RIV時注意

如需更換自己的字體為了減少RIV檔案體積,請注意以下設定:

找到對應字體,然後在匯出設定時選擇「使用的字形」,這樣只會匯出使用了的字符,可以大大減少RIV檔案的大小。

🥳 Rive檔案使用要點

✍🏼 Rive初始化設定

stateMachines: "main" autoBind: true (其他可以不設定或者採用預設設定)

💥 綁定數據欄位

  • isHover 布林類型:滑鼠hover在按鈕上會被設定為true,不hover的時候為false。
  • isClicked 布林類型:按鈕被點擊後,值被設定為true,在點擊之前值為false。
  • progressNum 數字類型:用於控制進度變化數值,變化範圍設定0-100,值到100之後按鈕會自動變換成下一個狀態。

🚀 進階技巧與官方資源

  • 可將本案例的狀態機與欄位說明交給AI,生成相應運行時的初始化與互動程式碼範本,再按專案結構調整。
  • 若綁定無效,優先核對 stateMachines 名稱、欄位命名與類型是否一致。
  • 官方運行時文件:https://rive.app/docs/runtimes/

解鎖完整使用文檔

此文檔包含詳細的代碼實現細節、Rive 狀態機配置以及組件交互邏輯。

進度控制形態變化

下載按鈕2346

$3usd

一次性購買 · 永久訪問

解鎖案例全部工程資源:
.riv 運行時文件
.rev 工程文件
使用文檔

運行時支持

WebiOSmacOSAndroidFlutterReact NativeFramerWebflowWixDefoldUnityUnrealC++

規格參數

效果尺寸
200x70 px
.riv 運行時資源
32.5 KB
支持能力
可檢測滑鼠是否懸浮於按鈕
可檢測按鈕是否被點擊
可控制進度條進度
.rev 可編輯源碼
885.7 KB
文件中使用了以下功能
Listeners
Bones

你可能還喜歡

UI COMPONENTS
ID 1024
下載按鈕
#進度控制#形變效果
在線體驗
UI COMPONENTS
ID 7803
下載按鈕
#進度控制#形變效果
在線體驗
UI COMPONENTS
ID 5626
提交按鈕
#進度控制#形態變化
在線體驗