Controllo degli ingressi della macchina a stati ExodeUI dallo stato React
Una guida pratica per riprodurre un file ExodeUI in React con il pacchetto exodeui: impostare input booleani, numerici e trigger dallo stato React e gestire gli eventi.
Punto chiave
Installa il pacchetto exodeui, esegui il rendering del file con <ExodeUICanvas> e ottieni il motore con l'hook useExodeUI passando setEngine a onReady. Quindi chiama setInputBool, setInputNumber o fireTrigger dagli effetti e dai gestori React per guidare la macchina a stati e ascoltare gli eventi con onTrigger. Il tuo stato React rimane la fonte della verità; il file possiede la mozione.
Il modello: il tuo codice possiede i dati, il file possiede il movimento
Un file ExodeUI contiene livelli, stati, transizioni e gli input che passano da uno all'altro. Il tuo componente React decide quando questi input cambiano, in base al proprio stato. Questa divisione mantiene il codice di animazione fuori dai componenti e consente ai progettisti di modificare il movimento senza toccare React.
Impostare
Installa il runtime React con npm installa exodeui. Se usi Vite, aggiungi exodePlugin() da exodeui/vite-plugin alla tua configurazione Vite in modo che i file .exode possano essere importati direttamente; altrimenti passa un URL al file con la prop src.
- ExodeUISupporti Canvas: src (URL) o tavola da disegno (dati importati), adattamento, allineamento, riproduzione automatica, onReady, onTrigger, onInputUpdate.
- useExodeUI restituisce setEngine più setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger e getInputValue.
- I nomi degli input devono corrispondere ai nomi definiti nel file.
Booleani, numeri e trigger
Utilizza un valore booleano per uno stato che rimane attivo, ad esempio Caricamento in corso. Utilizza un numero per valori continui, ad esempio l'avanzamento da 0 a 100. Utilizza un trigger per un momento una tantum, come Success, che si attiva una volta e si reimposta. In React, imposta booleani e numeri in un effetto che dipende dallo stato e attiva i trigger nel gestore in cui si verifica l'evento.
Eventi indietro a React
Le animazioni possono anche indicare al codice che è successo qualcosa, ad esempio che è stato premuto un pulsante all'interno del file o che è terminata un'animazione di successo. Gestiscili con onTrigger, che riceve il nome del trigger e mantieni il lavoro reale, come le chiamate API, nel tuo codice React.
Test e accessibilità
Poiché il movimento è guidato dagli input, è possibile testare il lato React controllando quali input sono impostati per ciascuno stato. Mantieni pulsanti ed etichette reali nel DOM oppure utilizza il componente ExodeSEO, che può generare un livello HTML visivamente nascosto per gli screen reader. Passa un valore booleano a movimento ridotto dall'impostazione di sistema dell'utente se il tuo file ne definisce uno.
Estratto di implementazione in produzione
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>
);
}Principi chiave da ricordare
- Esegui il rendering con ExodeUICanvas e passa setEngine da useExodeUI a onReady
- Booleani per stati in corso, numeri per valori continui, trigger per momenti
- Imposta gli input dagli effetti e dai gestori React; Lo stato React rimane la fonte della verità
- Gestisci gli eventi dal file con onTrigger
- Mantieni la logica dell'app in React, il movimento nel file
Domande frequenti
Fonti
- exodeui (React runtime) — npm