LanguageDeutsch
Säule 07 · Wie es läuft
Von .exode zu Ihrer App: Wie ExodeUI-Dateien erstellt und abgespielt werden
Eine offene Datei vom Entwurf bis zur Produktion. Eine Laufzeit spielt es ab, Ihr Code steuert es.
What is Von .exode in ExodeUI?
ExodeUI generiert keinen React-, Swift- oder Flutter-Quellcode. Sie entwerfen in einer geöffneten .exode JSON-Datei; Für die Produktion kann es in eine kleinere .bexode-Datei kompiliert werden und ein Laufzeitpaket für Ihr Framework spielt es auf einer Leinwand ab. Ihr Code steuert dies, indem er Eingaben festlegt und auf Ereignisse wartet. Wir stellen ExodeUI her.
Kernarchitektur
Warum Entwickler und Designer ExodeUI wählen
Design, logic and motion in one file that runs inside your app.
Open-Source-Datei
Die .exode-Datei ist JSON und beschreibt Schichten, Zustände, Übergänge, Federn, Eingaben und Ereignisse. Entwickler können es lesen und KI-Tools können es bearbeiten.
Für die Produktion zusammengestellt
Dieselbe Szene kann in eine kleinere .bexode-Datei kompiliert werden, um sie in Ihrer App zu versenden.
Laufzeit pro Framework
Laufzeitpakete für React, Vue, Svelte, Angular, Solid, React Native, SwiftUI und Flutter spielen die Datei ab.
Gesteuert durch Ihren Code
Legen Sie boolesche Werte, Zahlen und Auslöser aus dem App-Status fest und warten Sie auf Ereignisse, die die Animation zurücksendet.
Objektive Bewertung
Wie ExodeUI abschneidet gegen Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Die entworfene Datei ist die versendete Datei, sodass bei der Übergabe nichts verloren geht
- Zustände und Logik reisen mit der Animation
- Eine Datei funktioniert über acht Framework-Laufzeiten hinweg
- Designer können das Timing ohne Codeänderung ändern, wenn Eingaben und Ereignisse gleich bleiben
Rebuilding motion by hand
- Entwickler erstellen jeden Übergang anhand einer Referenz neu
- Jede Designänderung erfordert eine weitere Codeänderung
- Jede Plattform wird separat umgebaut
- Handgeschriebener Code bietet volle Kontrolle und keine zusätzliche Laufzeit, was manchmal der richtige Kompromiss ist
Übergabe an die Entwicklung
So nutzt du es im Code
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>
);
}Was passiert zwischen dem Editor und Ihrer App?
Eine ExodeUI-Komponente durchläuft vier Schritte:
- 1. Design: Sie erstellen Ebenen, Zustände, Übergänge, Federn und Logik im Browser oder Desktop-Editor. Die Arbeit wird als geöffnete .exode JSON-Datei gespeichert.
- 2. Kompilieren (optional): Für die Produktion kann die Szene in eine kleinere .bexode-Datei kompiliert werden.
- 3. Abspielen: Ein Laufzeitpaket für Ihr Framework lädt die Datei und zeichnet sie auf einer Leinwand.
- 4. Kontrolle: Ihr Code legt Eingaben fest, z. B. einen booleschen Wert „Laden“ oder einen Erfolgsauslöser, und wartet auf Ereignisse, die die Animation sendet.
Wenn handgeschriebener Code die bessere Wahl ist
Eine Laufzeit stimmt nicht immer. Für einen einzelnen Fade oder einen einfachen Hover ist CSS oder eine Bibliothek wie Motion leichter und benötigt kein zusätzliches Paket. ExodeUI ist am nützlichsten für Komponenten mit mehreren Zuständen, Physik oder Logik, die Designer weiterhin bearbeiten möchten.
Topic Cluster Network
Verwandte Konzepte und Tools
Noch Fragen?
Häufige Fragen
Lebendige Komponenten mit echter Bewegung bauen.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.