Bodymovin は、After Effects のコンポジションを JSON 形式としてエクスポートし、Web サイトに埋め込んだり、アプリに統合したりできる、オープンで無料の拡張機能です。Bodymovin 拡張機能の初期化のプロセスを詳しく見ていきましょう。
これを 4 つの簡単なステップで実現します。
- Bodymovin拡張機能を取得する
- After Effectsの設定を確認する
- アニメーションを生成する
- アニメーションをウェブサイトに統合する
1. Bodymovin拡張機能を入手する
Adobe Exchange にアクセスして、無料の Bodymovin 拡張機能をダウンロードしてください。
注意: 複数のサブスクリプションがある場合は、後続の手順で拡張機能を簡単に見つけられるように、正しい Creative Cloud アカウントにログインしていることを確認してください。
2. After Effectsの設定を確認する
After Effects を起動し、「ウィンドウ」>「拡張機能」メニューで Bodymovin を見つけます。
Bodymovin が表示されない場合は、After Effects を再起動してください。
適切なファイル アクセス権限を確保するには、After Effects > 環境設定 > スクリプトとエクスプレッション (Windows の場合は編集 > 環境設定 > スクリプトとエクスプレッション) に移動します。
位置特定 スクリプトによるファイルの書き込みとネットワークへのアクセスを許可する 有効になっていることを確認します。
3. アニメーションを生成する
Bodymovinを使用してコンポジションをエクスポートしてみましょう。
After Effects でアニメーションを開き、「ウィンドウ」>「拡張機能」>「Bodymovin」にアクセスして、アニメーションを他のコンポジションとともにエクスポートしてレンダリングします。
注意: コンポジションにラスタライズされた画像が含まれている場合は、設定メニューで圧縮を有効にしてください。
指定されたフォルダーを確認し、「レンダリング」をクリックしてエクスポートする前に JSON ファイルを保存します。
レンダリング プロセスが完了すると、指定したフォルダーに JSON ファイルが作成されます。次に、アニメーションを Web サイトに挿入します。
4. アニメーションをウェブサイトに統合する
このステップでは Webflow を使用しますが、手動でコーディングする場合でも、別のプラットフォームを活用する場合でも、アプローチは一貫しています。
左側のパネルの「アセット」セクションから、アニメーションをレイアウトにドラッグします。
以上です。公開、エクスポート、またはプレビューすると、アニメーションが自動的に再生されます。
まだご覧になっていない方は、Webflow の包括的な After Effects & Lottie コースをご覧ください。
訪問 Airbnbのロッティサイト 現在サポートされている After Effects 機能のリストを表示します。
- ワークスペーススポットとメンバーの追加または削除 - 2024年4月15日
- センタリングボックスの概要 - 2024年4月15日
- 将来の参照用にサイトを保存する - 2024年4月15日