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

以動畫呈現可繪項目圖形

圖 1.可繪項目動畫。

。

在某些情況下，圖片需要動畫。如果您想以非同步方式顯示自訂載入動畫，由多張圖片組成。或者，如果您希望圖示在使用者動作。Android 提供兩種可繪項目動畫選項。

第一個選項是使用 AnimationDrawable。這個可指定多個可繪項目檔案，逐一顯示即可建立動畫第二種做法是使用 AnimatedVectorDrawable，可讓您為屬性建立動畫向量可繪項目的容器。

使用 AnimationDrawable

建立動畫的其中一種方法是載入一系列可繪製資源 (例如電影膠捲)。 AnimationDrawable 類別是這些可繪項目動畫的基礎。

您可以在程式碼中使用 AnimationDrawable 定義動畫的影格類別 API，但只要使用列出影格的單一 XML 檔案，即可輕鬆定義這些影格組成動畫。這類動畫的 XML 檔案位於 res/drawable/ 專屬目錄在這種情況下，操作說明會提供每個畫格。

XML 檔案包含 <animation-list> 元素做為根節點，一系列子項 <item> 節點，每個節點都定義影格，也就是可繪製資源以及持續時間以下是 Drawable 動畫的 XML 檔案範例：

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

此動畫可播放三個影格。設定 android:oneshot 設為 true 的清單屬性會循環顯示一次，然後停止並按住最後一個畫面如果將 android:oneshot 設為 false，以及循環播放動畫

如果您將這個 XML 儲存為 rocket_thrust.xml 中的 res/drawable/ 新增至 View 做為背景圖片，然後請呼叫 start() 以播放。以下活動範例將動畫加入 ImageView，之後是動畫使用者輕觸螢幕時：

Kotlin

private lateinit var rocketAnimation: AnimationDrawable

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)

    val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
        setBackgroundResource(R.drawable.rocket_thrust)
        rocketAnimation = background as AnimationDrawable
    }

    rocketImage.setOnClickListener({ rocketAnimation.start() })
}

Java

AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
  rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
  rocketAnimation = (AnimationDrawable) rocketImage.getBackground();

  rocketImage.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        rocketAnimation.start();
      }
  });
}

請務必注意，start() 方法上呼叫的無法在應用程式的 onCreate() 方法期間呼叫 AnimationDrawable Activity，因為 AnimationDrawable 尚未完全附加至視窗。如果要在不需互動的情況下立即播放動畫，可以從 onStart() Activity 中的方法，當 Android 在畫面上顯示檢視區塊時，就會呼叫此方法。

如要進一步瞭解 XML 語法以及可用標記和屬性，請參閱動畫資源。

使用動畫向量 Drawable

向量可繪項目是一種可擴充的可繪項目，不會產生像素化或模糊不清的問題。 AnimatedVectorDrawable 類別 - 和 AnimatedVectorDrawableCompat 用於回溯相容性，可讓您建立動畫，例如旋轉向量可繪項目，或將路徑資料變形為不同的圖片

您通常會在三個 XML 檔案中定義動畫向量可繪項目：

含有 <vector> 元素的向量可繪項目 res/drawable/。
含有 <animated-vector> 元素的動畫向量可繪項目 res/drawable/。
一或多個在以下位置使用 <objectAnimator> 元素的物件動畫 res/animator/。

動畫向量可繪項目可以為 <group> 和 <path> 元素。<group> 元素會定義一組路徑或子群組，而 <path> 元素會定義要繪製的路徑。

定義要建立動畫的向量可繪項目時，請使用 android:name 屬性為群組和路徑指派專屬名稱，這樣您就能透過動畫來參照這些群組和路徑定義。例如：

res/drawable/vectordrawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

動畫向量可繪項目的定義是指向量可繪項目中的群組和路徑依照名稱：

res/drawable/animatorvectordrawable.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>

動畫定義代表 ObjectAnimator或 AnimatorSet 物件。此範例中第一個動畫器會將目標群組旋轉 360 度：

res/animator/rotation.xml

<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

這個範例中的第二個動畫器會將向量可繪項目的路徑從一個形狀變換另一個例子。路徑必須與變形相容：指令數量必須相同以及每個指令的相同數量參數

res/animator/path_morph.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

以下為產生的 AnimatedVectorDrawable：

圖 2.AnimatedVectorDrawable。

向量可繪項目 (AVD) 動畫預覽

Android Studio 中的向量可繪項目工具可用於預覽動畫可繪製資源。這項工具可讓您預覽 <animation-list>。 <animated-vector>，以及以下位置的 <animated-selector> 項資源： Android Studio，可讓您更輕鬆地修正自訂動畫。

圖 3.Android Studio 中的向量可繪項目動畫工具。

如需詳細資訊，請參閱 AnimatedVectorDrawable。