Androidアプリ開発で差をつける！Lottieを使ったアニメーション実装

こんにちわ。昨年(23年末)に開発者登録し、アプリのリリースを始めたzm softです。開発者向けのアプリもリリースを予定していますので、よければご確認ください。

皆さんはアプリ内でアニメーション表示をつかっていますか？少しアニメーションがあるだけでアプリとして分かりやすくなったり見栄えが良くなったりしますよね？そこで、本日は、androidアプリでアニメーション表示をする話を書こうと思います。

LottieAnimation

私が使用しているのは、アニメーション表示ライブラリであるLottieAnimatiinです。比較的簡単に軽量のアニメーション表示ができるので利用しています。

どんなアニメーション表示ができるか/アニメーションの種類

まず、このライブラリでの良い点は、無料で利用できるアニメーションの豊富さです。例えば、以下のようなアニメーションがあります。

このようなアニメーションはLottieFilesの公式サイトで公開されています。有料のアニメーションも多数ありますが、無料に絞って検索をして出てくるものだけでも十分に利用ができます。基本的に私はアニメーションをイチから作るスキルもエネルギーもないため、なにか動きが欲しいときにはまずは、このサイトから使えるものがないかを考えます。例えば、以下のようなアニメーションを使うことで、初回表示時によくあるクリック箇所をユーザーに教えるといった表現ができます。私は実際にこの右側のアニメーションを利用して、ユーザーへの操作案内をするようにしました。

ポイントは手軽さ

実装においてもかなりシンプルに対応できます。例えば、決まったレイアウトにアニメーションを表示するだけであれば、以下のような形で定義するだけで動きます。ロジックの実装をしなくても動作するって良いですよね。 

Lottieの簡単な実装方法

Lottieの実装は非常にシンプルです。特定のレイアウトにアニメーションを埋め込むだけで、追加のロジックなしで動作します。

実装例:

   <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_id"
        app:lottie_rawRes="@raw/your_lottie_animation"/>

Lottieの基本的な使い方

Lottieの大まかな使い方は以下の通りです。

• ライブラリの組み込み(build.gradleの修正)
• アニメーションファイルの取得と配置
• レイアウトファイルの設定
• アニメーションのカスタマイズ

具体的な実装例とコード

以下に、Lottieを使用する際の具体的な実装例を提供します。これには、ライブラリの取り込み、アニメーションファイルの配置方法、レイアウトファイルの設定方法、さらにアニメーションのカスタマイズ方法が含まれます。

build.gradleへの記載/ライブラリの取り込み:
まずは、ライブラリ取り込んでlottieを使える状態にします。
特に組み合わせ等の問題がなければ、最新環境を利用してください。

dependencies {
    implementation 'com.airbnb.android:lottie:3.4.0'
}

アニメーションファイルの配置:
LottieFilesの公式サイトから好きなアニメーションファイル(.json)をダウンロードし、アプリのres/rawフォルダに配置します。利用したいアニメーションを見つけて、ワークスペースに保存したうえでダウンロードボタンからダウンロードができます。ダウンロードは、無料ですがユーザー登録が必要になります。配置先は、rawフォルダです。フォルダがない場合には作成してください。また、ファイル名はandroidの命名規則に従う形で任意に変更してください。(規則に従わない場合は、以下のようにエラー表示されます。)

レイアウトファイルの設定:
XMLレイアウトにLottieAnimationViewを追加し、ダウンロードしたアニメーションファイルを参照できるようにします。

アニメーションのカスタマイズ:
必要に応じて、アニメーションの挙動をカスタマイズしてください。アニメーションの設定では、以下のようなことが行えます。

• ループ再生の有無
• ループ回数の指定
• 再生スピードの指定(逆再生を含む)

動的な処理を追加すれば、好きなタイミングで再生/停止をしたり、再生速度を変えたりもできます。

まずは、静的な指定の仕方についてです。それぞれ以下の指定によりアニメーション動作が変わります。

   <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_id"
        android:scaleType="centerCrop"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_speed="0.15" 
        app:lottie_rawRes="@raw/your_lottie_animation"/>

