LanguageNorsk bokmål
Pilar 07 · Hvordan det går
Fra .exode til appen din: Hvordan ExodeUI-filer bygges og spilles
Én åpen fil fra design til produksjon. En kjøretid spiller den, koden din driver den.
What is Fra .exode in ExodeUI?
ExodeUI genererer ikke React, Swift eller Flutter kildekode. Du designer i en åpen .exode JSON-fil; for produksjon kan den kompileres til en mindre .bexode-fil, og en kjøretidspakke for rammeverket ditt spiller den på et lerret. Koden din kontrollerer den ved å angi innganger og lytte etter hendelser. Vi lager ExodeUI.
Kjernearkitektur
Hvorfor ingeniører og designere velger ExodeUI
Design, logic and motion in one file that runs inside your app.
Åpen kildefil
.exode-filen er JSON som beskriver lag, tilstander, overganger, fjærer, innganger og hendelser. Utviklere kan lese den og AI-verktøy kan redigere den.
Kompilert for produksjon
Den samme scenen kan kompileres til en mindre .bexode-fil for å sendes i appen din.
Kjøretid per rammeverk
Runtime-pakker for React, Vue, Svelte, Angular, Solid, React Native, SwiftUI og Flutter spiller av filen.
Styres av koden din
Angi booleaner, tall og utløsere fra apptilstand, og lytt etter hendelser animasjonen sender tilbake.
Objektiv evaluering
Hvordan ExodeUI sammenlignes med Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Den utformede filen er den sendte filen, så ingenting går tapt i overleveringen
- Stater og logikk reiser med animasjonen
- Én fil fungerer over åtte rammeverkkjøringer
- Designere kan endre timing uten kodeendring, hvis innganger og hendelser forblir de samme
Rebuilding motion by hand
- Utviklere gjenskaper hver overgang fra en referanse
- Hver designendring trenger en ny kodeendring
- Hver plattform bygges om separat
- Håndskrevet kode gir full kontroll og ingen ekstra kjøretid, noe som noen ganger er den rette avveiningen
Utvikler Handoff
Bruker den i koden din
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>
);
}Hva skjer mellom redaktøren og appen din
En ExodeUI-komponent går gjennom fire trinn:
- 1. Design: du bygger lag, tilstander, overganger, fjærer og logikk i nettleseren eller skrivebordsredigereren. Arbeidet lagres som en åpen .exode JSON-fil.
- 2. Kompiler (valgfritt): for produksjon kan scenen kompileres til en mindre .bexode-fil.
- 3. Spill: en kjøretidspakke for rammeverket ditt laster filen og tegner den på et lerret.
- 4. Kontroll: koden din angir innganger, for eksempel en Loading boolean eller en suksessutløser, og lytter etter hendelser animasjonen sender.
Når håndskrevet kode er det bedre valget
En kjøretid er ikke alltid riktig. For en enkelt toning eller en enkel sveving er CSS eller et bibliotek som Motion lettere og trenger ingen ekstra pakke. ExodeUI er mest nyttig for komponenter med flere tilstander, fysikk eller logikk som designere ønsker å fortsette å redigere.
Topic Cluster Network
Utforsk tilkoblede konsepter og verktøy
Har du spørsmål?
Ofte stilte spørsmål
Bygg levende komponenter med ekte bevegelse.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.