本頁面由 Cloud Translation API 翻譯而成。

Compose 中的動畫向量圖片

您可以透過幾種方式在 Compose 中為向量製作動畫。您可以使用下列任一方法：

AnimatedVectorDrawable 檔案格式
ImageVector 搭配 Compose 動畫 API，如這篇 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
    )
}AnimationSnippets.kt

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

為您推薦

注意：系統會在 JavaScript 關閉時顯示連結文字
載入圖片 {:#loading-images}

以價值為準的動畫

自訂動畫