Керування вхідними сигналами машини стану ExodeUI зі стану React
Практичний посібник із відтворення файлу ExodeUI у React за допомогою пакета exodeui: встановлення логічних значень, чисел і тригерних входів із стану React, а також обробка подій.
Основний винос
Встановіть пакет exodeui, відтворіть файл за допомогою <ExodeUICanvas> і отримайте движок за допомогою хука useExodeUI, передавши setEngine в onReady. Потім викличте setInputBool, setInputNumber або fireTrigger з ефектів і обробників React, щоб управляти кінцевим автоматом, і прослуховувати події за допомогою onTrigger. Ваш стан React залишається джерелом істини; файлу належить рух.
Модель: ваш код володіє даними, файл володіє рухом
Файл ExodeUI містить шари, стани, переходи та вхідні дані, які перемикаються між ними. Ваш компонент React вирішує, коли ці вхідні дані змінюються, на основі власного стану. Таке поділ позбавляє код анімації від ваших компонентів і дозволяє дизайнерам змінювати рух, не торкаючись React.
Налаштування
Установіть середовище виконання React за допомогою npm install exodeui. Якщо ви використовуєте Vite, додайте exodePlugin() із exodeui/vite-plugin до конфігурації Vite, щоб файли .exode можна було імпортувати безпосередньо; інакше передайте URL-адресу файлу за допомогою властивості src.
- Реквізити ExodeUICanvas: src (URL) або артборд (імпортовані дані), підгонка, вирівнювання, автовідтворення, 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