Контролиране на ExodeUI входове на State Machine от React State
Практическо ръководство за възпроизвеждане на ExodeUI файл в React с пакета exodeui: задаване на булеви, числови и тригерни входове от състояние на React и обработка на събития.
Ядро за вкъщи
Инсталирайте пакета exodeui, изобразете файла с <ExodeUICanvas> и вземете двигателя с куката useExodeUI, като подадете setEngine на onReady. След това извикайте setInputBool, setInputNumber или fireTrigger от ефекти и манипулатори на React, за да задвижите машината на състоянието и да слушате за събития с onTrigger. Вашето React състояние остава източникът на истината; файлът притежава движението.
Моделът: вашият код притежава данни, файлът притежава движение
ExodeUI файлът съдържа слоеве, състояния, преходи и входовете, които превключват между тях. Вашият компонент React решава кога тези входове се променят въз основа на собственото си състояние. Това разделяне предпазва анимационния код от вашите компоненти и позволява на дизайнерите да променят движението, без да докосват React.
Настройка
Инсталирайте React runtime с npm инсталирайте exodeui. Ако използвате Vite, добавете exodePlugin() от exodeui/vite-plugin към вашата Vite конфигурация, така че .exode файловете да могат да се импортират директно; в противен случай прехвърлете URL към файла със src prop.
- ExodeUICanvas подпори: src (URL) или артборд (импортирани данни), прилягане, подравняване, autoPlay, onReady, onTrigger, onInputUpdate.
- useExodeUI връща setEngine плюс setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger и getInputValue.
- Входящите имена трябва да съвпадат с имената, дефинирани във файла.
Булеви стойности, числа и тригери
Използвайте булево значение за състояние, което остава включено, като например Зареждане. Използвайте число за непрекъснати стойности, като например прогрес от 0 до 100. Използвайте тригер за еднократен момент, като например успех, който се задейства веднъж и се нулира. В React задайте булеви стойности и числа в ефект, който зависи от състоянието, и задействайте тригери в манипулатора, където се случва събитието.
Събития обратно към React
Анимациите също могат да кажат на кода ви, че нещо се е случило, например, че е натиснат бутон във файла или анимацията за успех е приключила. Обработвайте ги с onTrigger, който получава името на тригера, и запазете истинската работа, като API извиквания, във вашия React код.
Тестване и достъпност
Тъй като движението се задвижва от входове, можете да тествате страната на React, като проверите кои входове са зададени за всяко състояние. Съхранявайте истински бутони и етикети в DOM или използвайте компонента ExodeSEO, който може да генерира визуално скрит HTML слой за екранни четци. Подайте логическо значение за намалено движение от системната настройка на потребителя, ако вашият файл го дефинира.
Фрагмент за внедряване на продукцията
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>
);
}Ключове Principle, които трябва да запомните
- Рендирайте с ExodeUICanvas и прехвърлете setEngine от useExodeUI към onReady
- Булеви стойности за текущи състояния, числа за непрекъснати стойности, тригери за моменти
- Задайте входове от React ефекти и манипулатори; Състоянието React остава източникът на истината
- Обработвайте събития от файла с onTrigger
- Поддържайте логиката на приложението в React, движение във файла
Често задавани въпроси
Източници
- exodeui (React runtime) — npm