Bodymovin 出力用のコンポジションムービーを作成する - After Effects

After EffectsでBodymovin 出力用のコンポジションムービーを作成する手順を紹介します。

事前準備

Illustratorで画像を作成します。今回は下図の図形の画像を作成しました。作成した画像はai形式で保存します。

手順

プロジェクトを作成し、コンポジションを作成します。今回は180x180のコンポジションを作成しています。


Illustrator形式の*.aiファイルをプロジェクトに読み込みます。今回、レイヤーは結合して読み込みます。


プロジェクトのパネルにIllustratorのaiファイルが追加されます。


aiファイルをコンポジションにドラッグ＆ドロップします。Illustratorで作成した画像がコンポジションに配置されます。


サイズを調整してコンポジションに収まるサイズにします。


ウィンドウ下部のコンポジションのタイムラインパネルのaiファイルのレイヤーをクリックして選択します。


aiファイルのレイヤーで右クリックします。下図のポップアップメニューが表示されます。


ポップアップメニューの[作成]サブメニューの[ベクトルレイヤーからシェイプを作成]の項目をクリックします。


ai形式のファイルの画像からシェイプのレイヤーが作成されます。[(aiファイル名)アウトライン]のレイヤーが新たに作成されます。
元のIllustrator画像のレイヤーは非表示になります。


アウトラインのシェイプのレイヤーの[トランスフォーム]の[スケール]にキーフレームを作成し値を設定します。徐々に画像が大きくなるアニメーションを作成します。




開始から2秒までの間で図形が大きくなり、その後は大きさが一定のムービーを作成します。


Bodymovin 出力用のコンポジションムービーを作成できました。