Android ComposeUI ——Lottie 动画

学习笔记：

---

一、简介

  Lottie 是一个可以在iOS、Android和React Native平台，实时渲染After Effects动画，使应用程序可以像使用静态图像一样轻松地使用动画的库Lottie源码。

二、添加 Lottie 依赖项

  在使用时，你需要在 build.gradle(app) 脚本文件中，添加相应的依赖：

    //lottie动画库-------start
    implementation 'com.airbnb.android:lottie:6.0.0'
    implementation "com.airbnb.android:lottie-compose:6.0.0"
    //lottie动画库-------end

三、Lottie 资源

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

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

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

四、创建 Lottie 动画

  1、首先加载动画资源：

        // 加在 Lottie资源
        val lottieComposition by rememberLottieComposition(
            // "lottie.json" 与 “lottie/” 我这是在 assets 目录里，“lottie/” 存放着相关照片
            spec = LottieCompositionSpec.Asset("lottie.json"),
            imageAssetsFolder = "lottie/"
        )

  Lottie 还提供了其他加载动画资源的方式：

sealed interface LottieCompositionSpec {

    /**
     * 从 res/raw 加载动画。
     */
    @JvmInline
    value class RawRes(@androidx.annotation.RawRes val resId: Int) : LottieCompositionSpec

    /**
     * 从互联网加载动画
     */
    @JvmInline
    value class Url(val url: String) : LottieCompositionSpec

    /**
     * 从任意文件加载动画
     */
    @JvmInline
    value class File(val fileName: String) : LottieCompositionSpec

    /**
     * 加载 asset 目录下的静态资源，即：手机目录下的静态资源
     */
    @JvmInline
    value class Asset(val assetName: String) : LottieCompositionSpec

    /**
     * 直接加载 json 字符串
     */
    @JvmInline
    value class JsonString(val jsonString: String) : LottieCompositionSpec

    /**
     * 从内容提供程序 URI 加载动画。
     */
    @JvmInline
    value class ContentProvider(val uri: Uri) : LottieCompositionSpec
}

  2、接着需要描述 Lottie 的动画状态：

        val lottieAnimationState by animateLottieCompositionAsState(
            composition = lottieComposition, // 动画资源句柄
            isPlaying = true, // 动画播放状态
            speed = 1f, // 动画速度状态
            restartOnPlay = true,// 暂停后重新播放是否从头开始
            iterations = iterations, // 设置循环播放次数
            cancellationBehavior = LottieCancellationBehavior.Immediately,  // 停止动画时的方式（立即停止、延迟停止）
            )

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

        LottieAnimation(
            lottieComposition,
            lottieAnimationState,
            modifier = Modifier.size(200.dp.resize())
                .aspectRatio(1f) // 保持宽高比
                .scale(scaleX = 2f, scaleY = 2f),    // 缩放
            // 当动画无法铺满布局时，就需要更改缩放规则了。
            contentScale = ContentScale.Crop    // 缩放规则
        )

五、最终源码

    @Composable
    fun ShowLottieView() {
        // 加在 Lottie资源
        val lottieComposition by rememberLottieComposition(
            spec = LottieCompositionSpec.Asset("lottie.json"),
            imageAssetsFolder = "lottie/"
        )
        val lottieAnimationState by animateLottieCompositionAsState(
            composition = lottieComposition, // 动画资源句柄
            isPlaying = true, // 动画播放状态
            speed = 1f, // 动画速度状态
            restartOnPlay = true,// 暂停后重新播放是否从头开始
            iterations = iterations,// 设置循环播放
            cancellationBehavior = LottieCancellationBehavior.Immediately,

            )
        LottieAnimation(
            lottieComposition,
            lottieAnimationState,
            modifier = Modifier.size(200.dp.resize())
                .aspectRatio(1f) // 保持宽高比
                .scale(scaleX = 2f, scaleY = 2f),
            contentScale = ContentScale.Crop
        )
    }

这里我就不展示效果图了，有不懂的可以私信。