Ovládání vstupů stavového stroje ExodeUI ze stavu React
Praktický průvodce přehráváním souboru ExodeUI v React s balíčkem exodeui: nastavení booleovských, číselných a spouštěcích vstupů ze stavu React a zpracování událostí.
Core Takeaway
Nainstalujte balíček exodeui, vyrenderujte soubor pomocí <ExodeUICanvas> a získejte engine s háčkem useExodeUI předáním setEngine na onReady. Poté zavolejte setInputBool, setInputNumber nebo fireTrigger z efektů a obslužných rutin React, abyste řídili stavový stroj a poslouchejte události pomocí onTrigger. Váš stav React zůstává zdrojem pravdy; soubor vlastní návrh.
Model: váš kód vlastní data, soubor vlastní pohyb
Soubor ExodeUI obsahuje vrstvy, stavy, přechody a vstupy, které mezi nimi přepínají. Vaše komponenta React rozhoduje, kdy se tyto vstupy změní, na základě svého vlastního stavu. Toto rozdělení udržuje kód animace mimo vaše komponenty a umožňuje návrhářům měnit pohyb, aniž by se dotýkali React.
Nastavení
Nainstalujte runtime React pomocí npm instalace exodeui. Pokud používáte Vite, přidejte exodePlugin() z exodeui/vite-plugin do vaší konfigurace Vite, aby bylo možné soubory .exode importovat přímo; jinak předejte URL souboru s prop src.
- ExodeUICanvas rekvizity: src (URL) nebo artboard (importovaná data), přizpůsobení, zarovnání, automatické přehrávání, onReady, onTrigger, onInputUpdate.
- useExodeUI vrátí setEngine plus setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger a getInputValue.
- Názvy vstupů se musí shodovat s názvy definovanými v souboru.
Booleany, čísla a spouštěče
Pro stav, který zůstane zapnutý, jako je načítání, použijte boolean. Použijte číslo pro spojité hodnoty, jako je postup od 0 do 100. Použijte spouštěč pro jednorázový okamžik, jako je Úspěch, který se spustí jednou a resetuje se. V React nastavte booleany a čísla v efektu, který závisí na stavu, a spusťte spouštěče v obslužné rutině, kde k události dojde.
Události zpět do React
Animace také mohou vašemu kódu sdělit, že se něco stalo, například že bylo stisknuto tlačítko uvnitř souboru nebo byla dokončena úspěšná animace. Zpracujte je pomocí onTrigger, který obdrží název spouštěče, a ponechte skutečnou práci, jako jsou volání API, v kódu React.
Testování a dostupnost
Protože pohyb je řízen vstupy, můžete otestovat stranu React kontrolou, které vstupy jsou nastaveny pro jednotlivé stavy. Ponechte skutečná tlačítka a popisky v DOM, nebo použijte komponentu ExodeSEO, která dokáže vygenerovat vizuálně skrytou vrstvu HTML pro čtečky obrazovky. Předejte boolean se sníženým pohybem ze systémového nastavení uživatele, pokud ho váš soubor definuje.
Fragment implementace výroby
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>
);
}Klíč Principle k zapamatování
- Renderujte pomocí ExodeUICanvas a předejte setEngine z useExodeUI do onReady
- Booleany pro probíhající stavy, čísla pro spojité hodnoty, spouštěče pro momenty
- Nastavte vstupy z efektů a ovladačů React; Stav React zůstává zdrojem pravdy
- Zpracovávejte události ze souboru pomocí onTrigger
- Udržujte logiku aplikace v React, pohyb v souboru
Často kladené otázky
Zdroje
- exodeui (React runtime) — npm