LanguageItaliano
Pilastro 07 · Come funziona
Da .exode alla tua app: come vengono creati e riprodotti i file ExodeUI
Un file aperto dalla progettazione alla produzione. Un runtime lo riproduce, il tuo codice lo guida.
What is Da .exode in ExodeUI?
ExodeUI non genera codice sorgente React, Swift o Flutter. Progetti in un file .exode JSON aperto; per la produzione può essere compilato in un file .bexode più piccolo e un pacchetto runtime per il tuo framework lo riproduce su un'area di disegno. Il tuo codice lo controlla impostando gli input e ascoltando gli eventi. Facciamo ExodeUI.
Architettura centrale
Perché ingegneri e designer scelgono ExodeUI
Design, logic and motion in one file that runs inside your app.
File sorgente aperto
Il file .exode è JSON che descrive livelli, stati, transizioni, molle, input ed eventi. Gli sviluppatori possono leggerlo e gli strumenti di intelligenza artificiale possono modificarlo.
Compilato per la produzione
La stessa scena può essere compilata in un file .bexode più piccolo da includere nella tua app.
Autonomia per framework
I pacchetti runtime per React, Vue, Svelte, Angular, Solid, React Native, SwiftUI e Flutter riproducono il file.
Controllato dal tuo codice
Imposta valori booleani, numeri e trigger dallo stato dell'app e ascolta gli eventi restituiti dall'animazione.
Valutazione oggettiva
Come si confronta ExodeUI con Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Il file progettato è il file spedito, quindi nulla viene perso durante il trasferimento
- Stati e logica viaggiano con l'animazione
- Un file funziona su otto runtime del framework
- I progettisti possono modificare i tempi senza modificare il codice, se gli input e gli eventi rimangono gli stessi
Rebuilding motion by hand
- Gli sviluppatori ricreano ogni transizione da un riferimento
- Ogni modifica al design richiede un'altra modifica al codice
- Ogni piattaforma viene ricostruita separatamente
- Il codice scritto a mano offre il pieno controllo e nessun tempo di esecuzione aggiuntivo, il che a volte è il giusto compromesso
Passaggio allo sviluppo
Usarlo nel tuo codice
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>
);
}Cosa succede tra l'editor e la tua app
Un componente ExodeUI attraversa quattro passaggi:
- 1. Progettazione: costruisci livelli, stati, transizioni, molle e logica nel browser o nell'editor desktop. Il lavoro viene salvato come file .exode JSON aperto.
- 2. Compilazione (opzionale): per la produzione, la scena può essere compilata in un file .bexode più piccolo.
- 3. Riproduci: un pacchetto runtime per il tuo framework carica il file e lo disegna su un'area di disegno.
- 4. Controllo: il codice imposta gli input, come un booleano di caricamento o un trigger di successo, e ascolta gli eventi inviati dall'animazione.
Quando il codice scritto a mano è la scelta migliore
Il runtime non è sempre corretto. Per una singola dissolvenza o un semplice passaggio del mouse, CSS o una libreria come Motion sono più leggeri e non necessitano di pacchetti aggiuntivi. ExodeUI è particolarmente utile per i componenti con diversi stati, fisica o logica che i progettisti desiderano continuare a modificare.
Topic Cluster Network
Esplora concetti e strumenti collegati
Ambiente di sviluppo del movimento
L'idea alla base di ExodeUI
Segnalini di movimento
Progettare i token di movimento del sistema
Utilizzando ExodeUI in React Native
Runtime, input ed eventi
Glossario: compilatore di movimento
Terminologia
Hai domande?
Domande frequenti
Crea componenti vivi con movimento reale.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.