LanguagePolski
Filar 07 · Jak to działa
Od .exode do Twojej aplikacji: Jak tworzone i odtwarzane są pliki ExodeUI
Jeden otwarty plik od projektu do produkcji. Środowisko wykonawcze odtwarza to, Twój kod steruje tym.
What is Od .exode in ExodeUI?
ExodeUI nie generuje kodu źródłowego React, Swift ani Flutter. Projektujesz w otwartym pliku .exode JSON; na potrzeby produkcyjne można go skompilować do mniejszego pliku .bexode, a pakiet wykonawczy dla twojego frameworka odtwarza go na płótnie. Twój kod kontroluje to, ustawiając dane wejściowe i nasłuchując zdarzeń. Wykonujemy ExodeUI.
Architektura rdzenia
Dlaczego inżynierowie i projektanci wybierają ExodeUI
Design, logic and motion in one file that runs inside your app.
Otwarty plik źródłowy
Plik .exode to JSON, który opisuje warstwy, stany, przejścia, sprężyny, dane wejściowe i zdarzenia. Programiści mogą go przeczytać, a narzędzia AI mogą go edytować.
Skompilowane do produkcji
Tę samą scenę można skompilować do mniejszego pliku .bexode i umieścić w aplikacji.
Środowisko wykonawcze na platformę
Pakiety wykonawcze dla React, Vue, Svelte, Angular, Solid, React Native, SwiftUI i Flutter odtwarzają plik.
Kontrolowane przez Twój kod
Ustaw wartości logiczne, liczby i wyzwalacze ze stanu aplikacji i nasłuchuj zdarzeń wysyłanych z powrotem przez animację.
Obiektywna ocena
Jak ExodeUI porównuje się z Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Zaprojektowany plik jest plikiem dostarczonym, więc nic nie zostaje utracone podczas przekazywania
- Stany i logika podróżują wraz z animacją
- Jeden plik działa w ośmiu środowiskach wykonawczych frameworka
- Projektanci mogą zmieniać taktowanie bez zmiany kodu, jeśli dane wejściowe i zdarzenia pozostaną takie same
Rebuilding motion by hand
- Programiści odtwarzają każde przejście na podstawie odniesienia
- Każda zmiana projektu wymaga kolejnej zmiany kodu
- Każda platforma jest przebudowywana oddzielnie
- Odręczny kod zapewnia pełną kontrolę i brak dodatkowego czasu działania, co czasami jest właściwym kompromisem
Przekazanie dewelopera
Używanie go w swoim kodzie
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>
);
}Co dzieje się pomiędzy edytorem a Twoją aplikacją
Komponent ExodeUI przechodzi przez cztery etapy:
- 1. Projektowanie: budujesz warstwy, stany, przejścia, sprężyny i logikę w przeglądarce lub edytorze komputerowym. Praca jest zapisana jako otwarty plik .exode JSON.
- 2. Kompiluj (opcjonalnie): na potrzeby produkcji scenę można skompilować do mniejszego pliku .bexode.
- 3. Odtwórz: pakiet wykonawczy dla twojego frameworka ładuje plik i rysuje go na płótnie.
- 4. Kontrola: Twój kod ustawia dane wejściowe, takie jak wartość logiczna ładowania lub wyzwalacz sukcesu, i nasłuchuje zdarzeń wysyłanych przez animację.
Kiedy odręczny kod jest lepszym wyborem
Czas wykonania nie zawsze jest odpowiedni. W przypadku pojedynczego przejścia lub prostego najechania, CSS lub biblioteka taka jak Motion jest lżejsza i nie wymaga dodatkowego pakietu. ExodeUI jest najbardziej przydatny w przypadku komponentów o kilku stanach, fizyce lub logice, które projektanci chcą ciągle edytować.
Topic Cluster Network
Poznaj połączone koncepcje i narzędzia
Masz pytania?
Często zadawane pytania
Buduj żywe komponenty za pomocą prawdziwego ruchu.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.