A ExodeUI állapotú gépbemenetek vezérlése a React állapotból
Gyakorlati útmutató a ExodeUI fájl lejátszásához React-ben a exodeui csomaggal: logikai, szám- és triggerbemenetek beállítása a React állapotból, valamint események kezelése.
Core Takeaway
Telepítse a exodeui csomagot, jelenítse meg a fájlt a <ExodeUICanvas> segítségével, és szerezze be a motort a useExodeUI horoggal a setEngine átadásával az onReady-nek. Ezután hívja meg a setInputBool-t, a setInputNumber-t vagy a fireTriggert a React effektusokból és kezelőkből az állapotgép meghajtásához, és figyelje az eseményeket az onTrigger segítségével. A React állapotod az igazság forrása marad; a fájl birtokolja a mozgást.
A modell: a kódodnak az adatok, a fájlé a mozgás
A ExodeUI fájl rétegeket, állapotokat, átmeneteket és a köztük váltó bemeneteket tartalmaz. A React komponens a saját állapota alapján dönti el, hogy mikor változnak ezek a bemenetek. Ez a felosztás távol tartja az animációs kódot az összetevőktől, és lehetővé teszi a tervezők számára a mozgás megváltoztatását a React érintése nélkül.
Beállítás
Telepítse a React futási környezetet a npm telepítésével a exodeui. Ha Vite-et használ, adja hozzá az exodePlugin()-ot a exodeui/vite-plugin-ból a Vite konfigurációjához, így a .exode fájlokat közvetlenül importálhatja; ellenkező esetben adjon át egy URL-t a fájlnak az src prop segítségével.
- ExodeUICanvas kellékek: src (URL) vagy rajztábla (importált adatok), illeszkedés, igazítás, automatikus lejátszás, onReady, onTrigger, onInputUpdate.
- A useExodeUI a setEngine plusz setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger és getInputValue értékeket adja vissza.
- A bemeneti neveknek meg kell egyeznie a fájlban meghatározott nevekkel.
Logikai értékek, számok és triggerek
Használjon logikai értéket olyan állapothoz, amely bekapcsolva marad, például Betöltés. Használjon számot a folyamatos értékekhez, például 0-tól 100-ig. Használjon triggert egy egyszeri pillanathoz, például a Siker, amely egyszer aktiválódik és visszaáll. A React-ben állítson be logikai értékeket és számokat az állapottól függő effektusban, és aktiválja a triggereket abban a kezelőben, ahol az esemény történik.
Események vissza ide: React
Az animációk azt is közölhetik a kóddal, hogy valami történt, például megnyomtak egy gombot a fájlban, vagy egy sikeres animáció befejeződött. Kezelje ezeket az onTrigger segítségével, amely megkapja a trigger nevét, és tartsa meg a valódi munkát, például az API-hívásokat, a React kódjában.
Tesztelés és hozzáférhetőség
Mivel a mozgást bemenetek hajtják, tesztelheti a React oldalt azáltal, hogy ellenőrizze, mely bemenetek vannak beállítva az egyes állapotokhoz. Tartsa a valódi gombokat és címkéket a DOM-ban, vagy használja a ExodeSEO összetevőt, amely vizuálisan rejtett HTML réteget hozhat létre a képernyőolvasók számára. Adjon át egy csökkentett mozgású logikai értéket a felhasználó rendszerbeállításaiból, ha a fájl meghatároz ilyet.
Gyártási megvalósítási részlet
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>
);
}Kulcs Principle, amit meg kell jegyezni
- Rendereljen ExodeUICanvas segítségével, és adja át a setEngine-t a useExodeUI-ről az onReady-re
- Logikai értékek a folyamatban lévő állapotokhoz, számok a folytonos értékekhez, triggerek a pillanatokhoz
- Bemenetek beállítása a React effektusokról és kezelőkről; A React állapot az igazság forrása marad
- Kezelje a fájlból származó eseményeket az onTrigger segítségével
- Tartsa az alkalmazás logikáját a React-ben, a mozgást pedig a fájlban
Gyakran Ismételt Kérdések
Források
- exodeui (React runtime) — npm