Jetpack ComposeベースのAndroidアプリにLottieファイルを使って動きのある起動画面を作りました。

以下の手順で実施しました。

1. SVGファイルの作成
2. SVGファイルを元にLottieファイルを作成
3. Jetpack ComposeにLotieファイルを使ったComposableを定義して実装

Lottieファイルとは

Lottieファイルは、Airbnb社が開発したアニメーションライブラリで、json形式で定義されたファイルを元にアニメーションを行うライブラリです。

• 動画に比べて圧倒的に容量が軽い
• どんなプラットフォームでも（ライブラリがあれば）動作する

みたいな利点があるようです。

Lottieファイルの作成

Lottieファイルを作るには本来なら、Adobe社が提供するAfter Effectsなどのツールを駆使しないと作れないようなのですが、そこまで時間がないので、Web上のツールを利用させていただきました。

※ SVGファイルの作成は割愛しますが、画像ファイルをSVGファイルにうまく変換してくれるようなサービスを使って土台を作っておくと楽でした。

LottieFilesというサービスに登録して、Convert SVG to Lottieのサービスを利用しました。

SVGファイルから簡単なアニメーションをつけてくれるので、ノンデザイナーでも簡単にLottieファイルを作成できました。

Jetpack ComposeにLotieファイルを使ったComposableを定義して実装

事前準備

作成したjson形式のLottieファイルをsplash.jsonという名前でres/rawディレクトリに格納しておきます。

ライブラリのインストール

airbnb/lottie-androidを利用しました。

dependencies {
  // この行を追加
  implementation 'com.airbnb.android:lottie-compose:1.0.0-beta03-1'
}

Composableの実装

以下のような感じになりました。

こちらの記事が参考になりました。

• まずはlottieファイルを読み込んでアニメーションするだけのcomponentを作成します

@Composable
fun SplashAnimationView(animationState: LottieAnimationState) {
    val animationSpec = remember { LottieAnimationSpec.RawRes(R.raw.splash) }
    LottieAnimation(
        spec = animationSpec,
        modifier = Modifier.size(120.dp),
        animationState = animationState,
    )
}

• ☝のコンポーネント使って、Splash画面を作ります。
  • アニメーションが終了したタイミングでコールバックを呼べるようにしておきます。
  • Primary500は個別に定義したメインのテーマカラーです。

@Composable
fun SplashView(onFinished: () -> Unit) {
    val animationState = rememberLottieAnimationState(autoPlay = true, repeatCount = 1)
    Box {
        Surface(color = Primary500, modifier = Modifier.fillMaxSize()) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Column(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    if (animationState.isPlaying) {
                        SplashAnimationView(animationState = animationState)
                    } else {
                        onFinished()
                    }
                }
            }
        }
    }
}

• 最後にこちらをメイン画面から呼び出して完成になります。
  • lottieファイルのアニメーションが終了したら、HomeViewを表示するような感じにしました。

@Composable
fun MainView () {
    val showSplashScreen = remember { mutableStateOf(true) }

    if (showSplashScreen.value) {
        SplashView {
            showSplashScreen.value = false
        }
    } else {
        HomeView()
    }
}

以上になります。