檢視動畫

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

您可以使用 View 動畫系統,在 View 上執行混合動畫。補間動畫會使用起點、終點、大小、旋轉和其他常見的動畫參數等資訊來計算動畫。

補間動畫可以對 View 物件內容執行一系列簡易轉換 (位置、大小、旋轉和透明度)。因此,如果您有 TextView 物件,就可以移動、旋轉、放大或縮小文字。如果含有背景圖片,背景圖片會隨著文字轉換。animation package 會提供補間動畫中使用的所有類別。

動畫序列會定義由 XML 或 Android 程式碼定義的補間動畫。如同定義版面配置一樣,建議您使用 XML 檔案,因為與硬式編碼動畫相比,XML 檔案更易於閱讀、重複使用和替換。在以下範例中,我們使用 XML。(如要進一步瞭解如何在應用程式程式碼 (而非 XML) 中定義動畫,請參閱 AnimationSet 類別和其他 Animation 子類別)。

動畫操作說明會定義您想發生的轉換、轉換發生的時間,以及套用所需時間。轉換作業可以是依序或同時進行 - 例如,您可以讓 TextView 的內容從左到右移動,然後旋轉 180 度,也可以讓文字同時移動和旋轉。每個轉換作業都會使用一組專屬參數 (大小變更的起始大小和結束大小、旋轉的起始角度和結束角度等等),以及一組通用參數 (例如開始時間和時間長度)。如要同時進行多項轉換,請為這些轉換指定相同的開始時間;如要讓轉換依序進行,請計算開始時間加上前一個轉換的時間長度。

動畫 XML 檔案位於 Android 專案的 res/anim/ 目錄中。檔案必須具備單一根元素:這可以是單一 <alpha><scale><translate><rotate>、內插器元素,或包含這些元素群組 (可能包含另一個 <set>) 的 <set> 元素。根據預設,系統會同時套用所有動畫指示。如要依序發生,您必須指定 startOffset 屬性,如以下範例所示。

以下 XML 取自其中一個 ApiDemos,用於拉伸,然後同時旋轉及旋轉 View 物件。

<set 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/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
</set>

畫面座標 (未用於本範例) 為 (0,0),位於左上角,往下和往右移動時會增加。

您可以根據物件本身或父項相對指定部分值 (例如 眾多值)。請務必使用正確的格式 (例如「50%」表示相對於父項的 50%,或「50%」表示相對於自身的 50%)。

您可以指派 Interpolator,決定轉換在一段時間內的套用方式。Android 包含多個 Interpolator 子類別,可指定各種速度曲線:例如,AccelerateInterpolator 會告知轉換作業以緩慢速度開始,然後加快速度。每個變數都有可套用至 XML 的屬性值。

將這個 XML 儲存為專案 res/anim/ 目錄中的 hyperspace_jump.xml,以下程式碼會參照該 XML,並將其套用至版面配置中的 ImageView 物件。

Kotlin

AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation ->
    findViewById<ImageView>(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)
}

Java

ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);

您可以使用 Animation.setStartTime() 定義動畫的開始時間,然後使用 View.setAnimation() 將動畫指派給 View,這也是 startAnimation() 的替代方案。

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

注意:無論動畫如何移動或調整大小,容納動畫的 View 邊界都不會自動調整以配合動畫。即便如此,動畫仍會繪製在其 View 邊界之外,且不會遭到裁剪。不過,如果動畫超過上層檢視畫面的邊界,就會「發生」剪輯