以動畫呈現可繪項目圖形

試試 Compose

Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何在 Compose 中使用動畫。

動畫向量可繪項目 →

在某些情況下，圖片需要動畫效果。如果您想顯示由多張圖片組成的自訂載入動畫，或想在使用者執行動作後變形圖示，這項功能就非常實用。Android 提供兩種可繪項目動畫製作選項。

第一種方式是使用 AnimationDrawable。您可以指定多個靜態可繪項目檔案，一次顯示一個，藉此建立動畫。第二種方法是使用 AnimatedVectorDrawable，為向量可繪項目的屬性製作動畫。

使用 AnimationDrawable

如要建立動畫，其中一種方法是載入一系列可繪製資源，就像一捲底片。AnimationDrawable 類別是這類可繪項目動畫的基礎。

您可以使用 AnimationDrawable 類別 API 在程式碼中定義動畫影格，但使用單一 XML 檔案列出組成動畫的影格，會比較容易定義。這類動畫的 XML 檔案位於 Android 專案的 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 儲存為專案 res/drawable/ 目錄中的 rocket_thrust.xml，您可以將其新增為 View 的背景圖片，然後呼叫 start() 播放。以下範例活動會在動畫新增至 ImageView 後，於觸控螢幕時播放動畫：

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

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();
      }
  });
}

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

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

使用 AnimatedVectorDrawable

向量可繪項目是一種可繪項目，可縮放大小，不會出現象素化或模糊不清的情況。AnimatedVectorDrawable 類別 (以及為回溯相容性提供的 AnimatedVectorDrawableCompat) 可讓您為向量可繪項目的屬性製作動畫，例如旋轉向量可繪項目，或變更路徑資料，將向量可繪項目變形為其他圖片。

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

• 向量可繪項目，其中 res/drawable/ 含有 <vector> 元素。
• 動畫向量可繪項目，其中 <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

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
      android:duration="6000"
      android:propertyName="rotation"
      android:valueFrom="0"
      android:valueTo="360" />
</set>

這個範例中的第二個動畫師會將向量可繪項目的路徑從一個形狀變形為另一個形狀。路徑必須相容於變形：路徑必須有相同數量的指令，且每個指令的參數數量也必須相同。

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：

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

Android Studio 的「向量可繪項目動畫」工具可讓您預覽可繪製資源動畫。您可以在 Android Studio 中預覽 <animation-list>、<animated-vector> 和 <animated-selector> 資源，以便輕鬆修正自訂動畫。

詳情請參閱 AnimatedVectorDrawable 的 API 參考資料。