ExodeUI-tilan konetulojen ohjaaminen React-tilasta
Käytännön opas ExodeUI-tiedoston toistamiseen React:ssä exodeui-paketilla: loogisen, numero- ja liipaisutulojen asettaminen React-tilasta ja tapahtumien käsittely.
Core Takeaway
Asenna exodeui-paketti, renderöi tiedosto komennolla <ExodeUICanvas> ja hanki moottori useExodeUI-koukun avulla siirtämällä setEngine kohtaan onReady. Kutsu sitten React-efekteistä ja käsittelijöistä setInputBool, setInputNumber tai fireTrigger ohjataksesi tilakonetta ja kuunnellaksesi tapahtumia onTriggerillä. React-tilasi pysyy totuuden lähteenä; tiedosto omistaa liikkeen.
Malli: koodisi omistaa dataa, tiedosto omistaa liikkeen
ExodeUI-tiedosto sisältää tasoja, tiloja, siirtymiä ja niiden välillä vaihtavia tuloja. React-komponentti päättää, milloin tulot muuttuvat oman tilansa perusteella. Tämä jako pitää animaatiokoodin poissa komponenteistasi ja antaa suunnittelijoille mahdollisuuden muuttaa liikettä koskematta React:ään.
Asennus
Asenna React-ajoaika npm-asennuksella exodeui. Jos käytät Vite:ää, lisää exodePlugin() exodeui/vite-pluginista Vite-kokoonpanoosi, jotta .exode-tiedostot voidaan tuoda suoraan; muussa tapauksessa välitä URL-osoite tiedostoon src-propanin kanssa.
- ExodeUICanvas-rekvisiitta: src (URL) tai piirrostaulu (tuodut tiedot), sovitus, kohdistus, automaattinen toisto, onReady, onTrigger, onInputUpdate.
- useExodeUI palauttaa setEngine plus setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger ja getInputValue.
- Syötettävien nimien on vastattava tiedostossa määritettyjä nimiä.
Boolen arvot, numerot ja liipaisimet
Käytä loogista arvoa tilalle, joka pysyy päällä, kuten Ladataan. Käytä lukua jatkuville arvoille, kuten eteneminen 0:sta 100:aan. Käytä liipaisinta kertaluonteiselle hetkelle, kuten Onnistuminen, joka käynnistyy kerran ja nollautuu. Määritä React:ssä loogiset arvot ja luvut tilasta riippuvaiseksi tehosteeksi ja laukaisee käsittelijässä, jossa tapahtuma tapahtuu.
Tapahtumat takaisin React
Animaatiot voivat myös kertoa koodillesi, että jotain tapahtui, esimerkiksi että tiedoston sisällä olevaa painiketta painettiin tai onnistunut animaatio on valmis. Käsittele niitä onTriggerillä, joka saa triggerin nimen, ja säilytä todellinen työ, kuten API-kutsut, React-koodissasi.
Testaus ja saavutettavuus
Koska liikettä ohjaavat tulot, voit testata React-puolta tarkistamalla, mitkä tulot on asetettu kullekin tilalle. Pidä oikeat painikkeet ja tarrat DOM:ssa tai käytä ExodeSEO-komponenttia, joka voi luoda visuaalisesti piilotetun HTML-kerroksen näytönlukuohjelmia varten. Välitä pienennetty liiketotuusarvo käyttäjän järjestelmäasetuksista, jos tiedostosi määrittää sellaisen.
Tuotannon toteutuskatkelma
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>
);
}Avain Principles muistettavat
- Renderöi ExodeUICanvasilla ja siirrä setEngine useExodeUI:stä onReadyyn
- Boolen arvot käynnissä oleville tiloille, numerot jatkuville arvoille, liipaisimet hetkille
- Aseta tulot React tehosteista ja käsittelijöistä; React-tila pysyy totuuden lähteenä
- Käsittele tapahtumia tiedostosta onTriggerillä
- Säilytä sovelluksen logiikka React:ssä, liike tiedostossa
Usein kysytyt kysymykset
Lähteet
- exodeui (React runtime) — npm