从事 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 "/content/repositories/snapshots/" }}}

2. 基本使用

在 Jetpack Compose 中使用 Lottie 非常简单

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

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

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.jsonval composition3 by rememberLottieComposition(LottieCompositionSpec.Asset("animations/animation.json"))

progress是动画进度，后文介绍其他动画配置，例如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

@Stableclass 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),)}