最近、実際の仕事のAndroidのアプリにLottieを導入してアニメーションを入れてます。 Lottieを導入する時にチームに「Lottieをやりたい!」ということを伝えるために、issueに書いたのですが、公開します。
Lottieやりたい
目次
- 概要
- メリット・デメリットは?
- サイズは?
- どういう課題を解決する?
- 類似ライブラリと比較すると?
- コード、仕様がシンプル?
- メンテナンスされている?
Lottie
概要
Lottieは、Adobe After Effectsで作ったアニメーションを様々なプラットフォーム(web/ iOS / Android...)上で動かすためのライブラリ。
Lottieを使って、ネイティブのプラットフォームにアニメーションを組み込む開発の流れとしては、以下のようになる。
- (1) Adobe After Effectsでアニメーションを作る
- (2) Adobe After Effectsの拡張機能 Bodymovin を使ってJSON形式で出力する
- (3) そのjsonファイルをLottieを使ってプラットフォーム側で読み込んで動かす
メリット・デメリット
メリット
- 静的な画像を利用するのと同じくらいの手間でアニメーションを実装できる。
- jsonファイルさえあれば、アニメーションを実装できる。そのため、アニメーションの速度のチューニングなどをデザイナーさんに任せることができる。
デメリット
- アニメーションさせたいものはjsonファイルをアプリが持つ必要がある。そのため、今後アニメーション対象が増え、jsonファイルが増えると、その分、アプリサイズが大きくなる(*1)。
- AfterEffectsで追加した表現でサポートしていないものを動かそうとすると、クラッシュする。対応してない表現は使えない(*2)。
サイズ
どういう課題を解決するのか
- 今まで、エンジニアが速度のチューニングや大きさの調整などを行なってアニメーションさせるところを、デザイナーさんに任せることができる。エンジニアはもらったファイルを挿入するだけになる。エンジニアとデザイナー間でフィードバックを受けて修正という工程をなんども繰り返す手間が減る。
類似ライブラリとの比較
Keyframes
- Facebook製
- 機能は同じ
- ドキュメントが少ない。。。
- Lottieと比べると更新頻度が少ない。(最終リリースは2017/6)
Squall
- 作ったのはmarcus_eckertさん
- 機能は同じだけど、iOSのみの対応
コード、仕様がシンプルか
- ImageViewを置き換えるように使えます。
Before
<ImageView android:id="@+id/image_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="centerCrop" android:src="@drawble/your_drawable" />
After
<com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="centerCrop" app:lottie_fileName="your_animation.json" />
- バインドして
animationView.playAnimation()
でアニメーションを動かすことができます。
メンテナンスされているか
- 更新頻度、アップデートサイクルは高めです。月1くらいでマイナーアップデートされている。
*1 : ボタンのような1部品のアニメーションであれば、1ファイル10~30kb程度だが、サンプルサイトにあるような画面全体を使うようなアニメーションだと、200kb程度あるものも存在した。)
*2 : 対応表はこれです。 http://airbnb.io/lottie/supported-features.html#
(参考) http://airbnb.io/lottie/ https://github.com/airbnb/lottie-android https://ferret-plus.com/6214 https://airbnb.design/introducing-lottie/ http://tech.starttoday-tech.com/entry/swift-lottie https://inside.pixiv.blog/matsurai/3138