動畫資源

動畫資源可定義以下兩種動畫類型的其中之一:

屬性動畫
使用 Animator 修改特定時間範圍內的物件屬性值,藉此建立動畫。
視圖動畫

您可以使用視圖動畫架構建立兩種動畫類型:

屬性動畫

在 XML 中定義的動畫,可在特定的時間範圍內修改目標物件的屬性,例如背景顏色或 Alpha 值。

檔案位置:
res/animator/filename.xml
系統會把檔案名稱當做資源 ID。
編譯資源資料類型:
ValueAnimatorObjectAnimatorAnimatorSet 的資源指標。
資源參照:
Java 或 Kotlin 程式碼:R.animator.filename
XML:@[package:]animator/filename
語法:
<set
  android:ordering=["together" | "sequentially"]>

    <objectAnimator
        android:propertyName="string"
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["restart" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <animator
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["restart" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <set>
        ...
    </set>
</set>

檔案必須有單一根元素:<set><objectAnimator><valueAnimator>。您可以將動畫元素 (包括其他 <set> 元素) 組合到 <set> 元素中。

元素:
<set>
容納其他動畫元素 (<objectAnimator><valueAnimator> 或其他 <set> 元素) 的容器。代表 AnimatorSet

您可以指定巢狀 <set> 標記,進一步分組動畫。每個 <set> 都可以定義自己的 ordering 屬性。

屬性:

android:ordering
關鍵字。指定此組合中的動畫播放順序。
說明
sequentially依序播放此組合中的動畫。
together (預設)同時播放此組合中的動畫。
<objectAnimator>
在特定時間範圍內為物件的特定屬性建立動畫效果。代表 ObjectAnimator

屬性:

android:propertyName
字串。必要。要加入動畫效果的物件的屬性,透過其名稱參照。舉例來說,您可以為 View 物件指定 "alpha""backgroundColor"。不過,objectAnimator 元素不含 target 屬性,因此您無法在 XML 宣告中設定要加入動畫效果的物件。您必須藉由呼叫 loadAnimator() 來加載動畫 XML 資源,並呼叫 setTarget() 以設定包含此屬性的目標物件。
android:valueTo
浮點值、整數或顏色。必要。動畫屬性的結束值。顏色會以六位數的十六進制數字表示,例如 #333333。
android:valueFrom
浮點值、整數或顏色。動畫屬性的起始值。如未指定,則動畫會以透過屬性的 get 方法取得的值開始。顏色會以六位數的十六進制數字表示,例如 #333333。
android:duration
整數。動畫的時間長度 (以毫秒為單位)。預設值為 300 毫秒。
android:startOffset
整數。呼叫 start() 後,動畫延遲的毫秒數。
android:repeatCount
整數。重複播放動畫的次數。設為 "-1" 即可無限重複播放,此外,也可以設為正整數。舉例來說,"1" 值表示動畫會在初次播放後重複播放一次,因此總共會播放兩次。預設值為 "0",表示不重複播放。
android:repeatMode
整數。動畫播放至結尾處後的行為。android:repeatCount 必須設為正整數或 "-1",這項屬性才有作用。設為 "reverse" 可讓動畫在每次疊代時反向播放,設為 "restart" 則可讓動畫每次都從頭開始循環播放。
android:valueType
關鍵字。如果值是顏色,請勿指定此屬性。動畫架構會自動處理顏色值。
說明
intType指定動畫值為整數。
floatType (預設)指定動畫值為浮點值。
<animator>
在指定時間範圍內執行動畫。代表 ValueAnimator

屬性:

android:valueTo
浮點值、整數或顏色。必要。動畫的結束值。顏色會以六位數的十六進制數字表示,例如 #333333。
android:valueFrom
浮點值、整數或顏色。必要。動畫的起始值。顏色會以六位數的十六進制數字表示,例如 #333333。
android:duration
整數。動畫的時間長度 (以毫秒為單位)。預設值為 300 毫秒。
android:startOffset
整數。呼叫 start() 後,動畫延遲的毫秒數。
android:repeatCount
整數。重複播放動畫的次數。設為 "-1" 即可無限重複播放,此外,也可以設為正整數。舉例來說,"1" 值表示動畫會在初次播放後重複播放一次,因此總共會播放兩次。預設值為 "0",表示不重複播放。
android:repeatMode
整數。動畫播放至結尾處後的行為。android:repeatCount 必須設為正整數或 "-1",這項屬性才有作用。設為 "reverse" 可讓動畫在每次疊代時反向播放,設為 "restart" 則可讓動畫每次都從頭開始循環播放。
android:valueType
關鍵字。如果值是顏色,請勿指定此屬性。動畫架構會自動處理顏色值。
說明
intType指定動畫值為整數。
floatType (預設)指定動畫值為浮點值。
例如:

XML 檔案儲存在 res/animator/property_animator.xml

<set android:ordering="sequentially">
    <set>
        <objectAnimator
            android:propertyName="x"
            android:duration="500"
            android:valueTo="400"
            android:valueType="intType"/>
        <objectAnimator
            android:propertyName="y"
            android:duration="500"
            android:valueTo="300"
            android:valueType="intType"/>
    </set>
    <objectAnimator
        android:propertyName="alpha"
        android:duration="500"
        android:valueTo="1f"/>
</set>

如要執行此動畫,請將程式碼中的 XML 資源加載至 AnimatorSet 物件,然後在開始播放動畫組合之前,先為所有動畫設定目標物件。為方便起見,呼叫 setTarget() 會設定一個用於 AnimatorSet 所有子項的目標物件。以下程式碼說明如何執行這項操作:

Kotlin

val set: AnimatorSet = AnimatorInflater.loadAnimator(myContext, R.animator.property_animator)
    .apply {
        setTarget(myObject)
        start()
    }

Java

AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext,
    R.animator.property_animator);
set.setTarget(myObject);
set.start();
另請參閱:

視圖動畫

視圖動畫架構支援補間動畫和逐格動畫,兩者皆是在 XML 中宣告。以下章節說明如何使用這兩種方法。

補間動畫

在 XML 中定義的動畫,可對圖像執行旋轉、淡出、移動和延展等轉場效果。

檔案位置:
res/anim/filename.xml
系統會把檔案名稱當做資源 ID。
編譯資源資料類型:
Animation 的資源指標。
資源參照:
Java:R.anim.filename
XML:@[package:]anim/filename
語法:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@[package:]anim/interpolator_resource"
    android:shareInterpolator=["true" | "false"] >
    <alpha
        android:fromAlpha="float"
        android:toAlpha="float" />
    <scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float" />
    <translate
        android:fromXDelta="float"
        android:toXDelta="float"
        android:fromYDelta="float"
        android:toYDelta="float" />
    <rotate
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotX="float"
        android:pivotY="float" />
    <set>
        ...
    </set>
</set>

檔案必須具備單一根元素:<alpha><scale><translate><rotate>,或包含其他動畫元素群組 (包括巢狀 <set> 元素) 的 <set> 元素。

元素:
<set>
包含其他動畫元素 (<alpha><scale><translate><rotate>) 或其他 <set> 元素的容器。代表 AnimationSet

屬性:

android:interpolator
內插器資源。要套用至動畫的 Interpolator。此值必須是可指定內插器資源 (而非內插器類別名稱) 的資源參照。平台提供預設的內插器資源,您也可以自行建立內插器資源。如要進一步瞭解內插器,請參閱這節內容
android:shareInterpolator
布林值。如要在所有子項元素之間共用同一個內插器,請設為 "true"
<alpha>
淡入或淡出動畫。代表 AlphaAnimation

屬性:

android:fromAlpha
浮點值。開始不透明度偏移,0.0 表示透明,1.0 表示不透明。
android:toAlpha
浮點值。結束不透明度偏移,0.0 表示透明,1.0 表示不透明。

如要進一步瞭解 <alpha> 支援的屬性,請參閱 Animation 的類別參考資料。其 XML 屬性會由此元素繼承。

<scale>
調整大小的動畫。您可以透過指定 pivotXpivotY,指定圖片向外 (或向內) 縮放的中心點。舉例來說,如果這些值是 0.0 (左上角),所有變化都會向下及向右進行。代表 ScaleAnimation

屬性:

android:fromXScale
浮點值。開始 X 尺寸位移,1.0 表示不變。
android:toXScale
浮點值。結束 X,尺寸位移,1.0 表示不變。
android:fromYScale
浮點值。開始 Y 尺寸位移,1.0 表示不變。
android:toYScale
浮點值。結束 Y 尺寸位移,1.0 表示不變。
android:pivotX
浮點值。縮放物件時,X 座標會保持固定。
android:pivotY
浮點值。縮放物件時,Y 座標會保持固定。

如要進一步瞭解 <scale> 支援的屬性,請參閱 Animation 的類別參考資料。其 XML 屬性會由此元素繼承。

<translate>
縱向和/或橫向動作。代表 TranslateAnimation。支援這三種格式中任何一種的下列屬性:
  • -100 到 100 之間以「%」結尾的值,表示相對於自身的百分比。
  • -100 到 100 之間以「%p」結尾的值,表示相對於其父項的百分比。
  • 不含後置字串的浮點值,表示絕對值。

屬性:

android:fromXDelta
浮點值或百分比。開始 X 軸位移。表示方式:相對於正常位置的像素 (例如 "5")、相對於元素寬度的百分比 (例如 "5%"),或相對於父項寬度的百分比 (例如 "5%p")。
android:toXDelta
浮點值或百分比。結束 X 軸位移。表示方式:相對於正常位置的像素 (例如 "5")、相對於元素寬度的百分比 (例如 "5%"),或相對於父項寬度的百分比 (例如 "5%p")。
android:fromYDelta
浮點值或百分比。開始 Y 軸位移。表示方式:相對於正常位置的像素 (例如 "5")、相對於元素高度的百分比 (例如 "5%"),或相對於父項高度的百分比 (例如 "5%p")。
android:toYDelta
浮點值或百分比。結束 Y 軸位移。表示方式:相對於正常位置的像素 (例如 "5")、相對於元素高度的百分比 (例如 "5%"),或相對於父項高度的百分比 (例如 "5%p")。

如要進一步瞭解 <translate> 支援的屬性,請參閱 Animation 的類別參考資料。其 XML 屬性會由此元素繼承。

<rotate>
旋轉動畫。代表 RotateAnimation

屬性:

android:fromDegrees
浮點值。起始角度位置,以度為單位。
android:toDegrees
浮點值。結束角度位置,以度為單位。
android:pivotX
浮點值或百分比。旋轉中心的 X 座標。表示方式:相對於物件左側邊緣的像素 (例如 "5")、相對於物件左側邊緣的百分比 (例如 "5%"),或相對於父項容器左側邊緣的百分比 (例如 "5%p")。
android:pivotY
浮點值或百分比。旋轉中心的 Y 座標。表示方式:相對於物件頂部邊緣的像素 (例如 "5")、相對於物件頂部邊緣的百分比 (例如 "5%"),或相對於父項容器頂部邊緣的百分比 (例如 "5%p")。

如要進一步瞭解 <rotate> 支援的屬性,請參閱 Animation 的類別參考資料。其 XML 屬性會由此元素繼承。

例如:

XML 檔案儲存在 res/anim/hyperspace_jump.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set
        android:interpolator="@android:anim/accelerate_interpolator"
        android:startOffset="700">
        <scale
            android:fromXScale="1.4"
            android:toXScale="0.0"
            android:fromYScale="0.6"
            android:toYScale="0.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="400" />
        <rotate
            android:fromDegrees="0"
            android:toDegrees="-45"
            android:toYScale="0.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="400" />
    </set>
</set>

以下應用程式程式碼會將動畫套用至 ImageView,並開始播放動畫:

Kotlin

val image: ImageView = findViewById(R.id.image)
val hyperspaceJump: Animation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump)
image.startAnimation(hyperspaceJump)

