Riveを初期化中...
カスタム設定
使用ドキュメント
ガイド
🙋🏻♂️ Riveファイルの使用方法
Riveエディターにインポートして自由に編集し、必要に応じて変更してrivファイルをエクスポートして使用します。
🎯 基本ロジック
ステートマシンプレビューを開始後、クリック変化効果を実現;進捗制御時、バインドされたステートデータの数値を手動で調整して進捗制御効果をプレビュー;対応する進捗数値が100に達すると自動的にステートを切り替えて変化します。
🎁 rivエクスポート時の注意
独自のフォントに変更してrivファイルサイズを削減する場合、以下の設定に注意してください:
対応するフォントを見つけ、エクスポート設定で「使用されたグリフ」を選択します—これにより使用された文字のみがエクスポートされ、rivファイルサイズを大幅に削減できます。

🥳 Riveファイル使用の要点
✍🏼 Rive初期化設定
stateMachines: "main" autoBind: true (その他の設定は未設定のままかデフォルトを使用)
💥 データフィールドのバインド
- isHover ブール型:ボタン上でマウスがホバーするとtrueに設定、ホバーしない場合はfalse。
- isClicked ブール型:ボタンクリック後、値がtrueに設定、クリック前はfalse。
- progressNum 数値型:進捗変化数値を制御、範囲は0-100に設定;値が100に達するとボタンが自動的に次のステートに変化。
- endTextTrigger トリガー型:ボタンの最終ステートテキストがクリックされるたびに一度トリガー。
🚀 高度なテクニックと公式リソース
- 本ケースのステートマシンとフィールド説明をAIに提供し、対応するランタイム初期化とインタラクションコードテンプレートを生成し、プロジェクト構造に基づいて調整。
- バインドが無効な場合、まず
stateMachines名、フィールド命名、タイプの一貫性を確認。 - 公式ランタイムドキュメント:https://rive.app/docs/runtimes/
進捗管理変形効果
ダウンロードボタン1024
無料
ログインしてDL
含まれるリソース:
.riv ランタイムファイル
.rev プロジェクトファイル
使用ドキュメント
対応プラットフォーム
WebiOSmacOSAndroidFlutterReact NativeFramerWebflowWixDefoldUnityUnrealC++
仕様
アートボードサイズ
300x120 px.riv ランタイムリソース
25.7 KB機能
ボタン上にマウスがホバーしているかを検出します
ボタンがクリックされたかどうかを検出
最終状態のテキスト上にマウスがホバーしているかどうかを検出します
最終ステータステキストがクリックされたかどうかを検出します
プログレスバーの進行状況を制御可能
.rev 編集可能ソース
919.6 KB使用されている機能
Data Binding
Listeners