Jetpack Compose 中使用 Lottie 动画

Posted 2021-10-15 fundroid_方卓

从事 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"))

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