LanguageMagyar
07. pillér · Hogyan működik
A .exode-től az alkalmazásig: A ExodeUI fájlok felépítése és lejátszása
Egy nyitott fájl a tervezéstől a gyártásig. A futtatókörnyezet lejátssza, a kódja hajtja.
What is A .exode-től in ExodeUI?
A ExodeUI nem generál React, Swift vagy Flutter forráskódot. Egy nyitott .exode JSON fájlban tervez; élesre fordítható egy kisebb .bexode fájlba, és egy futásidejű csomag a keretrendszeredhez lejátssza a vásznon. A kód a bemenetek beállításával és az események figyelésével vezérli. ExodeUI-et gyártunk.
Core Architecture
Miért választják a mérnökök és tervezők a ExodeUI
Design, logic and motion in one file that runs inside your app.
Nyílt forráskódú fájl
A .exode fájl a JSON, amely rétegeket, állapotokat, átmeneteket, rugókat, bemeneteket és eseményeket ír le. A fejlesztők elolvashatják, az AI-eszközök pedig szerkeszthetik.
Gyártásra összeállítva
Ugyanez a jelenet összeállítható egy kisebb .bexode fájlba, amelyet az alkalmazásban szállíthat.
Futási idő keretrendszerenként
A React, Vue, Svelte, Angular, Solid, React Native, SwiftUI és Flutter futásidejű csomagok lejátszják a fájlt.
A kódod vezérli
Állítson be logikai értékeket, számokat és triggereket az alkalmazás állapotából, és figyelje az animáció által visszaküldött eseményeket.
Objektív értékelés
Hogyan ExodeUI ehhez képest Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- A tervezett fájl a szállított fájl, így semmi sem vész el az átadás során
- Állapotok és logika utazik az animációval
- Egy fájl nyolc keretrendszer futási környezetében működik
- A tervezők kódváltás nélkül módosíthatják az időzítést, ha a bemenetek és az események változatlanok maradnak
Rebuilding motion by hand
- A fejlesztők minden átmenetet újra létrehoznak egy referenciából
- Minden tervezési változtatáshoz újabb kódmódosításra van szükség
- Minden platformot külön-külön újjáépítenek
- A kézzel írt kód teljes irányítást biztosít, és nincs extra futási idő, ami néha a megfelelő kompromisszum
Fejlesztői átadás
Használja a kódjában
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>
);
}Mi történik a szerkesztő és az alkalmazás között
A ExodeUI komponens négy lépésen megy keresztül:
- 1. Tervezés: rétegeket, állapotokat, átmeneteket, rugókat és logikát építhet a böngészőben vagy az asztali szerkesztőben. A munka nyitott .exode JSON fájlként kerül mentésre.
- 2. Fordítás (opcionális): gyártáshoz a jelenet egy kisebb .bexode fájlba fordítható.
- 3. Lejátszás: a keretrendszer futásidejű csomagja betölti a fájlt, és egy vászonra rajzolja.
- 4. Vezérlés: a kód bemeneteket állít be, például a Loading logikai értéket vagy a Siker triggert, és figyeli az animáció által küldött eseményeket.
Amikor a kézzel írt kód a jobb választás
A futási idő nem mindig megfelelő. Egyetlen halványításhoz vagy egyszerű lebegéshez a CSS vagy egy könyvtár, például a Motion könnyebb, és nincs szükség külön csomagra. A ExodeUI a leghasznosabb olyan több állapotú, fizikai vagy logikai komponenseknél, amelyeket a tervezők folyamatosan szerkeszteni szeretnének.
Topic Cluster Network
Fedezze fel a kapcsolódó fogalmakat és szerszámokat
Mozgásfejlesztő környezet
Az ötlet a ExodeUI mögött
Mozgásjelzők
Tervezze meg a rendszer mozgásjelzőit
A ExodeUI használata a React Native-ben
Futásidő, bemenetek és események
Szószedet: Motion Compiler
Terminológia
Kérdései vannak?
Gyakran Ismételt Kérdések
Építsen élő alkatrészeket valódi mozgással.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.