Lottieは、モバイルやWebなどでリッチなアニメーションを、イメージビューを追加するのと同じくらい手軽に使用できるようになるライブラリで、宿泊施設・民宿予約サービスを提供しているAirbnbが開発しています。
モバイルでは、Android、iOSのほか、ReactNativeもサポートしています。
アニメーションは、jsonファイルで追加するため、アプリのサイズが大きくなりすぎません。
アニメーションは、AfterEffectsにBodyMovinプラグインを追加すれば、
オリジナルのものが作成できるようですが、今は手を出せていません・・・
AndroidアプリにLottieを追加する
今回は、Androidでお試し実装をしてみました。
なので、AndroidアプリにLottieを追加する際の手順についての説明になります。
手順1: SupportLibraryをAndroidXに変更する。
すでにAndroidXに変更済みの場合は、この手順は飛ばしてOKです。
Lottieの最新バージョンは、2.8.0(2018/11/15現在)なのですが、このバージョンから、SupportLibraryを使用しているプロジェクトには、Lottieを追加することができないようになりました。
そのため、SupportLibraryをAndroidXに変更する必要があります。
手順は以下のとおりです。
- AndroidStudioを3.2にアップデートする。
- Refactor > Migrate to AndroidX を選択する。
- SupportLibraryをAndroidXに置き換える処理を実行する。
※ 注意点
compileSdkのバージョンが28以上、gradleのバージョンが3.2.0以上でないとこの機能は使用できないので、それぞれのバージョンが低い場合は、上げる対応を行ってください。
手順2: gradleにLottieを追加する。
build.gradleファイルに、以下のようにLottieリポジトリを追加してください。
dependencies {
implementation 'com.airbnb.android:lottie:2.8.0'
}
手順3: レイアウトファイルにLottieAnimationViewを追加する。
アニメーションを表示させたい位置に、LottieAnimationViewを置きます。
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
基本的なパラメータ以外に以下のようなパラメータを設定する事ができます。
- 自動的にアニメーションをループさせたい場合
lottie_loopパラメータにtrueを設定します。
app:lottie_loop="true"
- アニメーションファイルの読み込みが完了した際に自動的に再生をしたい場合
lottie_autoPlayパラメータにtrueを設定します。
app:lottie_autoPlay="true"
手順4: 読み込ませたいアニメーションファイルをLottieAnimationViewにセットする。
レイアウトファイルで追加する場合
レイアウトファイルから、使用するアニメーションを指定する場合は、以下のパラメータを設定します。
アニメーションのファイルは、Rawやassetsなどに置くことができます。
app:lottie_rawRes="@raw/hello_world"
// or
app:lottie_fileName="hello_world.json"
コードから追加する場合
コードから、使用するアニメーションを指定する場合は、以下のようにセットすることができます。
animation_view.setAnimation(R.raw.hello_world)
or
animation_view.setAnimation("hello_world.json")
Lottieを使ってみて
簡単な手順でアニメーションが使用できるようになるので、画像だけではなく動きのあるアプリにしたい場合は、使用してみる価値は十分にあると思います。
アニメーションファイルも、自分で作成する以外にも、こちらから使用したいアニメーションを探すこともできます。
おもしろいアプリを作ってみたい場合は、Lottieの導入を検討する価値アリだと思います。
ぜひ試してみてください！
Lottieのサンプルアプリが、GooglePlayStoreで公開されているので、
こちらをインストールしてどんな感じなのかも見てみてください。
https://play.google.com/store/apps/details?id=com.airbnb.lottie
参考にしたサイト
https://github.com/airbnb/lottie-android
http://airbnb.io/lottie/android/android.html