Androidで簡単にアニメーションを追加する【Lottie】

Lottieって何？

Android,iOS,React Nativeで、アニメーションを画像のように簡単にアプリに埋め込める！
アニメーションはGIFアニメのようなもので、人様が作成してくれたのを選んで使える！
サイズや繰り返し設定など変更可能！
宿泊関係のサービスで有名なAirbnbが作成しており無料で使える！

※サンプルはローディング画面に入れてみました

リンク集

公式トップ
https://airbnb.design/lottie/
Android GitHub
https://github.com/airbnb/lottie-android
Androidドキュメント
http://airbnb.io/lottie/#/android
サンプルアプリ
https://play.google.com/store/apps/details?id=com.airbnb.lottie
アニメーション一覧
https://lottiefiles.com/recent
自分のお気に入り
https://lottiefiles.com/likes

実装方法

設定

build.gradle

dependencies {
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

バージョンをどれにするかはこちらを参照
https://github.com/airbnb/lottie-android#download

アニメーションを選ぶ

最新のアニメーション一覧はこちら
https://lottiefiles.com/recent
ページが重くアニメーションを探していくのが辛いのでアカウント登録後、検索ワードで絞り込んで、少しでも気に入ったのはお気に入り登録して後からこちらから見るのが良さそう
https://lottiefiles.com/likes
使いたいアニメーションが決まったらDownloadからLottie JSONを選択してダウンロードしましょう

アニメーションの設置

落としたファイルをリネームしないと警告が出るのでわかりやすい名前に変更します
その後src/main/resディレクトリの下にrawディレクトリを作成して、落としてきたjsonファイルを入れます

レイアウトファイルに設定

layout.xml

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie_animation"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"
    app:lottie_rawRes="@raw/lottie_idea_into_book_machine" />

こんな感じで画像ファイルのように設定でき、タップ処理を追加することも可能
ループさせたくない場合はlottie_loopをfalseに設定

以上で完成です
他の細かい設定はリンク集のドキュメントを参考にしてみてください
アニメーションにより余白が違ったりして使い所は工夫が必要だったりします