檢視動畫
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
試用 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 邊界之外,且不會遭到裁剪。不過,如果動畫超過上層檢視畫面的邊界,就會「發生」剪輯。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2025-07-27 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-07-27 (世界標準時間)。"],[],[],null,["# View Animation\n\nTry the Compose way \nJetpack Compose is the recommended UI toolkit for Android. Learn how to use Animations in Compose. \n[Animate properties →](/develop/ui/compose/animation/value-based) \n\nYou can use the view animation system to perform tweened animation on Views. Tween animation\ncalculates the animation with information such as the start point, end point, size, rotation, and\nother common aspects of an animation.\n\nA tween animation can perform a series of simple transformations (position, size, rotation,\nand transparency) on the contents of a View object. So, if you have a [TextView](/reference/android/widget/TextView) object, you can move, rotate, grow, or shrink the text. If it has a\nbackground image, the background image will be transformed along with the text. The [animation package](/reference/android/view/animation/package-summary) provides all the classes used in a tween animation.\n\nA sequence of animation instructions defines the tween animation, defined by either XML or\nAndroid code. As with defining a layout, an XML file is recommended because it's more readable,\nreusable, and swappable than hard-coding the animation. In the example below, we use XML. (To\nlearn more about defining an animation in your application code, instead of XML, refer to the\n[AnimationSet](/reference/android/view/animation/AnimationSet) class and other [Animation](/reference/android/view/animation/Animation) subclasses.)\n\nThe animation instructions define the transformations that you want to occur, when they will\noccur, and how long they should take to apply. Transformations can be sequential or simultaneous\n- for example, you can have the contents of a TextView move from left to right, and then rotate\n180 degrees, or you can have the text move and rotate simultaneously. Each transformation takes a\nset of parameters specific for that transformation (starting size and ending size for size\nchange, starting angle and ending angle for rotation, and so on), and also a set of common\nparameters (for instance, start time and duration). To make several transformations happen\nsimultaneously, give them the same start time; to make them sequential, calculate the start time\nplus the duration of the preceding transformation.\n\nThe animation XML file belongs in the `res/anim/` directory of your Android\nproject. The file must have a single root element: this will be either a single\n`\u003calpha\u003e`, `\u003cscale\u003e`, `\u003ctranslate\u003e`,\n`\u003crotate\u003e`, interpolator element, or `\u003cset\u003e` element that holds\ngroups of these elements (which may include another `\u003cset\u003e`). By default, all\nanimation instructions are applied simultaneously. To make them occur sequentially, you must\nspecify the `startOffset` attribute, as shown in the example below.\n\nThe following XML from one of the ApiDemos is used to stretch, then simultaneously spin and\nrotate a View object. \n\n```xml\n\u003cset android:shareInterpolator=\"false\"\u003e\n \u003cscale\n android:interpolator=\"@android:anim/accelerate_decelerate_interpolator\"\n android:fromXScale=\"1.0\"\n android:toXScale=\"1.4\"\n android:fromYScale=\"1.0\"\n android:toYScale=\"0.6\"\n android:pivotX=\"50%\"\n android:pivotY=\"50%\"\n android:fillAfter=\"false\"\n android:duration=\"700\" /\u003e\n \u003cset android:interpolator=\"@android:anim/decelerate_interpolator\"\u003e\n \u003cscale\n android:fromXScale=\"1.4\"\n android:toXScale=\"0.0\"\n android:fromYScale=\"0.6\"\n android:toYScale=\"0.0\"\n android:pivotX=\"50%\"\n android:pivotY=\"50%\"\n android:startOffset=\"700\"\n android:duration=\"400\"\n android:fillBefore=\"false\" /\u003e\n \u003crotate\n android:fromDegrees=\"0\"\n android:toDegrees=\"-45\"\n android:toYScale=\"0.0\"\n android:pivotX=\"50%\"\n android:pivotY=\"50%\"\n android:startOffset=\"700\"\n android:duration=\"400\" /\u003e\n \u003c/set\u003e\n\u003c/set\u003e\n```\n\nScreen coordinates (not used in this example) are (0,0) at the upper left hand corner, and\nincrease as you go down and to the right.\n\nSome values, such as pivotX, can be specified relative to the object itself or relative to the\nparent. Be sure to use the proper format for what you want (\"50\" for 50% relative to the parent,\nor \"50%\" for 50% relative to itself).\n\nYou can determine how a transformation is applied over time by assigning an [Interpolator](/reference/android/view/animation/Interpolator). Android includes several Interpolator subclasses that\nspecify various speed curves: for instance, [AccelerateInterpolator](/reference/android/view/animation/AccelerateInterpolator)\ntells a transformation to start slow and speed up. Each one has an attribute value that can be\napplied in the XML.\n\nWith this XML saved as `hyperspace_jump.xml` in the `res/anim/`\ndirectory of the project, the following code will reference it and apply it to an [ImageView](/reference/android/widget/ImageView) object from the layout. \n\n### Kotlin\n\n```kotlin\nAnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation -\u003e\n findViewById\u003cImageView\u003e(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)\n}\n```\n\n### Java\n\n```java\nImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);\nAnimation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);\nspaceshipImage.startAnimation(hyperspaceJumpAnimation);\n```\n\nAs an alternative to `startAnimation()`, you can define a starting time for the\nanimation with [Animation.setStartTime()](/reference/android/view/animation/Animation#setStartTime(long)), then assign the animation to the View with [View.setAnimation()](/reference/android/view/View#setAnimation(android.view.animation.Animation)).\n\nFor more information on the XML syntax, available tags and attributes, see [Animation Resources](/guide/topics/resources/animation-resource).\n\n**Note:** Regardless of how your animation may move or resize, the\nbounds of the View that holds your animation will not automatically adjust to accommodate it.\nEven so, the animation will still be drawn beyond the bounds of its View and will not be clipped.\nHowever, clipping *will occur* if the animation exceeds the bounds of the parent View."]]