Compose 中的動畫向量圖片

在 Compose 中製作向量動畫的方法有幾種。您可以使用下列任一項目:

  • AnimatedVectorDrawable 檔案格式
  • 搭配使用 Compose 動畫 API 的 ImageVector,如 這篇 Medium 文章所述
  • 第三方解決方案,例如 Lottie

動畫向量可繪項目 (實驗功能)

沙漏,呈現動畫內容並旋轉
圖 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
    )
}

有關可繪項目檔案格式的詳細資訊請參閱「以動畫方式呈現可繪項目圖形」。