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はクセがある、という話は小耳に挟んでいたが、ドキュメント読まずに進めると色んな所でぶつかっちゃう、ということなんだろう。(多分)


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

14

nute

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
2つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。