After Effects 用に Bodymovin を設定する

Bodymovin は、After Effects のコンポジションを JSON 形式としてエクスポートし、Web サイトに埋め込んだり、アプリに統合したりできる、オープンで無料の拡張機能です。Bodymovin 拡張機能の初期化のプロセスを詳しく見ていきましょう。

これを 4 つの簡単なステップで実現します。

1. Bodymovin拡張機能を取得する
2. After Effectsの設定を確認する
3. アニメーションを生成する
4. アニメーションをウェブサイトに統合する

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 機能のリストを表示します。