Ovládanie vstupov stavového stroja ExodeUI zo stavu React
Praktický sprievodca prehrávaním súboru ExodeUI v React s balíkom exodeui: nastavenie booleovských, číselných a spúšťacích vstupov zo stavu React a spracovanie udalostí.
Core Takeaway
Nainštalujte balík exodeui, vyrenderujte súbor pomocou <ExodeUICanvas> a získajte engine s hákom useExodeUI odovzdaním setEngine na onReady. Potom zavolajte setInputBool, setInputNumber alebo fireTrigger z efektov a obslužných programov React na riadenie stavového automatu a počúvajte udalosti pomocou onTrigger. Váš stav React zostáva zdrojom pravdy; spis vlastní návrh.
Model: váš kód vlastní údaje, súbor vlastní pohyb
Súbor ExodeUI obsahuje vrstvy, stavy, prechody a vstupy, ktoré medzi nimi prepínajú. Váš komponent React rozhoduje o tom, kedy sa tieto vstupy zmenia, na základe vlastného stavu. Toto rozdelenie chráni animačný kód mimo vašich komponentov a umožňuje dizajnérom meniť pohyb bez toho, aby sa dotkli React.
Nastavenie
Nainštalujte runtime React pomocou inštalácie npm exodeui. Ak používate Vite, pridajte exodePlugin() zo exodeui/vite-plugin do vašej konfigurácie Vite, aby bolo možné priamo importovať súbory .exode; inak odovzdajte URL do súboru s prop src.
- Rekvizity ExodeUICanvas: src (URL) alebo artboard (importované údaje), prispôsobenie, zarovnanie, automatické prehrávanie, onReady, onTrigger, onInputUpdate.
- useExodeUI vráti setEngine plus setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger a getInputValue.
- Názvy vstupov sa musia zhodovať s názvami definovanými v súbore.
Booleany, čísla a spúšťače
Použite boolean pre stav, ktorý zostane zapnutý, ako je napríklad Loading. Použite číslo pre spojité hodnoty, ako je postup od 0 do 100. Použite spúšťač pre jednorazový moment, ako napríklad Úspech, ktorý sa spustí raz a resetuje sa. V React nastavte booleany a čísla v efekte, ktorý závisí od stavu, a spustite spúšťače v obslužnom programe, kde sa udalosť stane.
Udalosti späť na React
Animácie tiež môžu vášmu kódu oznámiť, že sa niečo stalo, napríklad že bolo stlačené tlačidlo v súbore alebo bola dokončená úspešná animácia. Spravte ich pomocou onTrigger, ktorý dostane názov spúšťača, a ponechajte skutočnú prácu, ako sú volania API, vo svojom kóde React.
Testovanie a dostupnosť
Pretože pohyb je riadený vstupmi, môžete otestovať stranu React tak, že skontrolujete, ktoré vstupy sú nastavené pre každý stav. Ponechajte skutočné tlačidlá a štítky v DOM alebo použite komponent ExodeSEO, ktorý dokáže vygenerovať vizuálne skrytú vrstvu HTML pre čítačky obrazovky. Odovzdajte boolean so zníženým pohybom zo systémového nastavenia používateľa, ak ho váš súbor definuje.
Snippet implementácie 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>
);
}Kľúč Principle na zapamätanie
- Renderujte pomocou ExodeUICanvas a odovzdajte setEngine z useExodeUI do onReady
- Booleany pre prebiehajúce stavy, čísla pre spojité hodnoty, spúšťače pre momenty
- Nastavte vstupy z efektov a ovládačov React; Stav React zostáva zdrojom pravdy
- Spravujte udalosti zo súboru pomocou onTrigger
- Udržujte logiku aplikácie v React, pohyb v súbore
Často kladené otázky
Zdroje
- exodeui (React runtime) — npm