Java

ImageView image = (ImageView) findViewById(R.id.image);
Animation hyperspaceJump = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
image.startAnimation(hyperspaceJump);
另請參閱:

內插器

內插器是 XML 中定義的動畫修改器,會影響動畫的變化速率,可讓現有動畫效果加速、減速、重複、彈跳等。

內插器可透過 android:interpolator 屬性套用至動畫元素,屬性值是對內插器資源的參照。

Android 中提供的所有內插器都是 Interpolator 類別的子類別。Android 針對每個內插器類別加入了一個公開資源,方便您使用 android:interpolator 屬性,將內插器套用至動畫。下表列出每個內插器要使用的資源:

內插器類別資源 ID
AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate_interpolator
AccelerateInterpolator @android:anim/accelerate_interpolator
AnticipateInterpolator @android:anim/anticipate_interpolator
AnticipateOvershootInterpolator @android:anim/anticipate_overshoot_interpolator
BounceInterpolator @android:anim/bounce_interpolator
CycleInterpolator @android:anim/cycle_interpolator
DecelerateInterpolator @android:anim/decelerate_interpolator
LinearInterpolator @android:anim/linear_interpolator
OvershootInterpolator @android:anim/overshoot_interpolator

以下說明如何使用 android:interpolator 屬性,套用上述任一內插器:

