LanguagePortuguês (BR)
Pilar 07 · Como funciona
Do .exode ao seu aplicativo: como os arquivos ExodeUI são criados e reproduzidos
Um arquivo aberto do design à produção. Um tempo de execução o reproduz, seu código o conduz.
What is Do .exode in ExodeUI?
ExodeUI não gera código-fonte React, Swift ou Flutter. Você projeta em um arquivo .exode JSON aberto; para produção, ele pode ser compilado em um arquivo .bexode menor e um pacote de tempo de execução para sua estrutura o reproduz em uma tela. Seu código o controla definindo entradas e ouvindo eventos. Fazemos ExodeUI.
Arquitetura central
Por que engenheiros e designers escolhem o ExodeUI
Design, logic and motion in one file that runs inside your app.
Arquivo de código aberto
O arquivo .exode é JSON que descreve camadas, estados, transições, molas, entradas e eventos. Os desenvolvedores podem lê-lo e as ferramentas de IA podem editá-lo.
Compilado para produção
A mesma cena pode ser compilada em um arquivo .bexode menor para ser enviado ao seu aplicativo.
Tempo de execução por estrutura
Pacotes de tempo de execução para React, Vue, Svelte, Angular, Solid, React Native, SwiftUI e Flutter reproduzem o arquivo.
Controlado pelo seu código
Defina booleanos, números e gatilhos do estado do aplicativo e ouça eventos que a animação envia de volta.
Avaliação objetiva
Como o ExodeUI se compara a Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- O arquivo projetado é o arquivo enviado, então nada é perdido na transferência
- Estados e lógica viajam com a animação
- Um arquivo funciona em oito ambientes de execução de estrutura
- Os designers podem alterar o tempo sem alterar o código, se as entradas e os eventos permanecerem os mesmos
Rebuilding motion by hand
- Os desenvolvedores recriam cada transição a partir de uma referência
- Cada mudança de design precisa de outra mudança de código
- Cada plataforma é reconstruída separadamente
- O código escrito à mão oferece controle total e nenhum tempo de execução extra, o que às vezes é a compensação certa
Entrega para o desenvolvimento
Como usar no seu 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>
);
}O que acontece entre o editor e seu aplicativo
Um componente ExodeUI passa por quatro etapas:
- 1. Design: você constrói camadas, estados, transições, molas e lógica no navegador ou editor de desktop. O trabalho é salvo como um arquivo .exode JSON aberto.
- 2. Compilar (opcional): para produção, a cena pode ser compilada em um arquivo .bexode menor.
- 3. Play: um pacote de tempo de execução para seu framework carrega o arquivo e desenha-o em uma tela.
- 4. Controle: seu código define entradas, como um booleano de carregamento ou um gatilho de sucesso, e escuta os eventos que a animação envia.
Quando o código escrito à mão é a melhor escolha
Um tempo de execução nem sempre está certo. Para um único fade ou um simples hover, CSS ou uma biblioteca como Motion é mais leve e não precisa de pacote extra. ExodeUI é mais útil para componentes com vários estados, físicos ou lógicos que os designers desejam continuar editando.
Topic Cluster Network
Explore conceitos e ferramentas relacionados
Ambiente de desenvolvimento de movimento
A ideia por trás do ExodeUI
Tokens de movimento
Projetar tokens de movimento do sistema
Usando ExodeUI em React Native
Tempo de execução, entradas e eventos
Glossário: Compilador de Movimento
Terminologia
Ficou com dúvidas?
Perguntas frequentes
Crie componentes vivos com movimento real.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.