如何在Compose Multiplatform中使用GIF图片？求解决方案

一、Lottie动画实现 #

Lottie有适配Compose Multiplatform的官方支持库，直接集成即可快速实现动画：

1. 在共享模块的build.gradle.kts中添加依赖：

dependencies {
    implementation("com.airbnb.android:lottie-compose-multiplatform:6.4.0")
}

2. 加载Lottie动画的示例代码：

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.airbnb.lottie.compose.LottieAnimation
import com.airbnb.lottie.compose.LottieCompositionSpec
import com.airbnb.lottie.compose.animateLottieCompositionAsState
import com.airbnb.lottie.compose.rememberLottieComposition
import com.airbnb.lottie.compose.LottieConstants

@Composable
fun LottieAnimationDemo() {
    val composition = rememberLottieComposition(LottieCompositionSpec.Asset("animation.json"))
    val progress by animateLottieCompositionAsState(
        composition = composition.value,
        iterations = LottieConstants.IterateForever
    )

    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        LottieAnimation(
            composition = composition.value,
            progress = { progress },
            modifier = Modifier.size(200.dp)
        )
    }
}

注意：将animation.json替换为你放在共享模块src/commonMain/resources目录下的Lottie动画文件。

二、GIF动画实现 #

推荐使用Coil的Compose Multiplatform扩展库，它原生支持GIF的加载与自动播放：

1. 在共享模块的build.gradle.kts中添加依赖：

dependencies {
    implementation("io.coil-kt:coil-compose-multiplatform:2.5.0")
}

2. 加载GIF的示例代码：

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import coil.compose.rememberAsyncImagePainter
import coil.compose.AsyncImage

@Composable
fun GifImageDemo() {
    // 加载网络GIF
    AsyncImage(
        model = "https://example.com/your-gif-file.gif",
        contentDescription = "GIF Animation",
        modifier = Modifier.size(200.dp)
    )

    // 加载本地GIF（文件放在src/commonMain/resources下）
    AsyncImage(
        model = "file:///android_asset/your-local.gif",
        contentDescription = "Local GIF",
        modifier = Modifier.size(200.dp)
    )
}

如果需要自定义播放行为（比如控制循环次数），可以通过AsyncImagePainter.Builder配置相关参数。

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