写动画不用愁，Lottie 已经支持 Jetpack Compose 啦！

概述

Lottie 是一款优秀的移动应用动画效果框架，支持为原生应用添加动画效果。Lottie 在不需要对代码进行重写的情况下让工程师更加方便的创建更丰富的动画效果，有了 Lottie 就不再需要使用 Gif 动画来展现效果，在移动开发领域 Lottie 已经广为人知。 伴随着 Jetpack Compose 1.0 的正式发布，Lottie 也同样支持了 Jetpack Compose。这篇文章将指引你如何在 Jeptack Compose 中使用 Lottie 动画。这篇文章所使用的 Lottie 动画文件来自 Lottie 官方网站 ，你可以在这里找到更多免费的 Lottie 动画文件。

添加 Lottie 依赖项

你需要 build.gradle(app) 脚本文件中，添加依赖项目。

implementation "com.airbnb.android:lottie-compose:4.0.0"

配置 Lottie 资源

你可以通过 Lottie 官方网站 或其他途径获取到你想要添加的Lottie动画对应静态 json 资源，或者你也可以使用URL方式。

如果你使用的是静态 json 文件方式，你可以将其放入 res/raw 目录下。

如果你使用的是URL方式，后续需要加载 lottie 时，你可以选用 URL 方式。

创建 Lottie 动画

首先，我们创建两个 mutableState 用于描述动画的速度与开始暂停状态。

var isPlaying by remember {

    mutableStateOf(true)

}

var speed by remember {

    mutableStateOf(1f)

}

下一步，我们需要加载我们预先准备好的 Lottie资源。 这里我选择使用本地res/raw目录下静态资源的方式。

val lottieComposition by rememberLottieComposition(

     spec = LottieCompositionSpec.RawRes(R.raw.lottie),

)

当然 Lottie 还为你提供了其他加载方式。

sealed interface LottieCompositionSpec {

    // 加载 res/raw 目录下的静态资源

    inline class RawRes(@androidx.annotation.RawRes val resId: Int) : LottieCompositionSpec


    // 加载 URL

    inline class Url(val url: String) : LottieCompositionSpec


    // 加载手机目录下的静态资源

    inline class File(val fileName: String) : LottieCompositionSpec


    // 加载 asset 目录下的静态资源

    inline class Asset(val assetName: String) : LottieCompositionSpec


    // 直接加载 json 字符串

    inline class JsonString(val jsonString: String) : LottieCompositionSpec

}

再接下来，我们还需要描述 Lottie 的动画状态。

val lottieAnimationState by animateLottieCompositionAsState (

    composition = lottieComposition, // 动画资源句柄

    iterations = LottieConstants.IterateForever, // 迭代次数

    isPlaying = isPlaying, // 动画播放状态

    speed = speed, // 动画速度状态

    restartOnPlay = false // 暂停后重新播放是否从头开始

)

最后，我们仅需要把动画资源句柄和动画状态提供给 LottieAnimation Composable 即可。

LottieAnimation(

    lottieComposition,

    lottieAnimationState,

    modifier = Modifier.size(400.dp)

)

效果展示

源代码

@Preview

@Composable

fun LottieDemo() {

    var isPlaying by remember {

        mutableStateOf(true)

    }

    var speed by remember {

        mutableStateOf(1f)

    }


    val lottieComposition by rememberLottieComposition(

        spec = LottieCompositionSpec.RawRes(R.raw.lottie),

    )


    val lottieAnimationState by animateLottieCompositionAsState (

        composition = lottieComposition,

        iterations = LottieConstants.IterateForever,

        isPlaying = isPlaying,

        speed = speed,

        restartOnPlay = false

    )



    Box(

        modifier = Modifier.fillMaxSize(),

        contentAlignment = Alignment.Center

    ) {

        Column {

            Text(

                text = "Lottie Animation In Jetpack Compose",

                fontSize = 30.sp

            )

            Spacer(modifier = Modifier.height(30.dp))

            LottieAnimation(

                lottieComposition,

                lottieAnimationState,

                modifier = Modifier.size(400.dp)

            )


            Row(

                horizontalArrangement = Arrangement.SpaceAround,

                modifier = Modifier.fillMaxWidth(),

                verticalAlignment = Alignment.CenterVertically

            ) {

                Row(

                    horizontalArrangement = Arrangement.SpaceBetween,

                    verticalAlignment = Alignment.CenterVertically

                ) {

                    Button(

                        onClick = {

                            speed = max(speed - 0.25f, 0f)

                        },

                        colors = ButtonDefaults.buttonColors(

                            backgroundColor = Color(0xFF0F9D58)

                        )

                    ) {

                        Text(

                            text = "-",

                            color = Color.White,

                            fontWeight = FontWeight.Bold,

                            fontSize = 20.sp,

                        )

                    }


                    Text(

                        text = "Speed ( $speed ) ",

                        color = Color.Black,

                        fontWeight = FontWeight.Bold,

                        fontSize = 15.sp, modifier = Modifier.padding(horizontal = 10.dp)


                    )

                    Button(

                        onClick = {

                            speed += 0.25f

                        },

                        colors = ButtonDefaults.buttonColors(

                            backgroundColor = Color(0xFF0F9D58)

                        )

                    ) {

                        Text(

                            text = "+",

                            color = Color.White,

                            fontWeight = FontWeight.Bold,

                            fontSize = 20.sp

                        )

                    }

                }


                Button(

                    onClick = {

                        isPlaying = !isPlaying

                    },

                    colors = ButtonDefaults.buttonColors(

                        backgroundColor = Color(0xFF0F9D58)

                    )

                ) {

                    Text(

                        text = if (isPlaying) "Pause" else "Play",

                        color = Color.White

                    )

                }

            }

        }

    }

}