LanguageRomână
Pilonul 07 · Cum funcționează
De la .exode la aplicația dvs.: Cum sunt create și redate fișierele ExodeUI
Un fișier deschis de la proiectare la producție. Un runtime îl redă, codul tău îl conduce.
What is De la in ExodeUI?
ExodeUI nu generează codul sursă React, Swift sau Flutter. Proiectați într-un fișier .exode JSON deschis; pentru producție, poate fi compilat într-un fișier .bexode mai mic, iar un pachet de rulare pentru framework-ul dvs. îl redă pe o pânză. Codul dvs. îl controlează setând intrări și ascultând evenimente. Noi facem ExodeUI.
Arhitectura de bază
De ce aleg inginerii și designerii ExodeUI
Design, logic and motion in one file that runs inside your app.
Fișier open source
Fișierul .exode este JSON care descrie straturi, stări, tranziții, arcuri, intrări și evenimente. Dezvoltatorii îl pot citi, iar instrumentele AI îl pot edita.
Compilat pentru producție
Aceeași scenă poate fi compilată într-un fișier .bexode mai mic pentru a fi livrat în aplicația dvs.
Timp de rulare per cadru
Pachetele de rulare pentru React, Vue, Svelte, Angular, Solid, React Native, SwiftUI și Flutter redă fișierul.
Controlat de codul dvs
Setați valori booleene, numere și declanșatoare din starea aplicației și ascultați evenimentele pe care animația le trimite înapoi.
Evaluare obiectivă
Cum se compară ExodeUI cu Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Fișierul proiectat este fișierul expediat, astfel încât nimic nu se pierde în transfer
- Stările și logica călătoresc cu animația
- Un fișier funcționează în opt runtime cadru
- Designerii pot schimba sincronizarea fără modificarea codului, dacă intrările și evenimentele rămân aceleași
Rebuilding motion by hand
- Dezvoltatorii recreează fiecare tranziție dintr-o referință
- Fiecare modificare de design are nevoie de o altă modificare de cod
- Fiecare platformă este reconstruită separat
- Codul scris de mână oferă control deplin și fără timp de rulare suplimentar, ceea ce este uneori compromisul potrivit
Dezvoltator Handoff
Folosindu-l în codul dvs
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>
);
}Ce se întâmplă între editor și aplicația dvs
O componentă ExodeUI parcurge patru pași:
- 1. Design: construiești straturi, stări, tranziții, arcuri și logică în browser sau editor de desktop. Lucrarea este salvată ca fișier deschis .exode JSON.
- 2. Compilare (opțional): pentru producție, scena poate fi compilată într-un fișier .bexode mai mic.
- 3. Play: un pachet runtime pentru framework-ul dvs. încarcă fișierul și îl desenează pe o pânză.
- 4. Control: codul dvs. setează intrări, cum ar fi un boolean de încărcare sau un declanșator de succes, și ascultă evenimentele pe care le trimite animația.
Când codul scris de mână este alegerea mai bună
Un timp de execuție nu este întotdeauna corect. Pentru o singură decolorare sau un simplu hover, CSS sau o bibliotecă precum Motion este mai ușoară și nu necesită pachet suplimentar. ExodeUI este cel mai util pentru componentele cu mai multe stări, fizică sau logică pe care designerii doresc să le editeze în continuare.
Topic Cluster Network
Explorați concepte și instrumente conectate
Mediul de dezvoltare a mișcării
Ideea din spatele ExodeUI
Jetoane de mișcare
Proiectați jetoane de mișcare ale sistemului
Utilizarea ExodeUI în React Native
Timp de rulare, intrări și evenimente
Glosar: Motion Compiler
Terminologie
Aveți întrebări?
Întrebări frecvente
Construiți componente vii cu mișcare reală.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.