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, който описва слоеве, състояния, преходи, пружини, входове и събития. Разработчиците могат да го четат, а AI инструментите могат да го редактират.
Компилиран за производство
Същата сцена може да бъде компилирана в по-малък .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
- Разработчиците пресъздават всеки преход от справка
- Всяка промяна на дизайна изисква друга промяна на кода
- Всяка платформа се преустройва отделно
- Ръчно написаният код дава пълен контрол и без допълнително време за изпълнение, което понякога е правилният компромис
Разработчик Handoff
Използването му във вашия код
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
Разгледайте свързаните концепции и инструменти
Среда за разработка на движение
Идеята зад ExodeUI
Жетони за движение
Проектиране на жетони за движение на системата
Използване на ExodeUI в React Native
Време на изпълнение, входове и събития
Речник: Motion Compiler
Терминология
Имате въпроси?
Често задавани въпроси
Изградете живи компоненти с реално движение.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.