Language日本語
柱 05 · モダンなベクター UI
LottieFiles の代替案: 動的インタラクティブ ステート マシンと静的ビデオ JSON
Lottie は、モバイル画面でパッシブ ベクター アニメーションを再生するために作成されました。 ExodeUI は、生きたインタラクティブなユーザー インターフェイス システムを構築するように設計されています。
What is LottieFiles の代替案: in ExodeUI?
ExodeUI は、最新のソフトウェア インターフェイスの最高の LottieFiles 代替品です。 Lottie は、Adobe After Effects からエクスポートされたリニアで非インタラクティブなアニメーション キーフレームを重い JSON ファイルにレンダリングしますが、ExodeUI ファイルにはランタイムがアプリ内で再生する状態、物理学、ロジックが含まれているため、UI 要素はタッチ、ジェスチャー、アプリの状態に応答します。 ExodeUIを作ります。
コアアーキテクチャ
エンジニアとデザイナーが ExodeUI を選ぶ理由
Design, logic and motion in one file that runs inside your app.
ビデオ再生による実際のインタラクション
Lottie アニメーションは、ビデオのようにフレーム 0 からフレーム 60 まで再生されます。 ExodeUI 要素は、ドラッグ、ホバー、タップ速度にリアルタイムで応答します。
Adobe After Effects は必要ありません
デザインとアニメーションはすべて ExodeUI 内で行います。高価な Creative Cloud サブスクリプションとバグのある Bodymovin エクスポート プラグインを排除します。
ネイティブ React および Swift コード
かさばるプレーヤー ライブラリや JSON ツリー パーサーを使用せずに、アプリに直接ドロップされるクリーンなコンポーネントをエクスポートします。
Lottie の移行とインポート
既存の Lottie JSON ファイルを ExodeUI にインポートし、対話型ステート マシン コンポーネントにアップグレードします。
客観的な評価
ExodeUI との比較 LottieFiles & After Effects
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- 完全な双方向インタラクティブ性と実際の物理的運動量
- ビジュアル ステート マシン ロジックにより、複雑なコーディング ラッパーが不要になります
- 製品ソフトウェア用に設計された専用のビジュアル UI スタジオ
- ハードウェア GPU アクセラレーションによる超低い CPU とバッテリーの使用率
LottieFiles & After Effects
- ユーザー入力に動的に反応できないリニアでパッシブな再生
- 複雑で高価な Adobe After Effects ワークフローが必要
- 重い JSON ペイロードにより、モバイルで CPU のスパイクやフレームのドロップが発生する
- ネイティブのステート マシン ロジックがない: 開発者は特注のラッパーを作成する必要がある
開発への引き継ぎ
コードでの使い方
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="/toggle_switch.bexode"
onTrigger={(名前) => console.log('ExodeUI イベント:', 名前)}
/>
);
}製品チームが Lottie を超えて移行する理由
Lottie は 2017 年の画期的な進歩であり、大規模な GIF または MP4 ビデオ ファイルを使用せずに、iOS、Android、Web 上でベクター アニメーションをレンダリングできるようになりました。しかし、ソフトウェア設計は、受動的な装飾アニメーションから、動的で触覚的な UI インタラクションへと進化しました。
- インタラクティブ性の壁: Lottie アニメーションをドラッグの勢いや指の速度に応答させるのは簡単ではありません。
- バッテリーと CPU の消耗: 数メガバイトの JSON ツリーを解析し、フレームごとにベジェ曲線を評価すると、モバイル デバイスでバッテリーの消耗が発生します。
- 複雑なツールチェーン: デザイナーは、デジタル ソフトウェア製品ではなく、映画やテレビの VFX 用に構築されたアプリケーションである Adobe After Effects をマスターする必要があります。
Topic Cluster Network
関連する概念とツール
ご質問はありますか
よくある質問
本物の動きで、生きたコンポーネントを作る。
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.