<set android:interpolator="@android:anim/accelerate_interpolator">
    ...
</set>

自訂內插器

如果不想使用平台提供的內插器,可以使用已修改的屬性建立自訂內插器資源。舉例來說,您可以調整 AnticipateInterpolator 的加速率或 CycleInterpolator 的循環次數。如想這麼做,請在 XML 檔案中建立自己的內插器資源。

檔案位置:
res/anim/filename.xml
系統會把檔案名稱當做資源 ID。
編譯資源資料類型:
對應內插器物件的資源指標。
資源參照:
XML:@[package:]anim/filename
語法:
<?xml version="1.0" encoding="utf-8"?>
<InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android"
    android:attribute_name="value"
    />

如未套用任何屬性,內插器的運作方式會與上表所列平台提供的內插器完全相同。

元素:
請注意,在 XML 中定義時,每個 Interpolator 實作的名稱都會以小寫英文字母開頭。

<accelerateDecelerateInterpolator>
變化速率開頭和結尾時較慢,中間加快。

沒有任何屬性。

<accelerateInterpolator>
變化速率一開始很慢,然後加快。

屬性:

android:factor
浮點值。加速率。預設值為 1。
<anticipateInterpolator>
先從反向開始變化,再從正向快速變化。

屬性:

android:tension
浮點值。要套用的張力量。預設值為 2。
<anticipateOvershootInterpolator>
此變化會先從反向開始,然後快速正向變化並超過目標值,再於最終值停止。

