Language日本語
カテゴリ: インタラクティブ モーション
UI と製品エクスペリエンスのためのインタラクティブなアニメーション ツール
従来のアニメーション ツールは、事前に記録されたタイムラインを再生します。 ExodeUI は、アニメーションがカーソル速度、タッチ ジェスチャ、アプリケーションの状態に動的に反応するインタラクティブなキャンバスを提供します。
What is UI と製品エクスペリエンスのためのインタラクティブなアニメーション in ExodeUI?
インタラクティブなアニメーション ツールを使用すると、デザイナーやエンジニアは、ユーザー入力、ジェスチャ、システム状態にリアルタイムで応答する動的な UI 要素を作成できます。 ExodeUI は、ビジュアル アニメーション デザインと実行可能なインタラクション ロジックを橋渡しし、プロダクション対応のインタラクティブ コンポーネントを出力するビジュアル キャンバスを提供します。
コアアーキテクチャ
エンジニアとデザイナーが ExodeUI を選ぶ理由
Design, logic and motion in one file that runs inside your app.
ジェスチャーファーストのアーキテクチャ
コンポーネントの状態をポインタの速度、タッチ ドラッグ、自動モーメンタム継続によるドラッグ ジェスチャに直接バインドします。
中断可能なモーション
アニメーションの再起動がぎくしゃくする心配はありません。ユーザー入力がアクティブなトランジションを中断すると、スプリング物理学によって速度が自動的にスムーズにリダイレクトされます。
Reactive パラメータ入力
スクロール オフセット、ネットワークの進行状況、カーソルの距離、ブール値の小道具などの外部変数を使用してアニメーションを駆動します。
マルチフレームワークのサポート
React、Vue、Svelte、React Native、および SwiftUI に対応するコンポーネントを単一の対話型プロジェクトからエクスポートします。
客観的な評価
ExodeUI との比較 Linear Timeline Software
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- 完全な中断可能性 — 中断されたときにアニメーションがスムーズにリダイレクトされます
- ネイティブのタッチとポインタ ジェスチャと勢いのある統合
- カスタム JS リスナーを作成せずに直接リアクティブ状態バインディングを行う
- Core Web Vitals を維持する小さなコード バンドル
Linear Timeline Software
- リセットする前に再生を終了する必要がある厳格なキーフレーム タイムライン
- ユーザーの速度やバネ力学の概念がない
- 実際のアプリデータと連携するには複雑なカスタムグルーコードが必要
- ローエンドのモバイルデバイスで高い入力遅延が発生する
開発への引き継ぎ
コードでの使い方
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
import { ExodeUICanvas } から 'exodeui';
// スプリング、ステート、タイミングは .exode ファイル内に存在します (
// エディター）。コードは入力を渡し、イベントを受信します。
エクスポート関数 InteractiveToggle() {
戻る (
<ExodeUIキャンバス
src="/interactive_toggle.bexode"
入力={{アクティブ }}
onTrigger={(名前) => console.log('ExodeUI イベント:', 名前)}
/>
);
}ご質問はありますか
よくある質問
本物の動きで、生きたコンポーネントを作る。
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.