LottieアニメーションをJetpack Composeで使用する

Jetpack Compose自体もUIのアニメーションはシンプルに実装できるフレームワークですが、Lottieを使うとより高度なアニメーションをデザイナー主導でリッチに表現することが手軽にできるようになります。

LottieはJetpack Composeにも対応しており、Jetpack Composeで組み立てているUIの中に簡単にLottieアニメーションを組み込むことができます。

まず、app/build.gradleにLottieの依存を追加します。

dependencies {
    implementation "com.airbnb.android:lottie-compose:4.2.1"
}

そして、src/main/res/raw/ディレクトリがなければ作成して、その中にLottieのJSONファイルを入れます。この記事ではこのファイルをmy_lottie_file.jsonだとして扱います。

あとは、Lottieアニメーションを配置したい場所にLottieAnimationComposableを入れるだけです。

@Composable
fun MyUi() {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.my_lottie_file))
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever,
    )
}

公式のリリースノートにいくつかの使い方の例が載っています。

上で紹介したコードはアニメーションを自動で開始して無限に繰り返しますが、一度だけアニメーションを再生したい場合はiterationsを省略（デフォルト値の1を使用）すれば良いですし、もっと細かくアニメーションを制御したかったらanimateLottieCompositionAsStateを使うと良いみたいです。