Jetpack Compose 集成——LottieAnimation Compose 函数

依赖

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

基本用法

@Composable
fun LoadingScreen() {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
    val progress by animateLottieCompositionAsState(
        composition = composition,
        iterations = LottieConstants.IterateForever,
    )

    LottieAnimation(
        composition = composition,
        progress = { progress },
        modifier = Modifier.size(200.dp),
    )
}

三个核心函数

rememberLottieComposition

从各种来源加载 JSON 并解析为 LottieComposition：

// 从 raw 资源
rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))

// 从 assets
rememberLottieComposition(LottieCompositionSpec.Asset("loading.json"))

// 从 URL（异步加载）
rememberLottieComposition(LottieCompositionSpec.Url("你的 CDN 托管地址"))

// 从原始 JSON 字符串
rememberLottieComposition(LottieCompositionSpec.JsonString("""{...}"""))

返回的 composition 是 State<LottieComposition?>——加载过程中是 null，加载完才有值。

animateLottieCompositionAsState

创建动画进度的 State，自动处理循环、倍速、播放方向：

val progress by animateLottieCompositionAsState(
    composition = composition,
    iterations = 3,              // 循环 3 次
    speed = 1.5f,                // 倍速
    direction = LottieDirection.POSITIVE,
    isPlaying = true,            // 手动控制播放
    restartOnPlay = true,
    clipsPerLoop = null,         // 只播放部分帧
)

LottieAnimation

渲染组件，接受 composition 和 progress：

LottieAnimation(
    composition = composition,
    progress = { progress },       // 进度回调，每帧调用
    modifier = Modifier.size(200.dp),
    alignment = Alignment.Center,
    clipSpec = null,               // 可选的裁切面
)

手动控制播放

如果需要手动控制（比如点击播放、按状态跳转），可以用 animateLottieCompositionAsState 的 isPlaying 参数：

var isPlaying by remember { mutableStateOf(true) }

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

Button(onClick = { isPlaying = !isPlaying }) {
    Text(if (isPlaying) "暂停" else "播放")
}

加载状态处理

composition 加载过程中是 null，要做 null 检查：

@Composable
fun LoadingScreen() {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))

    if (composition != null) {
        val progress by animateLottieCompositionAsState(
            composition = composition!!,
            iterations = LottieConstants.IterateForever,
        )
        LottieAnimation(
            composition = composition!!,
            progress = { progress },
        )
    } else {
        // 加载中的占位
        CircularProgressIndicator()
    }
}