Rive ワークフロー ガイド

Rive アニメーション ビューアをオンラインで使用する方法: `.riv` ファイルのプレビュー、ステート マシンのテスト、実行時の動作のレビュー

エクスポートされた Rive `.riv` ファイルを ToolBuddy で開き、アートボードとアニメーションを切り替え、ステート マシン入力をテストし、ランタイム イベントを検査し、よりクリーンなハンドオフを準備する方法を学びます。

読了目安 10 分 • 2026-06-19

はじめに

チームが Rive に組み込まれたインタラクティブ モーションを出荷する場合、本番コードに到達する前に、エクスポートされたランタイム ファイルをレビューするための信頼できる方法が必要です。つまり、単純な視覚的なプレビューを超えて、アートボード、アニメーション、ステート マシン、入力がどのように連携して動作するかを確認する必要があります。

ToolBuddy の Rive アニメーション ビューアは、まさにそのジョブのためのブラウザベースのワークスペースを提供します。エクスポートされた `.riv` ファイルをローカルで開き、分離されたランタイム ワーカーでプレビューを実行し、機能の編集ではなくランタイムの動作に焦点を当てたレビュー画面を維持します。

このガイドでは、不必要なセットアップを行わずにファイルのロードからステート マシンのテストおよびハンドオフに移行できるように、一般的なレビュー フローについて説明します。

エクスポートされた `.riv` ランタイム ファイルから開始します

チームが出荷または検証する予定の、エクスポートされた Rive ランタイム ファイルから始めます。ビューアは、編集可能な `.rev` ソース プロジェクト ファイルや内部バックアップではなく、`.riv` 出力用に設計されています。

`.riv` ファイルをツールにドロップするか、ファイル ピッカーから選択します。ビューアは最初に RIVE binary 署名を検証し、次に分離されたキャンバス ワーカー内でランタイム プレビューを開始するため、起動中にメイン ページの応答性が維持されます。

  • エクスポートされた `.riv` ランタイム ファイルを使用します。
  • ドラッグアンドドロップまたはファイルピッカーで読み込みます。
  • ランタイムの起動とプレビューの初期化を待ちます。

確認する必要があるアートボード、アニメーション、またはステート マシンを選択してください

ファイルが読み込まれたら、下部のコントロールを使用してアクティブなアートボード、アニメーション、またはステート マシンを切り替えます。これは、同じエクスポートに複数の UI 状態、キャラクター バリアント、またはモーション システムが含まれている場合に便利です。

純粋にタイムラインベースのレビューの場合は、特定のアニメーションに焦点を当てます。インタラクションを検証するには、関連するステート マシンに移動し、ランタイム コンテキスト パネルを表示したままにして、レビュー担当者がどの選択がアクティブであるかを正確に把握できるようにします。

  • レビューしているサーフェスに適切なアートボードを選択してください。
  • クリップレベルのタイミングチェックが必要な場合は、アニメーションを切り替えます。
  • 動作と入力検証が必要な場合は、ステート マシンを変更します。

再生、速度、レイアウトのコントロールを使用してプレゼンテーションを確認する

再生コントロールは、モーションのペーシング、一時停止、繰り返される状態遷移を確認するのに役立ちます。選択範囲がアニメーション タイムラインを公開すると、進行状況のフィードバックがアクティブなクリップに同期されたままになるため、タイミングをより正確に検査できます。

フィット、配置、スケール、速度、キャンバスの背景などのレイアウト設定により、アニメーションが製品内のどこに存在するかを簡単にシミュレートできます。これらのコントロールは、埋め込み UI レビュー、レスポンシブ配置チェック、クロスデバイス QA に特に役立ちます。

  • 速度を調整してレビューを遅くしたり加速したりします。
  • ターゲット サーフェスに一致するようにフィット、位置合わせ、スケールを変更します。
  • 実際の UI コンテキストを反映するキャンバスの背景を設定します。

ステートマシン入力をテストし、ライブランタイム動作を検査する

対話型プレビューは、運用ランタイムが受け取るのと同じ入力を操作できる場合に価値があります。ロードされたステート マシンがブール値、数値、またはトリガーを公開している場合は、それらをコントロール パネルで直接使用して、遷移とエッジ ケースをテストします。

ユーザーが対話すると、ビューアは状態のタイムラインの変更とランタイム イベントを表示できます。これにより、現在の状態が予想どおりに変化したかどうか、または入力によって予想外の遷移パスが生成されたかどうかを理解しやすくなります。

  • ブール値を切り替えて条件付き状態を確認します。
  • 数値を編集して、しきい値または範囲の動作をテストします。
  • イベント駆動型の遷移を検証するトリガーを起動します。

ハンドオフ モードとイベント レコーダーを使用してレビュー可能な出力を実現する

別のレビュー担当者にプレビューをきれいに提示したい場合は、ハンドオフ モードを有効にしてください。これにより、フィードバック セッション中に関連性の低い低信号コントロールを削減しながら、最も有用な実行時コンテキストが表示されたままになります。

イベント レコーダーは、構造化レビューの最終ステップです。これを使用して、セッション中に何が起こったかをキャプチャし、エンジニアリングのフォローアップ、QA メモ、または設計レビューのドキュメント用にローカルの JSON 概要をエクスポートします。

FAQ

このワークフローを読み終えたあとに読者がよく抱く追加の質問です。

ToolBuddy の Rive ビューアにはどのファイル タイプを読み込む必要がありますか?

エクスポートされた Rive ランタイム `.riv` ファイルを使用します。このツールは、ソース プロジェクト ファイルの編集ではなく、実行時のレビューを目的としています。

同じエクスポート内で複数のアートボードを切り替えることはできますか?

はい。エクスポートされた `.riv` ファイルに複数のアートボードが含まれている場合は、ビューア コントロールでそれらの中から選択できます。

インタラクティブな状態をテストするにはどうすればよいですか?

関連するステート マシンを選択し、公開されたブール値、数値、トリガー入力を使用して、プレビュー内で直接ランタイム動作を実行します。

イベントレコーダーは何に使用すればよいですか?

これを使用して、実行時のインタラクション、状態の変化、選択内容をキャプチャし、スクリーンショットやメモだけに頼るのではなく、構造化されたローカル JSON 概要としてレビューを共有できるようにします。