jetpack中可以显示gif动画吗？

Question

我正在尝试使用 jetpack 在我的启动屏幕中实现 gif。按照建议尝试了这个，但没有输出。我错过了什么？

val 上下文 = LocalContext.current

val imageLoader = ImageLoader.Builder(context)
    .componentRegistry {
        if (SDK_INT >= 28) {
            add(ImageDecoderDecoder(context))
        } else {
            add(GifDecoder())
        }
    }
    .build()


Image(
    painter = rememberImagePainter(
        imageLoader = imageLoader,
        data = R.id.mygif,
        builder = {
            size(OriginalSize)
        }
    ),
    contentDescription = null,
    modifier = Modifier
        .padding(top = 100.dp)
)

Answer 1

对于那些仍在寻找答案的人，这里是Coil中的更新版本（因为 LocalImageLoader 已被弃用）。

安装步骤相同：

• 添加coil-compose
的实现
• 添加 coil-gif
的实现

用途：

@Composable
fun Content() {
    val imageLoader = ImageLoader.Builder(LocalContext.current)
        .components {
            if (SDK_INT >= 28) {
                add(ImageDecoderDecoder.Factory())
            } else {
                add(GifDecoder.Factory())
            }
        }
        .build()

    Image(
        painter = rememberAsyncImagePainter(
            ImageRequest.Builder(LocalContext.current)
                .data(data = R.drawable.mettaton_battle_box)
                .apply(block = fun ImageRequest.Builder.() {
                    size(Size.ORIGINAL)
                }).build(),
            imageLoader = imageLoader
        ),
        contentDescription = null,
    )
}

Answer 2

显然 Compose 不支持开箱即用的 gif，我在文档中找不到任何对 gif 文件的引用。然而，处理 gif 的流行库之一是Coil。

-> 这是 Compose 的线圈： https://coil-kt.github.io/coil/compose/

-> 确保添加 gif 扩展名： https://coil-kt.github.io/coil/gifs/

-> 您必须覆盖 ImageLoader 并添加 gif 扩展名： https://coil-kt.github.io/coil/compose/#localimageloader

Answer 3

我找到了解决方案，这是一个例子。

我的组件：

@Composable
fun ImageGif(
    modifier: Modifier,
    @DrawableRes gif: Int
) {
    val context = LocalContext.current
    val imageLoader = ImageLoader.Builder(context)
        .components {
            if (Build.VERSION.SDK_INT >= 28) {
                add(ImageDecoderDecoder.Factory())
            } else {
                add(GifDecoder.Factory())
            }
        }
        .build()
    Image(
        modifier = modifier,
        painter = rememberAsyncImagePainter(
            ImageRequest.Builder(context).data(data = gif)
                .apply(block = {
                    size(Size.ORIGINAL)
                }).build(), imageLoader = imageLoader
        ),
        contentDescription = null
    )
}

然后这样称呼它：

ImageGif(
   modifier = Modifier
       .size(80.dp)
       .clip(RoundedCornerShape(8.dp)),
   gif = R.drawable.your_gif
)