【After Effectsで手軽にWebアニメーション】Lottieを使えるようにするまで – 制作編

アニメーションを作る

できる事・できない事

さあ後は作るだけだろう！といきたいのですが、Lottieには出来ないことがあります。

サポートされているAfterEffectsの機能

特に厄介なのはillustratorのAiファイルが、そのままだとLottieで読み込めない事です。
なので一度AfterEffects内でシェイプにする必要があります。
 
 

AiデータをAfter Effects上でシェイプに変換する

まずはシェイプにしたい部分をillustrator上でレイヤーに分けます。
（レイヤー名はちゃんとつけた方が良いですが見逃してください…）
 

 
 
レイヤーを分けたAiファイルをコンポジションで読み込みます。
 
 

 
 
後はシェイプにしたいレイヤーを全て選択して、メニューバーの
レイヤー ＞ 作成 ＞ ベクトルレイヤーからシェイプを作成
 
 

 
 
で、シェイプレイヤーの出来上がりです！
元のAiデータは削除してしまいましょう。

Bodymovinでjsonを書き出す

シェイプでアニメーションの制作が終わったらjsonの書き出しです。
インストールしたBodymovinを開きます。
ウィンドウ　＞　拡張機能　＞　Bodymovin　です。
 

 
 
するとこんな画面が。
 
 

 
 
左上のRenderって緑のボタンを押せば終わりそうだな！と思って押すと怒られます。
 
 

There are no compositions to render.
Make sure you have at least one selected a Destination Path set.
 
レンダリングするものが選択されてないよ！
書き出し先設定してね！ということらしいです。多分。
というわけで設定します。

まずは書き出し先。
 

 
この緑の…を押すと設定できます。

そしてレンダリングするものを選択します。
 

 
このSelectedを選ばないと書き出しできませんのでご注意を。

そして意外と大切なのがSelectedの隣のSetting。
これを押すと下記の画面が出てきます。
 

 
 
英語が読めないともう何もできませんね。つらい。
グーグル翻訳大先生に聞いてみたところ

こんな感じのようです。

設定ができたらいざRender！
 

 
 
これでようやくjsonが手に入りました！

プレビュー

先ほどのSettingのDemoにチェックを入れることで確認用のhtmlを書き出すこともできますが、Lottieにはjsonを投げ込めばプレビューを確認できるページがあります。
https://www.lottiefiles.com/preview

ためしに先ほどのアニメを投げ込んだのが↓こちら。
アニメーションプレビューテスト

背景色なども変更できるので、こちらも是非活用してください！
 

 
以上がアニメーションの制作～書き出しの工程になります。
ここからは実装のターンになりますので、コーダーさんにお願いしてまた別の記事としてまとめていただきます！