【After Effectsで手軽にWebアニメーション】Lottieを使えるようにするまで – 制作編
アニメーションを作る
できる事・できない事
さあ後は作るだけだろう!といきたいのですが、Lottieには出来ないことがあります。
特に厄介なのは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
ためしに先ほどのアニメを投げ込んだのが↓こちら。
アニメーションプレビューテスト
背景色なども変更できるので、こちらも是非活用してください!
以上がアニメーションの制作~書き出しの工程になります。
ここからは実装のターンになりますので、コーダーさんにお願いしてまた別の記事としてまとめていただきます!