カブトムシの壺

消しゴム付き鉛筆

Lottieをお仕事のアプリに入れた時に考えたこと

Android

最近、実際の仕事のAndroidのアプリにLottieを導入してアニメーションを入れてます。 Lottieを導入する時にチームに「Lottieをやりたい!」ということを伝えるために、issueに書いたのですが、公開します。

Lottieやりたい

目次

  • 概要
  • メリット・デメリットは?
  • サイズは?
  • どういう課題を解決する?
  • 類似ライブラリと比較すると?
  • コード、仕様がシンプル?
  • メンテナンスされている?

Lottie

Lottie

概要

  • Lottieは、Adobe After Effectsで作ったアニメーションを様々なプラットフォーム(web/ iOS / Android...)上で動かすためのライブラリ。

  • 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