React ステートからの ExodeUI ステート マシン入力の制御
exodeui パッケージを使用して React で ExodeUI ファイルを再生するための実践的なガイド: React 状態からのブール値、数値、トリガー入力の設定、およびイベントの処理。
核心
exodeui パッケージをインストールし、<ExodeUICanvas> でファイルをレンダリングし、setEngine を onReady に渡して useExodeUI フックでエンジンを取得します。次に、React エフェクトとハンドラーから setInputBool、setInputNumber、または fireTrigger を呼び出してステート マシンを駆動し、onTrigger でイベントをリッスンします。 React の状態が真実の情報源であり続けます。ファイルがモーションを所有します。
モデル: コードはデータを所有し、ファイルはモーションを所有します
ExodeUI ファイルには、レイヤー、ステート、トランジション、およびそれらの間で切り替える入力が含まれています。 React コンポーネントは、自身の状態に基づいて、これらの入力がいつ変更されるかを決定します。この分割により、アニメーション コードがコンポーネントに含まれないようになり、デザイナーは React に触れることなくモーションを変更できるようになります。
設定
npm インストール exodeui を使用して React ランタイムをインストールします。 Vite を使用する場合は、exodeui/vite-plugin の exodePlugin() を Vite 構成に追加して、.exode ファイルを直接インポートできるようにします。それ以外の場合は、src プロパティを使用してファイルに URL を渡します。
- ExodeUICanvas プロパティ: src (URL) またはアートボード (インポートされたデータ)、fit、alignment、autoPlay、onReady、onTrigger、onInputUpdate。
- useExodeUI は、setEngine に加えて setInputBool、setInputNumber、setInputText、setInputNumberArray、setInputStringArray、fireTrigger、および getInputValue を返します。
- 入力名は、ファイルで定義されている名前と一致する必要があります。
ブール値、数値、トリガー
Loading など、継続する状態にはブール値を使用します。 0 から 100 までの進行状況など、連続値には数値を使用します。1 回だけ起動してリセットされる成功など、1 回限りの瞬間のトリガーを使用します。 React では、状態に依存するエフェクトにブール値と数値を設定し、イベントが発生するハンドラーでトリガーを起動します。
React に戻るイベント
アニメーションは、ファイル内のボタンが押されたことや成功アニメーションが終了したことなど、何かが起こったことをコードに伝えることもできます。トリガー名を受け取る onTrigger でこれらを処理し、API 呼び出しなどの実際の作業を React コードに保持します。
テストとアクセシビリティ
モーションは入力によって駆動されるため、各状態にどの入力が設定されているかを確認することで React 側をテストできます。 DOM 内に実際のボタンとラベルを保持するか、スクリーン リーダー用に視覚的に非表示の HTML レイヤーを生成できる ExodeSEO コンポーネントを使用します。ファイルでモーションを減らしたブール値が定義されている場合は、ユーザーのシステム設定からモーションを減らしたブール値を渡します。
実装コード例
import { useEffect } from 'react';
import { ExodeUICanvas, useExodeUI } from 'exodeui';
import saveButton from './save-button.exode'; // needs exodePlugin() from 'exodeui/vite-plugin'
export function SaveButton({ saving, progress, justSaved, onSave }) {
const { setEngine, setInputBool, setInputNumber, fireTrigger } = useExodeUI();
// Boolean: a state that stays on while saving
useEffect(() => { setInputBool('Loading', saving); }, [saving, setInputBool]);
// Number: continuous progress, 0 to 100
useEffect(() => { setInputNumber('Progress', progress); }, [progress, setInputNumber]);
// Trigger: a one-off moment
useEffect(() => { if (justSaved) fireTrigger('Success'); }, [justSaved, fireTrigger]);
return (
<div style={{ width: 240, height: 64 }}>
<ExodeUICanvas
artboard={saveButton}
onReady={setEngine}
onTrigger={(name) => { if (name === 'Pressed') onSave(); }}
/>
</div>
);
}覚えておきたい原則
- ExodeUICanvas でレンダリングし、setEngine を useExodeUI から onReady に渡します
- 進行中の状態のブール値、連続値の数値、瞬間のトリガー
- React エフェクトとハンドラーからの入力を設定します。 React 状態が真実の情報源であり続ける
- onTrigger を使用してファイルからのイベントを処理する
- アプリのロジックは React に、モーションはファイルに保持
よくある質問
出典
- exodeui (React runtime) — npm