「Lottie」素敵なアニメーションが表現できるライブラリ

GIFより軽いアニメーションが表現できるライブラリ。

Lottieにアニメーション用のJsonを食わせるだけでヌルヌルと動いてくれる。すごい。

Lottieは Airbnbが開発しているライブラリ。

Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, all...

Json自体はAfterEffectsでアニメーションをJson化とかするらしい。

作ってもらいたいアニメーションをデザイナーさんとかに頼んで作ってもらうと良い。

自分じゃ作れない(´・ω・｀)

組み込み
実行結果
You must set an images folder before loading an image. Set it with LottieComposition#setImagesFolder or LottieDrawable#setImagesFolder

組み込み

依存を追加

以下を追加する。

implementation 'com.airbnb.android:lottie:3.0.6'

アニメーションJsonを追加

rawフォルダにjsonファイルを置く。

レイアウトファイルに追加

//
<com.airbnb.lottie.LottieAnimationView
       android:id="@+id/topHeartAnimationView"
       android:layout_width="150dp"
       android:layout_height="150dp"
       android:layout_gravity="center"
       android:layout_margin="20dp"
       app:lottie_loop="true"
       app:lottie_autoPlay="true"
       app:lottie_rawRes="@raw/love_unlove"/>

これだけでアニメーションが実現できる。

ちなみに

app:lottie_loop→アニメーションをループさせるか

app:lottie_autoPlay→自動でアニメーションを再生させるか

実行結果

無駄にアニメーションさせて見た。

（他のデザインをどうにかしろw） pic.twitter.com/WqAWb41F3L
— すとれん@茶屋民 (@stren_valca) June 14, 2019

本当にヌルヌルアニメーションが動く。すごい。

You must set an images folder before loading an image. Set it with LottieComposition#setImagesFolder or LottieDrawable#setImagesFolder

余談。

これが理由で落ちた。プログレスの方がJsonファイル内で外部イメージを取り込んでるみたいでファイルが無いよって感じで落ちてた。

まぁ、理由見ればわかるけど。

なのでAsettsファイルにimagesフォルダ作成して外部イメージを置いてフォルダを指定してあげて解決。

//
<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/progressAnimationView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        app:lottie_loop="true"
        app:lottie_autoPlay="true"
        app:lottie_imageAssetsFolder="images"   ←これ追加
        app:lottie_rawRes="@raw/progress"/>