Jetpack Compose 中使用 Lottie 动画

超、凢脫俗 2022-09-13 00:28 219阅读 0赞

![在这里插入图片描述][d28cb7e6c35f4b3e86900227d8c11eaa.gif_pic_center]

> 从事 Android 开发的 都知道 airbnb 的 Lottie 库，如今它也支持在 Jetpack Compose 中使用了。  
> http://airbnb.io/lottie/\#/android-compose

# 1. 引入 lottie-compose #

--------------------

在 build.gradle 添加依赖如下：

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

当前最新稳定版本是 4.1.0

记得添加 repository 的地址

allprojects { 
        repositories { 
            ...
            maven {  url "https://oss.sonatype.org/content/repositories/snapshots/" }
        }
    }

# 2. 基本使用 #

--------------------

在 Jetpack Compose 中使用 Lottie 非常简单

@Composable
    fun Loader() { 
        val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
        val progress by animateLottieCompositionAsState(composition)
        LottieAnimation(
            composition,
            progress,
        )
    }

`LoadAnimation` 是加载 Lottie 的 Composable ，他接受以下参数，

1.  `LottieCompose` 是 Lottie json 文件解析后的信息，使用 `rememberLottieComposition(spec)` 保存解析后的状态。 `LottieCompositionSpec` 是一个枚举, 可以指定不同的数据源，比如 `res/raw`, `assets`, `string` 以及 `network` 等等：

val composition1 by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation))
    val composition2 by rememberLottieComposition(LottieCompositionSpec.Url("https://..."))
    // src/main/assets/animations/animation.json
    val composition3 by rememberLottieComposition(LottieCompositionSpec.Asset("animations/animation.json"))

1.  `progress` 是动画进度，后文介绍
2.  其他动画配置，例如`speed`, `dynamic properties`, `images`, `render mode (hardware or software)` 等等

# 4. 动画进度 #

--------------------

Compose 的动画也是通过 State 驱动运行的，Lottie动画也是一样，`animateLottieCompositionAsState` 类似 `animate*AsState`，`LottieAnimatable` 类似 `Animatable`

一般情况下，使用 animateLottieCompositionAsState() 控制动画进度足矣， 如果想要在 `LaunchEffect` 中跑动画，可以使用 LottieAnimatable

## animateLottieCompositionAsState() ##

val progress by animateLottieCompositionAsState(composition)

val progress by animateLottieCompositionAsState(
        composition,
        iterations = LottieConstants.IterateForever,
    )

val progress by animateLottieCompositionAsState(
        composition,
        clipSpec = LottieClipSpec.Progress(0.5f, 0.75f),
    )

## LottieAnimatable ##

@Stable
    class MyHoistedState { 
        val lottieAnimatable = LottieAnimatable()
        val somethingElse by mutableStateOf(0f)
    }

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation))
    val lottieAnimatable = rememberLottieAnimatable()
    LaunchedEffect(Unit) { 
        lottieAnimatable.animate(
            composition,
            iteration = LottieConstants.IterateForever,
            clipSpec = LottieClipSpec.Progress(0.5f, 0.75f),
        )
    }

[d28cb7e6c35f4b3e86900227d8c11eaa.gif_pic_center]: /images/20220828/8803fb1abfc0436c838be102f4b97287.png