Управление входами конечного автомата 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 реквизиты: источник (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>
);
}Ключевые принципы
- Выполните рендеринг с помощью ExodeUICanvas и передайте setEngine из useExodeUI в onReady.
- Логические значения для текущих состояний, числа для непрерывных значений, триггеры для моментов.
- Установите входные данные от эффектов и обработчиков React; Состояние React остается источником истины
- Обработка событий из файла с помощью onTrigger
- Сохраняйте логику приложения в React, движение в файле.
Частые вопросы
Источники
- exodeui (React runtime) — npm