Language한국어
기둥 07 · 실행 방법
.exode에서 앱까지: ExodeUI 파일이 구축되고 재생되는 방법
디자인부터 제작까지 하나의 오픈 파일입니다. 런타임이 이를 재생하고 코드가 이를 구동합니다.
What is .exode에서 앱까지: in ExodeUI?
ExodeUI는 React, Swift 또는 Flutter 소스 코드를 생성하지 않습니다. 열린 .exode JSON 파일에서 디자인합니다. 프로덕션을 위해 더 작은 .bexode 파일로 컴파일할 수 있으며 프레임워크용 런타임 패키지가 이를 캔버스에서 재생합니다. 코드는 입력을 설정하고 이벤트를 수신하여 이를 제어합니다. 우리는 ExodeUI를 만듭니다.
핵심 아키텍처
엔지니어와 디자이너가 ExodeUI를 선택하는 이유
Design, logic and motion in one file that runs inside your app.
오픈 소스 파일
.exode 파일은 레이어, 상태, 전환, 스프링, 입력 및 이벤트를 설명하는 JSON입니다. 개발자는 이를 읽을 수 있고 AI 도구는 이를 편집할 수 있습니다.
생산용으로 컴파일됨
동일한 장면을 더 작은 .bexode 파일로 컴파일하여 앱에 제공할 수 있습니다.
프레임워크당 런타임
React, Vue, Svelte, Angular, Solid, React Native, SwiftUI 및 Flutter용 런타임 패키지가 파일을 재생합니다.
코드로 제어
앱 상태에서 부울, 숫자 및 트리거를 설정하고 애니메이션이 다시 보내는 이벤트를 수신합니다.
객관적 평가
ExodeUI와 비교하기 Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- 디자인된 파일은 배송된 파일이므로 핸드오프 시 손실되는 것은 없습니다.
- 상태와 논리는 애니메이션과 함께 이동합니다.
- 하나의 파일이 8개의 프레임워크 런타임에서 작동합니다.
- 입력과 이벤트가 동일하게 유지되는 경우 디자이너는 코드 변경 없이 타이밍을 변경할 수 있습니다.
Rebuilding motion by hand
- 개발자는 참조에서 각 전환을 다시 만듭니다.
- 모든 디자인 변경에는 또 다른 코드 변경이 필요합니다.
- 각 플랫폼은 별도로 재구축됩니다.
- 손으로 작성한 코드는 완전한 제어를 제공하며 추가 런타임이 필요하지 않습니다. 이는 때때로 올바른 절충안입니다.
개발 인계
코드에서 사용하기
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>
);
}편집기와 앱 사이에 무슨 일이 벌어지나요?
ExodeUI 구성 요소는 네 단계를 거칩니다.
- 1. 디자인: 브라우저나 데스크탑 편집기에서 레이어, 상태, 전환, 스프링 및 로직을 구축합니다. 작업은 열린 .exode JSON 파일로 저장됩니다.
- 2. 컴파일(선택 사항): 제작을 위해 장면을 더 작은 .bexode 파일로 컴파일할 수 있습니다.
- 3. 재생: 프레임워크용 런타임 패키지가 파일을 로드하고 캔버스에 그립니다.
- 4. 제어: 코드는 Loading 부울 또는 성공 트리거와 같은 입력을 설정하고 애니메이션이 보내는 이벤트를 수신합니다.
손으로 직접 작성한 코드가 더 나은 선택인 경우
런타임이 항상 옳은 것은 아닙니다. 단일 페이드 또는 간단한 호버의 경우 CSS 또는 Motion과 같은 라이브러리가 더 가볍고 추가 패키지가 필요하지 않습니다. ExodeUI는 디자이너가 계속 편집하려는 여러 상태, 물리 또는 논리가 있는 구성 요소에 가장 유용합니다.
Topic Cluster Network
관련 개념과 도구 살펴보기
궁금한 점이 있나요?
자주 묻는 질문
실제 움직임으로 살아 있는 컴포넌트를 만드세요.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.