LanguageČeština
Pilíř 07 · Jak to běží
Od .exode k vaší aplikaci: Jak se sestavují a přehrávají soubory ExodeUI
Jeden otevřený soubor od návrhu až po výrobu. Přehraje to běhové prostředí, řídí to váš kód.
What is Od .exode in ExodeUI?
ExodeUI negeneruje zdrojový kód React, Swift nebo Flutter. Navrhujete v otevřeném souboru .exode JSON; pro produkci jej lze zkompilovat do menšího souboru .bexode a runtime balíček pro váš rámec jej přehraje na plátně. Váš kód to řídí nastavením vstupů a nasloucháním událostem. Vyrábíme ExodeUI.
Základní architektura
Proč si inženýři a designéři vybírají ExodeUI
Design, logic and motion in one file that runs inside your app.
Otevřete zdrojový soubor
Soubor .exode je JSON, který popisuje vrstvy, stavy, přechody, pružiny, vstupy a události. Vývojáři jej mohou číst a nástroje AI jej mohou upravovat.
Sestaveno pro výrobu
Stejnou scénu lze zkompilovat do menšího souboru .bexode a odeslat ji ve vaší aplikaci.
Doba běhu na rámec
Běhové balíčky pro React, Vue, Svelte, Angular, Solid, React Native, SwiftUI a Flutter přehrají soubor.
Řízeno vaším kódem
Nastavte logické hodnoty, čísla a spouštěče ze stavu aplikace a poslouchejte události, které animace odešle zpět.
Objektivní hodnocení
Jak ExodeUI ve srovnání s Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Navržený soubor je dodaný soubor, takže při předání se nic neztratí
- Stavy a logika cestují s animací
- Jeden soubor funguje v osmi frameworku runtime
- Návrháři mohou změnit načasování bez změny kódu, pokud vstupy a události zůstanou stejné
Rebuilding motion by hand
- Vývojáři znovu vytvoří každý přechod z reference
- Každá změna designu vyžaduje další změnu kódu
- Každá platforma je přestavěna samostatně
- Ručně psaný kód poskytuje plnou kontrolu a žádné další běhové prostředí, což je někdy ten správný kompromis
Developer Handoff
Použití ve vašem kódu
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>
);
}Co se děje mezi editorem a vaší aplikací
Komponenta ExodeUI prochází čtyřmi kroky:
- 1. Design: vytváříte vrstvy, stavy, přechody, pružiny a logiku v prohlížeči nebo editoru na ploše. Práce je uložena jako otevřený soubor .exode JSON.
- 2. Kompilace (volitelné): pro produkci lze scénu zkompilovat do menšího souboru .bexode.
- 3. Play: Runtime balíček pro váš framework načte soubor a nakreslí jej na plátno.
- 4. Kontrola: váš kód nastavuje vstupy, jako je Loading boolean nebo Success trigger, a naslouchá událostem, které animace posílá.
Když je ručně psaný kód lepší volbou
Runtime není vždy správné. Pro jediné zeslabení nebo jednoduché vznášení je CSS nebo knihovna jako Motion lehčí a nepotřebuje žádný další balíček. ExodeUI je nejužitečnější pro komponenty s několika stavy, fyzikou nebo logikou, které chtějí návrháři nadále upravovat.
Topic Cluster Network
Prozkoumejte propojené koncepty a nástroje
Máte otázky?
Často kladené otázky
Vytvářejte živé komponenty skutečným pohybem.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.