Language日本語
柱 07 · 仕組み
.exode からアプリまで: ExodeUI ファイルの構築と再生方法
設計から製造まで 1 つのオープンファイル。ランタイムがそれを再生し、コードがそれを駆動します。
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
- 設計されたファイルは出荷されたファイルであるため、ハンドオフで何も失われることはありません
- 状態とロジックはアニメーションとともに移動します
- 1 つのファイルが 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 コンポーネントは 4 つのステップを経ます。
- 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.