LanguageFrançais
Pilier 07 · Comment ça marche
De .exode à votre application : comment les fichiers ExodeUI sont créés et lus
Un dossier ouvert de la conception à la production. Un runtime le joue, votre code le pilote.
What is De .exode in ExodeUI?
ExodeUI ne génère pas de code source React, Swift ou Flutter. Vous concevez dans un fichier .exode JSON ouvert ; pour la production, il peut être compilé dans un fichier .bexode plus petit, et un package d'exécution pour votre framework le lit sur un canevas. Votre code le contrôle en définissant les entrées et en écoutant les événements. Nous fabriquons ExodeUI.
Architecture centrale
Pourquoi les ingénieurs et les designers choisissent ExodeUI
Design, logic and motion in one file that runs inside your app.
Fichier open source
Le fichier .exode est JSON qui décrit les couches, les états, les transitions, les ressorts, les entrées et les événements. Les développeurs peuvent le lire et les outils d’IA peuvent le modifier.
Compilé pour la production
La même scène peut être compilée dans un fichier .bexode plus petit à expédier dans votre application.
Temps d'exécution par framework
Les packages d'exécution pour React, Vue, Svelte, Angular, Solid, React Native, SwiftUI et Flutter lisent le fichier.
Contrôlé par votre code
Définissez les booléens, les nombres et les déclencheurs à partir de l'état de l'application, et écoutez les événements renvoyés par l'animation.
Évaluation objective
Comment ExodeUI se compare à Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Le fichier conçu est le fichier expédié, donc rien n'est perdu lors du transfert
- Les états et la logique voyagent avec l'animation
- Un fichier fonctionne sur huit environnements d'exécution de framework
- Les concepteurs peuvent modifier le timing sans changement de code, si les entrées et les événements restent les mêmes
Rebuilding motion by hand
- Les développeurs recréent chaque transition à partir d'une référence
- Chaque changement de conception nécessite un autre changement de code
- Chaque plateforme est reconstruite séparément
- Le code écrit à la main donne un contrôle total et aucun temps d'exécution supplémentaire, ce qui constitue parfois le bon compromis
Passage au développement
L’utiliser dans votre 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>
);
}Que se passe-t-il entre l'éditeur et votre application
Un composant ExodeUI passe par quatre étapes :
- 1. Conception : vous créez des couches, des états, des transitions, des ressorts et une logique dans le navigateur ou l'éditeur de bureau. Le travail est enregistré sous forme de fichier .exode JSON ouvert.
- 2. Compiler (facultatif) : pour la production, la scène peut être compilée dans un fichier .bexode plus petit.
- 3. Jouer : un package d'exécution pour votre framework charge le fichier et le dessine sur un canevas.
- 4. Contrôle : votre code définit les entrées, telles qu'un booléen de chargement ou un déclencheur de réussite, et écoute les événements envoyés par l'animation.
Quand le code écrit à la main est le meilleur choix
Un runtime n’est pas toujours correct. Pour un seul fondu ou un simple survol, CSS ou une bibliothèque telle que Motion est plus légère et ne nécessite aucun package supplémentaire. ExodeUI est particulièrement utile pour les composants comportant plusieurs états, physiques ou logiques que les concepteurs souhaitent continuer à éditer.
Topic Cluster Network
Explorer les concepts et outils liés
Environnement de développement de mouvement
L'idée derrière ExodeUI
Jetons de mouvement
Concevoir des jetons de mouvement du système
Utilisation de ExodeUI dans React Native
Runtime, entrées et événements
Glossaire : Compilateur de mouvements
Terminologie
Des questions ?
Questions fréquentes
Créez des composants vivants avec un vrai mouvement.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.