Lottieで使えるアニメーション素材を作る際に必要な準備4つ

Lottieを使って、webでもアプリでも動くアニメーションを先日作ってみた。

あり物で作ったアニメーションサンプル(超適当)はこちら。キラキラ~

Sketch2AE

- Sketchファイル配置したオブジェクトをコピーし、AfterEffectsに貼り付けられるプラグイン
- SketchとAfter Effects両方に対して設定が必要
- After Effectsのワークスペースのパネルにセットしておくと使いやすい

めちゃくちゃダウンロードに手間取ってしまったので、ドキュメントをちゃんと読みましょう。

BodyMovin

- AfterEffectsで作成したアニメーションをjsonに書き出すプラグイン
- 設定次第で確認用のファイルも一緒に書き出すことができる
- After Effectsのワークスペースのパネルにセットしておくと使いやすい

めちゃくちゃダウンロードに手間取ってしまったので、ドキュメントをちゃんと読みましょう。

Lottie Viewer for iOS 

https://github.com/airbnb/lottie-ios/tree/master/MacOS_Viewer

Macから使える。BodyMovinで書き出したjsonファイルをアプリケーションにDrug&Dropすると、iOSではどんな表示になるのかを確認する事ができる。BodyMovinで正常に書き出したファイルがiOSで正しく表示されるとは限らないので、確認のために必要なサービス。

それぞれのドキュメントをちゃんと読むこと

アニメーションの修正にめちゃくちゃ時間がかかったので、ドキュメントをちゃんと読んで作成しようと反省した。Lottieはクセがある、という話は小耳に挟んでいたが、ドキュメント読まずに進めると色んな所でぶつかっちゃう、ということなんだろう。（多分）