Lottieで再生するアニメーションを作って読み込ませるまで
↑の記事は、Lottieを使ってアニメーションの再生をするところを実装しました。
実はハンバーガーアイコンのアニメーションには大きな余白が含まれていて
このまま使うとアイコン自体が非常に小さい表示になってしまっていました。
ということで、次はAfterEffectsプロジェクトを編集して、JSONを書き出すところ紹介したいと思います。
1. AfterEffectsのプロジェクトでアニメーションを編集する
まずはハンバーガーアイコンのプロジェクトをよみこみます。
おわかりかと思いますが、コンポジションのサイズ(いわゆる全体の大きさと思ってください)が800x600
になっていて、アイコンに対しての余白が非常に大きい状態です。
そこでComposition Settingsを開き、サイズをアイコンが収まるサイズの正方形にします。
設定すると、以下のようになります
2. 書き出す
次に書き出しです。
Lottieでは、このオープンソースライブラリでjson形式にExportすることを想定して作られています。
AdobeCCを使っていれば、↓のページでインストールすればAfterEffectsで使用可能になります。
https://exchange.adobe.com/addons/products/12557exchange.adobe.com
それでは、AfterEffectsでプラグインを起動します。
Window > Extensions > Bodymovin
で、起動できます
起動するとコンポジションを選択する画面がでてきます。
Render
で書き出してみます。
特に設定をしていないとこのように、書き出しが許可されてないよというエラーとともに解決方法が提示されます。
After Effects CC > Preference > General > Allow Scripts to Write Files and Access Network
にチェックを入れます
もう一度書き出すと成功します。
あとは、吐き出されたJSONファイルをiOS/Androidに組み込んで使うだけです。
これで、自作のアニメーションを組み込めるぞ 🎉🎉🎉🎉🎉🎉🎉