LanguageРусский
Принцип 07 · Как это работает
От .exode к вашему приложению: как создаются и воспроизводятся файлы ExodeUI
Один открытый файл от проектирования до производства. Среда выполнения воспроизводит его, им управляет ваш код.
What is От .exode in ExodeUI?
ExodeUI не генерирует исходный код React, Swift или Flutter. Вы проектируете открытый файл .exode JSON; для производства его можно скомпилировать в файл .bexode меньшего размера, и пакет времени выполнения для вашей платформы воспроизведет его на холсте. Ваш код управляет им, устанавливая входные данные и прослушивая события. Делаем ExodeUI.
Базовая архитектура
Почему инженеры и дизайнеры выбирают ExodeUI
Design, logic and motion in one file that runs inside your app.
Файл с открытым исходным кодом
Файл .exode — JSON, который описывает слои, состояния, переходы, пружины, входные данные и события. Разработчики могут его читать, а инструменты искусственного интеллекта — редактировать.
Собрано для производства
Ту же сцену можно скомпилировать в файл .bexode меньшего размера и отправить в ваше приложение.
Время выполнения для каждой платформы
Пакеты времени выполнения для React, Vue, Svelte, Angular, Solid, React Native, SwiftUI и Flutter воспроизводят файл.
Управляется вашим кодом
Установите логические значения, числа и триггеры из состояния приложения и прослушивайте события, которые анимация отправляет обратно.
Объективная оценка
Как ExodeUI сравнивается с Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Разработанный файл является отправленным файлом, поэтому при передаче ничего не теряется.
- Состояния и логика путешествуют вместе с анимацией
- Один файл работает в восьми средах выполнения платформы.
- Дизайнеры могут изменять время без изменения кода, если входные данные и события остаются прежними.
Rebuilding motion by hand
- Разработчики воссоздают каждый переход по эталону.
- Каждое изменение дизайна требует еще одного изменения кода.
- Каждая платформа перестраивается отдельно
- Написанный вручную код дает полный контроль и не требует дополнительного времени выполнения, что иногда является правильным компромиссом.
Передача разработке
Как использовать в коде
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
// Playing an ExodeUI file in React with the exodeui package.
// The animation, its states and springs live in save-button.exode;
// your code only sets inputs and listens for events.
import { useEffect } from 'react';
import { ExodeUICanvas, useExodeUI } from 'exodeui';
import saveButton from './save-button.exode'; // read by exodePlugin() from 'exodeui/vite-plugin'
export function SaveButton({ saving, onSave }) {
const { setEngine, setInputBool } = useExodeUI();
// Drive the "Loading" state from app data
useEffect(() => {
setInputBool('Loading', saving);
}, [saving, setInputBool]);
return (
<div style={{ width: 220, height: 64 }}>
<ExodeUICanvas
artboard={saveButton}
onReady={setEngine}
onTrigger={(name) => {
if (name === 'Pressed') onSave();
}}
/>
</div>
);
}Что происходит между редактором и вашим приложением
Компонент ExodeUI проходит четыре этапа:
- 1. Дизайн: вы создаете слои, состояния, переходы, пружины и логику в браузере или настольном редакторе. Работа сохраняется как открытый файл .exode JSON.
- 2. Компиляция (необязательно): для производства сцену можно скомпилировать в файл .bexode меньшего размера.
- 3. Игра: пакет времени выполнения для вашей платформы загружает файл и рисует его на холсте.
- 4. Управление: ваш код устанавливает входные данные, такие как логическое значение загрузки или триггер успеха, и прослушивает события, отправляемые анимацией.
Когда рукописный код — лучший выбор
Время выполнения не всегда подходит. Для одного затухания или простого наведения CSS или такая библиотека, как Motion, легче и не требует дополнительного пакета. ExodeUI наиболее полезен для компонентов с несколькими состояниями, физикой или логикой, которые дизайнеры хотят постоянно редактировать.
Topic Cluster Network
Связанные понятия и инструменты
Остались вопросы?
Частые вопросы
Создавайте живые компоненты с настоящим движением.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.