After EffectsでBodymovin 出力用のコンポジションムービーを作成する手順を紹介します。
Illustratorで画像を作成します。今回は下図の図形の画像を作成しました。作成した画像はai形式で保存します。
プロジェクトを作成し、コンポジションを作成します。今回は180x180のコンポジションを作成しています。
Illustrator形式の*.aiファイルをプロジェクトに読み込みます。今回、レイヤーは結合して読み込みます。
プロジェクトのパネルにIllustratorのaiファイルが追加されます。
aiファイルをコンポジションにドラッグ＆ドロップします。Illustratorで作成した画像がコンポジションに配置されます。
サイズを調整してコンポジションに収まるサイズにします。
ウィンドウ下部のコンポジションのタイムラインパネルのaiファイルのレイヤーをクリックして選択します。
aiファイルのレイヤーで右クリックします。下図のポップアップメニューが表示されます。
ポップアップメニューの[作成]サブメニューの[ベクトルレイヤーからシェイプを作成]の項目をクリックします。
ai形式のファイルの画像からシェイプのレイヤーが作成されます。[(aiファイル名)アウトライン]のレイヤーが新たに作成されます。
元のIllustrator画像のレイヤーは非表示になります。
アウトラインのシェイプのレイヤーの[トランスフォーム]の[スケール]にキーフレームを作成し値を設定します。徐々に画像が大きくなるアニメーションを作成します。
開始から2秒までの間で図形が大きくなり、その後は大きさが一定のムービーを作成します。
Bodymovin 出力用のコンポジションムービーを作成できました。
