![](https://developer.android.com/static/training/animation/videos/drawable-animation.gif?authuser=9&hl=zh-tw)
在某些情況下,圖片需要動畫。如果您想以非同步方式顯示 自訂載入動畫,由多張圖片組成。或者,如果您希望圖示在使用者 動作。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
:
AnimatedVectorDrawable
。向量可繪項目 (AVD) 動畫預覽
Android Studio 中的向量可繪項目工具可用於預覽動畫
可繪製資源。這項工具可讓您預覽 <animation-list>
。
<animated-vector>
,以及以下位置的 <animated-selector>
項資源:
Android Studio,可讓您更輕鬆地修正自訂動畫。
![使用者在 Android Studio 中預覽及播放動畫](https://developer.android.com/static/studio/images/releases/avd-preview.gif?authuser=9&hl=zh-tw)
如需詳細資訊,請參閱
AnimatedVectorDrawable
。