從 React 狀態控制 ExodeUI 狀態機輸入
使用 exodeui 套件在 React 中播放 ExodeUI 檔案的實用指南：從 React 狀態設定布林值、數位和觸發器輸入，以及處理事件。
核心要點
安裝 exodeui 包，使用 <ExodeUICanvas> 渲染文件，並透過將 setEngine 傳遞給 onReady 來使用 useExodeUI 掛鉤獲取引擎。然後從 React 效果和處理程序呼叫 setInputBool、setInputNumber 或 fireTrigger 來驅動狀態機，並使用 onTrigger 監聽事件。你的 React 狀態仍然是事實的來源；該文件擁有該動議。
模型：你的程式碼擁有數據，檔案擁有運動
ExodeUI 檔案包含層、狀態、轉換以及在它們之間切換的輸入。您的 React 元件會根據其自身的狀態決定這些輸入何時會變更。這種分割使動畫程式碼遠離組件，並讓設計人員無需接觸 React 即可更改運動。
設定
使用 npm install 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。
- 輸入名稱必須與檔案中定義的名稱相符。
布林值、數字和觸發器
使用布林值表示保持開啟的狀態，例如「正在載入」。使用數字表示連續值，例如從 0 到 100 的進度。使用觸發器表示一次性時刻，例如 Success，它觸發一次並重置。在 React 中，根據狀態設定布林值和數字，並在事件發生的處理程序中觸發觸發器。
事件返回React
動畫還可以告訴您的程式碼發生了某些事情，例如按下了檔案內的按鈕或成功動畫完成。使用 onTrigger 處理這些，它接收觸發器名稱，並將實際工作（例如 API 呼叫）保留在 React 程式碼中。
測試和可訪問性
由於運動是由輸入驅動的，因此您可以透過檢查為每個狀態設定了哪些輸入來測試 React 側。在 DOM 中保留真實的按鈕和標籤，或使用 ExodeSEO 元件，它可以為螢幕閱讀器產生視覺上隱藏的 HTML 層。如果您的檔案定義了一個簡化運動布林值，則從使用者的系統設定傳遞一個簡化運動布林值。
生產實施片段
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>
);
}要記住的關鍵 Principle
- 使用 ExodeUICanvas 進行渲染，並將 setEngine 從 useExodeUI 傳遞到 onReady
- 布林值表示持續狀態，數字表示連續值，觸發器表示時刻
- 設定來自 React 效果和處理程序的輸入；React 狀態仍然是真相來源
- 使用 onTrigger 處理文件中的事件
- 將應用程式邏輯保留在 React 中，將動作保留在檔案中
常見問題解答
來源
- exodeui (React runtime) — npm