Compose 中的动画矢量图像

在 Compose 中动画化矢量可以通过几种不同的方式实现。您可以使用以下任何一种方法

AnimatedVectorDrawable 文件格式
ImageVector 与 Compose 动画 API 配合使用，例如在这篇 Medium 文章中
像 Lottie 这样的第三方解决方案

动画矢量绘图 (实验性)

Hourglass animating its contents and rotating — **图 1.** Compose 中的动画矢量绘图

要使用 AnimatedVectorDrawable 资源，请使用 animatedVectorResource 加载绘图文件，并传入一个 boolean 值来切换绘图的起始和结束状态，从而执行动画。

@Composable
fun AnimatedVectorDrawable() {
    val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
    var atEnd by remember { mutableStateOf(false) }
    Image(
        painter = rememberAnimatedVectorPainter(image, atEnd),
        contentDescription = "Timer",
        modifier = Modifier.clickable {
            atEnd = !atEnd
        },
        contentScale = ContentScale.Crop
    )
}AnimationSnippets.kt

有关绘图文件格式的更多信息，请参阅动画化绘图图形。

为您推荐

注意：当 JavaScript 关闭时显示链接文本
加载图像 {:#loading-images}

基于值的动画

自定义动画