LanguageSvenska
Pelare 07 · Hur det går
Från .exode till din app: Hur ExodeUI-filer byggs och spelas
En öppen fil från design till produktion. En runtime spelar den, din kod driver den.
What is Från .exode in ExodeUI?
ExodeUI genererar inte React, Swift eller Flutter källkod. Du designar i en öppen .exode JSON-fil; för produktion kan den kompileras till en mindre .bexode-fil, och ett körtidspaket för ditt ramverk spelar upp den på en duk. Din kod styr den genom att ställa in ingångar och lyssna efter händelser. Vi gör ExodeUI.
Kärnarkitektur
Varför ingenjörer och designers väljer ExodeUI
Design, logic and motion in one file that runs inside your app.
Öppna källfilen
.exode-filen är JSON som beskriver lager, tillstånd, övergångar, fjädrar, ingångar och händelser. Utvecklare kan läsa den och AI-verktyg kan redigera den.
Sammanställd för produktion
Samma scen kan kompileras till en mindre .bexode-fil för att skickas i din app.
Körtid per ramverk
Runtime-paket för React, Vue, Svelte, Angular, Solid, React Native, SwiftUI och Flutter spelar upp filen.
Styrs av din kod
Ställ in booleaner, siffror och utlösare från appstatus och lyssna efter händelser som animeringen skickar tillbaka.
Objektiv utvärdering
Hur ExodeUI jämförs med Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Den designade filen är den skickade filen, så ingenting går förlorat vid handoff
- Stater och logik resor med animationen
- En fil fungerar över åtta ramverkskörtider
- Designers kan ändra timing utan kodändring, om indata och händelser förblir desamma
Rebuilding motion by hand
- Utvecklare återskapar varje övergång från en referens
- Varje designändring behöver ytterligare en kodändring
- Varje plattform byggs om separat
- Handskriven kod ger full kontroll och ingen extra körtid, vilket ibland är den rätta avvägningen
Utvecklare Handoff
Använder den i din kod
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>
);
}Vad händer mellan redigeraren och din app
En ExodeUI-komponent går igenom fyra steg:
- 1. Design: du bygger lager, tillstånd, övergångar, fjädrar och logik i webbläsaren eller skrivbordsredigeraren. Verket sparas som en öppen .exode JSON-fil.
- 2. Kompilera (valfritt): för produktion kan scenen kompileras till en mindre .bexode-fil.
- 3. Spela: ett runtime-paket för ditt ramverk laddar filen och ritar den på en duk.
- 4. Kontroll: din kod ställer in ingångar, såsom en boolean- eller en framgångstrigger, och lyssnar efter händelser som animeringen skickar.
När handskriven kod är det bättre valet
En körtid är inte alltid rätt. För en enkel toning eller en enkel hovring är CSS eller ett bibliotek som Motion lättare och behöver inget extra paket. ExodeUI är mest användbar för komponenter med flera tillstånd, fysik eller logik som designers vill fortsätta redigera.
Topic Cluster Network
Utforska anslutna koncept och verktyg
Har du frågor?
Vanliga frågor
Bygg levande komponenter med verklig rörelse.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.