LanguageEspañol
Pilar 07 · Cómo funciona
De .exode a su aplicación: cómo se crean y reproducen los archivos ExodeUI
Un archivo abierto desde el diseño hasta la producción. Un tiempo de ejecución lo reproduce, su código lo controla.
What is De .exode in ExodeUI?
ExodeUI no genera código fuente React, Swift o Flutter. Usted diseña en un archivo abierto .exode JSON; para producción, se puede compilar en un archivo .bexode más pequeño y un paquete de tiempo de ejecución para su marco lo reproduce en un lienzo. Su código lo controla configurando entradas y escuchando eventos. Hacemos ExodeUI.
Arquitectura central
Por qué ingenieros y diseñadores eligen ExodeUI
Design, logic and motion in one file that runs inside your app.
Archivo de código abierto
El archivo .exode es JSON que describe capas, estados, transiciones, resortes, entradas y eventos. Los desarrolladores pueden leerlo y las herramientas de inteligencia artificial pueden editarlo.
Compilado para producción.
La misma escena se puede compilar en un archivo .bexode más pequeño para enviarlo a su aplicación.
Tiempo de ejecución por marco
Los paquetes de tiempo de ejecución para React, Vue, Svelte, Angular, Solid, React Native, SwiftUI y Flutter reproducen el archivo.
Controlado por tu código
Establezca valores booleanos, números y activadores del estado de la aplicación, y escuche los eventos que envía la animación.
Evaluación objetiva
Cómo se compara ExodeUI con Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- El archivo diseñado es el archivo enviado, por lo que no se pierde nada en la transferencia
- Los estados y la lógica viajan con la animación.
- Un archivo funciona en ocho tiempos de ejecución del marco
- Los diseñadores pueden cambiar el tiempo sin cambiar el código, si las entradas y los eventos permanecen iguales
Rebuilding motion by hand
- Los desarrolladores recrean cada transición a partir de una referencia.
- Cada cambio de diseño necesita otro cambio de código
- Cada plataforma se reconstruye por separado.
- El código escrito a mano brinda control total y no requiere tiempo de ejecución adicional, lo que a veces es la compensación correcta.
Entrega al desarrollo
Cómo usarlo en tu código
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>
);
}¿Qué sucede entre el editor y tu aplicación?
Un componente ExodeUI pasa por cuatro pasos:
- 1. Diseño: construyes capas, estados, transiciones, resortes y lógica en el navegador o editor de escritorio. El trabajo se guarda como un archivo abierto .exode JSON.
- 2. Compilar (opcional): para producción, la escena se puede compilar en un archivo .bexode más pequeño.
- 3. Reproducir: un paquete de tiempo de ejecución para su marco carga el archivo y lo dibuja en un lienzo.
- 4. Control: su código establece entradas, como un booleano de carga o un disparador de éxito, y escucha los eventos que envía la animación.
Cuando el código escrito a mano es la mejor opción
Un tiempo de ejecución no siempre es el correcto. Para un desvanecimiento único o un simple desplazamiento, CSS o una biblioteca como Motion es más liviana y no necesita paquete adicional. ExodeUI es más útil para componentes con varios estados, física o lógica que los diseñadores quieren seguir editando.
Topic Cluster Network
Explora conceptos y herramientas relacionadas
Entorno de desarrollo de movimiento
La idea detrás de ExodeUI
Fichas de movimiento
Tokens de movimiento del sistema de diseño
Usando ExodeUI en React Native
Tiempo de ejecución, entradas y eventos.
Glosario: Compilador de movimiento
Terminología
¿Tienes preguntas?
Preguntas frecuentes
Crea componentes vivos con movimiento real.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.