LanguageDansk
Søjle 07 · Sådan kører det
Fra .exode til din app: Sådan bygges og afspilles ExodeUI-filer
Én åben fil fra design til produktion. En runtime afspiller det, din kode driver det.
What is Fra .exode in ExodeUI?
ExodeUI genererer ikke React, Swift eller Flutter kildekode. Du designer i en åben .exode JSON fil; til produktion kan den kompileres til en mindre .bexode-fil, og en runtime-pakke til dit framework afspiller den på et lærred. Din kode styrer den ved at indstille input og lytte efter begivenheder. Vi laver ExodeUI.
Kernearkitektur
Hvorfor ingeniører og designere vælger ExodeUI
Design, logic and motion in one file that runs inside your app.
Åbn kildefil
.exode-filen er JSON, der beskriver lag, tilstande, overgange, fjedre, input og hændelser. Udviklere kan læse det, og AI-værktøjer kan redigere det.
Kompileret til produktion
Den samme scene kan kompileres til en mindre .bexode-fil til at sende i din app.
Kørselstid pr. framework
Runtime-pakker til React, Vue, Svelte, Angular, Solid, React Native, SwiftUI og Flutter afspiller filen.
Styres af din kode
Indstil booleaner, tal og triggere fra apptilstand, og lyt efter begivenheder, som animationen sender tilbage.
Objektiv evaluering
Hvordan ExodeUI sammenlignes med Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Den designede fil er den afsendte fil, så intet går tabt i overdragelsen
- Stater og logik rejser med animationen
- Én fil fungerer på tværs af otte framework-runtimes
- Designere kan ændre timing uden en kodeændring, hvis input og begivenheder forbliver de samme
Rebuilding motion by hand
- Udviklere genskaber hver overgang fra en reference
- Hver designændring kræver endnu en kodeændring
- Hver platform genopbygges separat
- Håndskrevet kode giver fuld kontrol og ingen ekstra køretid, hvilket nogle gange er den rigtige afvejning
Udvikler Handoff
Brug det i din kode
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>
);
}Hvad sker der mellem editoren og din app
En ExodeUI-komponent gennemgår fire trin:
- 1. Design: du bygger lag, tilstande, overgange, fjedre og logik i browseren eller skrivebordseditoren. Værket gemmes som en åben .exode JSON-fil.
- 2. Kompiler (valgfrit): til produktion kan scenen kompileres til en mindre .bexode-fil.
- 3. Spil: en runtime-pakke til dit framework indlæser filen og tegner den på et lærred.
- 4. Kontrol: din kode indstiller input, såsom en Loading boolean eller en succes-trigger, og lytter efter begivenheder, som animationen sender.
Når håndskrevet kode er det bedre valg
En runtime er ikke altid rigtig. For en enkelt fade eller en simpel svævning er CSS eller et bibliotek som Motion lettere og behøver ingen ekstra pakke. ExodeUI er mest nyttig for komponenter med flere tilstande, fysik eller logik, som designere ønsker at blive ved med at redigere.
Topic Cluster Network
Udforsk forbundne koncepter og værktøjer
Har du spørgsmål?
Ofte stillede spørgsmål
Byg levende komponenter med ægte bevægelse.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.