屬性:

android:tension
浮點值。要套用的張力量。預設值為 2。
android:extraTension
浮點值。要乘以張力的量。預設值為 1.5。
<bounceInterpolator>
變化會在結尾時彈跳。

沒有任何屬性。

<cycleInterpolator>
以指定的循環次數重複播放動畫。速率依照正弦曲線模式變化。

屬性:

android:cycles
「整數」。循環次數。預設值為 1。
<decelerateInterpolator>
變化速率一開始很快,然後減慢。

屬性:

android:factor
浮點值。減速率。預設值為 1。
<linearInterpolator>
變化速率維持一致。

沒有任何屬性。

<overshootInterpolator>
先快速正向變化,接著超過最終值,然後再回到最終值。

屬性:

android:tension
浮點值。要套用的張力量。預設值為 2。
例如:

XML 檔案儲存在 res/anim/my_overshoot_interpolator.xml

<?xml version="1.0" encoding="utf-8"?>
<overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:tension="7.0"
    />

此動畫 XML 會套用內插器:

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@anim/my_overshoot_interpolator"
    android:fromXScale="1.0"
    android:toXScale="3.0"
    android:fromYScale="1.0"
    android:toYScale="3.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="700" />

影格動畫

在 XML 中定義的動畫,會依序顯示圖片序列,如同電影一般。

檔案位置:
res/drawable/filename.xml
系統會把檔案名稱當做資源 ID。
編譯資源資料類型:
AnimationDrawable 的資源指標。
資源參照:
Java:R.drawable.filename
XML:@[package:]drawable.filename
語法:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource_name"
        android:duration="integer" />
</animation-list>
元素:
<animation-list>
必要。這必須是根元素。包含一或多個 <item> 元素。

屬性:

android:oneshot
布林值。如想執行動畫一次,則為 "true";如要循環播放,則為 "false"
<item>
動畫的單一影格。必須是 <animation-list> 元素的子項。

屬性:

android:drawable
可繪製資源。此影格要使用的可繪項目。
android:duration
整數。顯示此影格的時間長度,以毫秒為單位。
例如:

XML 檔案儲存在 res/drawable/rocket_thrust.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <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>

下列應用程式程式碼會將動畫設為 View 的背景,然後播放動畫:

Kotlin

val rocketImage: ImageView = findViewById(R.id.rocket_image)
rocketImage.setBackgroundResource(R.drawable.rocket_thrust)

val rocketAnimation = rocketImage.background
if (rocketAnimation is Animatable) {
    rocketAnimation.start()
}

Java

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

rocketAnimation = rocketImage.getBackground();
if (rocketAnimation instanceof Animatable) {
    ((Animatable)rocketAnimation).start();
}
另請參閱: