如何在Compose Multiplatform中嵌入并播放Lottie动画？

核心问题解答 #

有适用于Compose Multiplatform（CMP）的Lottie库，Airbnb官方提供了lottie-compose-multiplatform，支持Android、iOS、桌面（Windows/Linux/macOS）、Web（JS/WASM）全平台。

嵌入步骤 #

1. 添加依赖 #

在模块级build.gradle.kts中引入最新版本的库：

dependencies {
    implementation("com.airbnb.android:lottie-compose-multiplatform:6.4.0") // 替换为最新版本号
}

2. 准备资源 #

将通过Bodymovin导出的Lottie JSON文件，放在项目的commonMain/resources目录下，确保所有平台都能访问该资源。

3. 加载并显示动画 #

基础播放

在通用Compose代码中直接使用组件加载动画：

import com.airbnb.lottie.compose.LottieAnimation
import com.airbnb.lottie.compose.LottieCompositionSpec
import com.airbnb.lottie.compose.rememberLottieComposition

@Composable
fun BasicLottieDemo() {
    val composition = rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.your_animation_file) // 替换为你的JSON资源名
    )
    
    LottieAnimation(composition = composition.value)
}

控制播放状态

如需循环播放、从头触发等控制逻辑，使用rememberLottieAnimatable：

import com.airbnb.lottie.compose.*
import androidx.compose.runtime.LaunchedEffect

@Composable
fun ControllableLottie() {
    val composition = rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.your_animation_file))
    val animatable = rememberLottieAnimatable()
    
    // 动画加载完成后启动循环播放
    LaunchedEffect(composition.value) {
        composition.value?.let {
            animatable.animate(
                composition = it,
                iterations = LottieConstants.IterateForever
            )
        }
    }
    
    LottieAnimation(animatable = animatable)
}

各平台注意事项 #

• Android/iOS/桌面：资源放在commonMain/resources即可自动识别，无需额外配置。
• Web：JSON资源会被自动打包，JS/WASM环境下可直接加载，无需特殊处理。

相关问题补充 #

• Android端从头播放：触发事件时调用animatable.snapTo(0f)重置进度，再重新启动动画即可。
• 跨平台资源共享：将Lottie JSON放在commonMain/resources，所有平台可直接访问，无需重复复制资源。

内容的提问来源于stack exchange，提问作者Mahozad