如何在Jetpack Compose中插入矢量动画或矢量GIF图片？

你当前的写法有两个核心问题：

1. 语法错误：Alignment.Centerhorizontally 拼写错误，正确写法为 Alignment.CenterHorizontally
2. 功能逻辑错误：ImageBitmap.imageResource 会将drawable资源转换为静态Bitmap，丢失动画信息，普通Image组合项仅能展示静态图片，无法播放帧动画、GIF等动画类资源，仅会渲染第一帧。

对应正确实现分两种常见场景：

• 场景1：加载XML定义的帧动画（AnimationDrawable）
  无需引入第三方依赖，手动控制动画启停即可，代码如下：

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.graphics.painter.DrawablePainter
import androidx.core.content.ContextCompat
import android.graphics.drawable.AnimationDrawable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.remember

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(5.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    val context = LocalContext.current
    // 加载动画drawable资源
    val animationDrawable = remember {
        ContextCompat.getDrawable(context, R.drawable.anim) as AnimationDrawable
    }
    // 生命周期绑定：进入组合时启动动画，退出时停止动画
    DisposableEffect(Unit) {
        animationDrawable.start()
        onDispose {
            animationDrawable.stop()
        }
    }
    // 用DrawablePainter承载动画drawable
    Image(
        painter = DrawablePainter(drawable = animationDrawable),
        contentDescription = ""
    )
}

• 场景2：加载GIF/WEBP等动图资源
  推荐使用Coil Compose库实现，无需手动处理动画逻辑，代码更简洁：

1. 先在模块级build.gradle文件中添加依赖：

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

2. 业务代码实现：

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(5.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    AsyncImage(
        model = R.drawable.anim,
        contentDescription = ""
    )
}

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