顯示動畫圖片

您可以載入可繪檔案來顯示動畫圖片,在應用程式中打造更具互動性且引人入勝的使用者體驗。動畫圖片可用於建立載入指標、成功或錯誤指標,方便進行遊戲開發,以及執行其他各種 UI 功能。

版本相容性

這個實作方式需要將專案 minSDK 設為 API 級別 21 以上。

依附元件

顯示動畫圖片

以下程式碼會顯示動畫向量,自動在兩種狀態之間切換:

@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
    )
}

程式碼的重點

  • 載入向量資源,讓繪圖屬性隨時間變化。
  • Image 例項會使用 Painter 例項執行動畫,該動畫是由 rememberAnimatedVectorPainter() 函式從 AnimatedImageVectorboolean 狀態建立。
  • atEndtrue 時,Painter 例項就會停止動畫。

結果

沙漏動畫效果,呈現內容並旋轉
圖 1. Compose 中的動畫向量可繪項目。

包含此指南的集合

本指南是精選的快速指南系列之一,涵蓋更廣泛的 Android 開發目標:

瞭解如何運用明亮吸睛的視覺元素,為 Android 應用程式打造美觀的視覺效果。

有問題或意見回饋嗎?

請前往常見問題頁面,瞭解快速指南或與我們聯絡,分享您的想法。

Jetpack Compose is Android's recommended modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

更新時間:Mar 4, 2025