[Android] Lottieでかわいいアニメーションを表示してみた

モバイルアプリサービス部の浜田です！

最近、アプリを使っていると軽快なアニメーションを見かけることが増えてきました。

どう実装されているの？GIF画像？それともコードでゴリゴリ書くの？と思って調べてみると、「Lottie」というライブラリが見つかったので、Android向けのライブラリを試してみました。

iOS向けのライブラリについては以下の記事を参考にしてください。

• [iOS][Swift4.0] After Effectsのアニメーションを手軽に入れられるlottie-ios ｜ DevelopersIO

Lottieとは

• Lottie

「Adobe After Effects」で作成されたアニメーションは、「Bodymovin」という拡張機能を使用することでJSONファイルとして出力できます。

このJSONファイルを使用して、Lottieは様々なプラットフォームで同じアニメーションを表示・制御できます。

2018年12月現在、以下のプラットフォーム向けのライブラリが活発に開発・メンテナンスされているようです。

• Android: github.com/airbnb/lottie-android
• iOS: github.com/airbnb/lottie-ios
• Web: github.com/airbnb/lottie-web
• React Native: github.com/react-native-community/lottie-react-native

そのほか、モバイル(Xamarin、NativeScript、Titanium、Windows UWP)、Webフレームワーク(React、Vue、Angular)向けのライブラリが、Lottieコミュニティの有志によって開発されています。

• Other Platforms · Lottie

環境

Android Studio

Android Studio 3.2.1
Build #AI-181.5540.7.32.5056338, built on October 9, 2018
JRE: 1.8.0_152-release-1136-b06 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.14.2

動作検証端末

下記設定のエミュレータ。

• Pixel 2 Android 9.0 (API 28) x86
• Nexus 4 Android 4.4 (API 19) x86

使用するライブラリのバージョン

この記事ではLottie for Androidのバージョン2.8.0を使用しました。

• airbnb/lottie-android at v2.8.0

下記のコミットでREADMEに記載されたとおり、2.8.0以降のバージョンはAndroid Xのプロジェクトでのみ使用できます。

• Improved README and CHANGELOG regarding androidx. · airbnb/lottie-android@65c5ee8

Lottie 2.8.0 and above only supports projects that have been migrated to androidx for more information, read Google's migration guide.

新規プロジェクトの作成

まず、Android Studioを使用して新規プロジェクトを作成します。 以下の設定で、アプリケーション名などは任意のものを指定してください。

• Create Android Project:
  • include Kotlin support: ON
• Target Android Devices:
  • Phone and Tablet: ON
• Add an Activity to Mobile:
  • Empty Activityを選択
• Configure Activity:
  • Activity Name: MainActivityを入力
    • Generate Layout File: ON
  • Layout Name: activity_mainを入力
    • Backwards Compatibility (AppCompat): ON

Android Xのプロジェクトへ移行

Android Studio 3.2.1で作成した新規プロジェクトは、まだAndroid Xを利用する設定にはなっていません。使用するLottieのバージョン2.8.0ではAndroid Xのプロジェクトのみサポートしているため、移行する必要があります。

Android StudioのメニューからRefactor > Migrate to AndroidX...を実行して、各種ファイルをAndroid Xの設定に移行します。

• Migrating to AndroidX  |  Android Developers

build.gradleにLottieのリポジトリを追加

dependencies {
    // ...
    implementation "com.airbnb.android:lottie:2.8.0"
    // ...
}

アニメーションのJSONファイルを入手

今回は「LottieFiles - Free animation files build for Lottie, Bodymovin」というWebサイトで公開されている以下のアニメーションのファイルを使用させていただきました。

• Favourite app icon - LottieFiles

JSONファイルをプロジェクトに追加

ダウンロードしたファイルをプロジェクトのrawリソースフォルダに追加します。

レイアウトにアニメーションを表示するViewを追加

次のようにcom.airbnb.lottie.LottieAnimationViewを追加します。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/favourite_app_icon" />

</androidx.constraintlayout.widget.ConstraintLayout>

LottieAnimationViewの独自の属性で次の設定を行っています。

• app:lottie_rawRes: rawリソースフォルダに追加したfavourite_app_icon.jsonファイルのリソース名を指定しています。
• app:lottie_autoPlay: 自動で再生を開始するか指定
• app:lottie_loop: ループ再生するか指定

動作確認

簡単にかわいいアニメーションを表示できました！

さいごに

Google Playで公開されているAirbnb社製のサンプルアプリでLottieの様々な機能を試すことができます。色々調べていきたいと思います。

• Lottie - Google Play のアプリ

参考文献

• Android · Lottie Getting Started