Language日本語
カテゴリ: モーション デザイン ソフトウェア
製品チーム向けのモーション デザイン ソフトウェア
モーション トークンを定義し、複数要素の振り付けを調整し、開発者が本番環境にドロップできるインタラクティブ コンポーネントを出荷します。これは人々が実際に使用するインターフェイスのモーション デザインであり、レンダリングされたビデオではありません。
What is 製品チーム向けのモーション デザイン in ExodeUI?
製品のモーション デザイン ソフトウェアでは、チームがソフトウェア インターフェイスのモーション (遷移、マイクロ インタラクション、読み込み状態、およびそれらを結び付けるタイミング) を定義、テストし、出荷します。 ExodeUI は製品 UI のモーション デザイン ソフトウェアであり、ビデオ ツールではありません。モーションは、モーション トークン、スプリング カーブ、ステート マシンを含む 1 つの開いた .exode ファイル内に存在し、ランタイムを通じてアプリ内で再生されます。代わりにビデオやブロードキャストのモーションを探している場合、それはモーション グラフィック ソフトウェアであり、別のクラスのツールです。
コアアーキテクチャ
エンジニアとデザイナーが ExodeUI を選ぶ理由
Design, logic and motion in one file that runs inside your app.
モーションデザイントークン
スプリング パラメーターとイージング カーブを、Tailwind CSS、CSS 変数、またはテーマ UI 用にフォーマットされた再利用可能なデザイン トークンとしてエクスポートします。
千鳥振り付け
自動スタッガー オフセットと階層シーケンスを使用して、複数要素の開始および終了トランジションを調整します。
モーションスペックインスペクター
開発者は、任意の要素をクリックして、ばね定数 (剛性、減衰、質量)、持続時間、トリガー基準をクリーンなコード表記で検査できます。
アクセス可能な削減されたモーション
pres-reduced-motion メディア クエリのサポートが組み込まれているため、すべてのユーザーが製品に完全にアクセスできるようになります。
客観的な評価
ExodeUI との比較 Video Motion Design Tools
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- インタラクティブなソフトウェアインターフェイス専用に設計
- フラットビデオをレンダリングするのではなく、デザイントークンとコードを出力します。
- リアルタイムで計算されるネイティブのスプリング物理学
- ビジュアル キャンバスとコード実装の間で 1:1 のパリティを維持します。
Video Motion Design Tools
- 放送ビデオ、テレビコマーシャル、映画のタイトル シーケンス用に構築
- DOM 要素、コンポーネント ツリー、レスポンシブ レイアウトについて理解がない
- エンジニアはタイミングに注目し、イージングカーブを推測する必要があります
- ユーザー操作や反応状態のサポートはゼロ
開発への引き継ぎ
コードでの使い方
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
import { ExodeUICanvas } から 'exodeui';
// スプリング、ステート、タイミングは .exode ファイル内に存在します (
// エディター）。コードは入力を渡し、イベントを受信します。
エクスポート関数 StaggeredList({ items }) {
戻る (
<ExodeUIキャンバス
src="/list_entrance.bexode"
入力={{ アイテム }}
onTrigger={(名前) => console.log('ExodeUI イベント:', 名前)}
/>
);
}Topic Cluster Network
関連する概念とツール
モーショングラフィックスソフト（ビデオツール）
出力がレンダリングされたビデオ、クリップ、またはタイトル シーケンスである場合は、代わりにここから開始してください。
UIアニメーションツール
インタラクティブ インターフェイス用の Spring 物理学、ジェスチャ、およびステート マシン。
インタラクティブなアニメーションツール
ジェスチャー、速度、アプリのライブ状態に反応するモーション。
モーションUIコンポーネント
エディターで開くことができる既製のトグル、ボタン、ローダー。
マイクロインタラクションガイド
製品が完成したと感じさせる小さなインタラクションをデザインする方法。
ご質問はありますか
よくある質問
本物の動きで、生きたコンポーネントを作る。
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.