will and way

ただの自分用メモを人に伝える形式で書くことでわかりやすくまとめてるはずのブログ

Lottieで再生するアニメーションを作って読み込ませるまで

blog.matsuokah.jp

↑の記事は、Lottieを使ってアニメーションの再生をするところを実装しました。

実はハンバーガーアイコンのアニメーションには大きな余白が含まれていて
このまま使うとアイコン自体が非常に小さい表示になってしまっていました。

ということで、次はAfterEffectsプロジェクトを編集して、JSONを書き出すところ紹介したいと思います。

1. AfterEffectsのプロジェクトでアニメーションを編集する

まずはハンバーガーアイコンのプロジェクトをよみこみます。

f:id:matsuokah:20171014131427p:plain

おわかりかと思いますが、コンポジションのサイズ(いわゆる全体の大きさと思ってください)が800x600になっていて、アイコンに対しての余白が非常に大きい状態です。

そこでComposition Settingsを開き、サイズをアイコンが収まるサイズの正方形にします。

f:id:matsuokah:20171014131922p:plain

設定すると、以下のようになります

f:id:matsuokah:20171014132035p:plain

2. 書き出す

次に書き出しです。
Lottieでは、このオープンソースライブラリでjson形式にExportすることを想定して作られています。

github.com

AdobeCCを使っていれば、↓のページでインストールすればAfterEffectsで使用可能になります。

https://exchange.adobe.com/addons/products/12557exchange.adobe.com

それでは、AfterEffectsでプラグインを起動します。

Window > Extensions > Bodymovinで、起動できます

f:id:matsuokah:20171014132345p:plain

起動するとコンポジションを選択する画面がでてきます。

f:id:matsuokah:20171014132431p:plain

Renderで書き出してみます。

特に設定をしていないとこのように、書き出しが許可されてないよというエラーとともに解決方法が提示されます。

f:id:matsuokah:20171014132612p:plain

After Effects CC > Preference > General > Allow Scripts to Write Files and Access Networkにチェックを入れます

f:id:matsuokah:20171014132807p:plain

もう一度書き出すと成功します。

f:id:matsuokah:20171014132841p:plain

あとは、吐き出されたJSONファイルをiOS/Androidに組み込んで使うだけです。

f:id:matsuokah:20171014120502g:plain

これで、自作のアニメーションを組み込めるぞ 🎉🎉🎉🎉🎉🎉🎉