クリエイティブなWeb制作に
役立つ情報メディア

【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
これを押すと下記の画面が出てきます。
 

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

Split X秒ごとに複数のjsonファイルを分割
Glyphs フォントを図形に変換
Hidden 非表示レイヤーをエクスポート
Guides ガイドレイヤーをエクスポート
Extra Comps エクスプレッションが外部コンポを指している場合に選択
Assets アセットをラスタライズ
Standalone アニメーションとプレーヤーを1つのファイルにまとめてエクスポート
Demo ローカルプレビュー用にHTMLをエクスポート
AVD Androids Animated Vector Drawable用のXMLをエクスポート

こんな感じのようです。

設定ができたらいざRender!
 

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

プレビュー

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

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

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


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