Flash から Lottie、ステート マシンまで: Web ベクター アニメーションの進化
Web ベクター アニメーションが Flash と ActionScript から Lottie の After Effects エクスポートに、さらにステート マシン ランタイムにどのように移行したか、そして各ステップで何が変わったか。
核心
Flash は 1 つのツールでベクター アニメーションとインタラクティブ性を組み合わせましたが、Adobe が 2020 年 12 月 31 日以降サポートを停止したプラグインで実行されました。Lottie は、After Effects アニメーションを再生することでベクター アニメーションを復活させ、Bodymovin で JSON としてエクスポートされ、Web およびモバイルでネイティブに実行されましたが、それらのアニメーションは再生のみでした。 Rive や ExodeUI などのステート マシン ランタイムは、設計ファイルに対話性を追加します。
Flash: アニメーションとロジックを 1 か所にまとめました
Flash を使用すると、デザイナーはベクトルを描画し、タイムライン上でアニメーション化し、ActionScript で動作を追加することがすべて 1 つのファイルで可能になります。ゲーム、広告、ウェブサイト全体に力を与えました。その弱点はプラグインでした。プラグインはブラウザ独自のテクノロジの外で実行され、セキュリティとパフォーマンスに永続的な問題がありました。 Adobe は、2020 年 12 月 31 日以降に Flash Player のサポートを終了し、2021 年 1 月 12 日以降、Flash コンテンツの実行をブロックしました。
Lottie: プラグインなしのベクター
Airbnb の Lottie は、Bodymovin プラグインを使用して JSON としてエクスポートされた Adobe After Effects アニメーションを解析し、Web、iOS、Android、React Native 上でネイティブにレンダリングします。これにより、リッチ ベクター モーションがアプリで再び実用的なものとなり、現在でも単純に再生するアニメーションとして最も広くサポートされている形式です。
欠けている部分: インタラクティブ性
Lottie ファイルは、動作ではなくタイムラインを記述します。 Lottie アニメーションをホバー、ロード、または成功に応答させるには、プレーヤーの周囲にコードを記述することを意味します。 Flash にはその動作が組み込まれていました。プラグインのない世界はそれを失いました。
ステート マシン: ファイル内の動作の再確認
ステートマシン ランタイムは、プラグインなしで Flash のアイデアを復活させます。 Rive を使用すると、ベクトル アニメーションを設計し、コードで入力を制御するステート マシンにそれを接続できます。私たちが作成した ExodeUI は、同じアイデアを製品 UI に適用し、React、SwiftUI、Flutter などのランタイムで再生される 1 つの開いた JSON ファイルにレイアウト、スプリング物理学、ロジックを追加します。
覚えておきたい原則
- Flash はプラグインでベクター アニメーションとインタラクティブ性を組み合わせました
- Adobe は 2020 年 12 月 31 日をもって Flash Player のサポートを終了しました
- Lottie は、Bodymovin でエクスポートされた After Effects アニメーションをネイティブで再生します
- Lottie アニメーションが再生されます。インタラクティブ性には追加のコードが必要です
- ステートマシン ランタイムは、作成された動作をファイルに戻します
よくある質問
出典
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Rive ドキュメント