この例では、your_lottie_animation.jsonのファイルを0.15倍の再生速度で自動再生 かつ 繰り返し再生しています。

次に動的な処理です。

lottieAnimationView.playAnimation()

上記処理で再生ができます。再生以外にも設定を変更して停止などスピードを変えたりもできます。以下のようにリスナーをセットし、再生の終了を検知して処理をすることもできます。

        lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
            override fun onAnimationStart(animation: Animator) {
                // アニメーション開始時の処理
            }

            override fun onAnimationEnd(animation: Animator) {
                // アニメーション終了時の処理
            }

            override fun onAnimationCancel(animation: Animator) {
                // アニメーションがキャンセルされた時の処理
            }

            override fun onAnimationRepeat(animation: Animator) {
                // アニメーションがリピートされる時の処理
            }
        })

注意点とトラブルシューティング

Lottieは非常に便利ですが、いくつかの注意点があります。特に、オブジェクトの位置変更が期待通りに機能しないことがあるようです。また、アニメーション終了時の処理に関するスタックオーバーフローの問題や、onPause後の挙動についても説明します。

トラブルシューティングの例1:
私の実装の問題ですがアニメーション終了時の処理のハンドリングの仕方でスタックオーバーフローを引き起こしました。具体的には、アニメーションの最後までいったときに逆再生し、再生と逆再生を繰り返す用にした処理に問題がありました。再生の終了時に再生方向を変えてplayAnimation()をし直すようにしていたことで再起呼び出しとなり、再生の度にスタックが詰みあがり、アプリが落ちる現象が発生し、PlayStoreでのアップデートを拒絶されてしまいました。以下のようにメインスレッドへのポストとしキューへの積み直しをすることで問題を解決しました。

        lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
            override fun onAnimationStart(animation: Animator) {
                // アニメーション開始時の処理
            }

            override fun onAnimationEnd(animation: Animator) {
                // アニメーション終了時の処理
                lottieAnimationView.speed = lottieAnimationView.speed*(-1) // 逆再生のためにスピードを逆にする
                lottieAnimationView.post {
                    // 直接呼ぶと再起呼び出しでスタックオーバーフローするのでPOSTする
                    if(isAttachedToWindow) {
                        lottieAnimationView.playAnimation()
                    }
                }
            }

            override fun onAnimationCancel(animation: Animator) {
                // アニメーションがキャンセルされた時の処理
            }

            override fun onAnimationRepeat(animation: Animator) {
                // アニメーションがリピートされる時の処理
            }
        })

トラブルシューティングの例2:
もう一つ気を付けなければならないのはonPause後の処理です。不要な動作をさせないため、バックグラウンドでのanimationを止めるべきでしょう。

    override fun onResume(owner: LifecycleOwner) {
        super.onResume(owner)
        // アニメーションを開始
        lottieAnimationView.playAnimation()
    }

    override fun onPause(owner: LifecycleOwner) {
        lottieAnimationView.cancelAnimation()
        super.onPause(owner)
    }

しかし、アニメーションの終了時等に処理を行なっている場合には、これだけでは不十分でした。アニメーションの終了とほぼ同時にバックグラウンド回った際の挙動を意識する必要があります。裏でアニメーションをしないように再生を止めたとしても、タイミングによっては裏にまわった後にonAnimationEnd等が走ります。そのため、そのあたりのチェックをせず、UIを触っていたりするとExceptionやアプリが落ちる動作につながります。そこで前述のコードの以下の部分ように、親ビューがデタッチされていないかどうかをチェックし、再処理を行う必要がありました。

                    if(isAttachedToWindow) {
                        binding.lottieBackground.playAnimation()
                    }

まとめ

Lottieは、アプリのUIを向上させるための強力なツールです。無料で利用できるアニメーションが豊富で、実装もシンプルです。注意点を理解し、適切に対処することで、アプリ開発における大きなメリットを享受できます。多少の注意点はありますが全体的に非常に使いやすく、無料で使えるリソースも多いことから素晴らしいライブラリだと思います。アプリの見た目を良くするのに一役買ってくれるのは間違いないと思うので是非お試しください。