使用動畫移動檢視畫面

試試 Compose
Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何在 Compose 中使用動畫。
為位置加上動畫效果 →

由於使用者互動或幕後處理作業，畫面上的物件經常需要重新定位。請勿立即更新物件的位置，以免物件在不同區域之間閃爍，而是使用動畫將物件從起始位置移至結束位置。

Android 允許您在畫面上重新放置檢視區塊物件，方法是使用 ObjectAnimator。您提供物件要停留在的最終位置，以及動畫的持續時間。您也可以使用時間插補器，控制動畫的加速或減速。

使用 ObjectAnimator 變更檢視區塊位置

ObjectAnimator API 可讓您變更指定時間長度的檢視區塊屬性。其中包含靜態方法，可根據您要製作動畫的屬性類型，建立 ObjectAnimator 的執行個體。在畫面上重新放置檢視區塊時，請使用 translationX 和 translationY 屬性。

以下是 ObjectAnimator 的範例，可將檢視區塊移至螢幕左側 100 像素的位置，所需時間為 2 秒：

Kotlin

ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    duration = 2000
    start()
}

Java

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();

這個範例使用 ObjectAnimator.ofFloat() 方法，因為平移值必須是浮點數。第一個參數是要加入動畫的檢視區塊。第二個參數是您要製作動畫的屬性。由於檢視區塊需要水平移動，因此使用 translationX 屬性。最後一個參數是動畫的結束值。在這個範例中，值 100 表示距離畫面左側的像素位置。

下一個方法會指定動畫的持續時間 (以毫秒為單位)。在本例中，動畫會執行 2 秒 (2000 毫秒)。

最後一個方法會執行動畫，更新檢視區塊在螢幕上的位置。

如要進一步瞭解如何使用 ObjectAnimator，請參閱「使用 ObjectAnimator 製作動畫」。

新增彎曲動作

使用 ObjectAnimator 很方便，但預設會沿著起點和終點之間的直線重新定位檢視區塊。在質感設計中，曲線用於控制螢幕上物件的空間移動，以及動畫的時間軸。使用曲線動作可讓應用程式更具實體感，同時讓動畫更有趣。

自行定義路徑

ObjectAnimator 類別的建構函式可讓您使用路徑，同時為兩個以上的屬性製作座標動畫。舉例來說，下列動畫師會使用 Path 物件，為檢視區塊的 X 和 Y 屬性製作動畫：

Kotlin

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val path = Path().apply {
        arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
    }
    val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply {
        duration = 2000
        start()
    }
} else {
    // Create animator without using curved path
}

Java

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
  ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
  animator.setDuration(2000);
  animator.start();
} else {
  // Create animator without using curved path
}

弧形動畫如下所示：

圖 1. 曲線路徑動畫。

Interpolator 是加/減速曲線的實作項目。如要進一步瞭解緩和曲線的概念，請參閱 Material Design 說明文件。Interpolator 定義動畫中特定值的計算方式，以時間為函式。系統會提供 XML 資源，用於 Material Design 規格中的三種基本曲線：

  • @interpolator/fast_out_linear_in.xml
  • @interpolator/fast_out_slow_in.xml
  • @interpolator/linear_out_slow_in.xml

使用 PathInterpolator

PathInterpolator 類別是 Android 5.0 (API 21) 推出的插補器。這項功能是以 Bézier 曲線或 Path 物件為基礎。質感設計說明文件中的 Android 緩和效果範例使用 PathInterpolator。

PathInterpolator 具有以不同類型的貝茲曲線為基礎的建構函式。所有貝茲曲線的起點和終點分別固定在 (0,0) 和 (1,1)。其他建構函式引數取決於要建立的貝茲曲線類型。

舉例來說，如果是二次貝茲曲線，只需要一個控制點的 X 和 Y 座標：

Kotlin

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.67f, 0.33f)
} else {
    LinearInterpolator()
}

Java

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.67f, 0.33f);
} else {
  myInterpolator = new LinearInterpolator();
}

這會產生緩和曲線，一開始速度很快，接近結尾時會減速。

立方貝茲建構函式同樣有固定的起點和終點，但需要兩個控制點：

Kotlin

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
    LinearInterpolator()
}

Java

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f);
} else {
  myInterpolator = new LinearInterpolator();
}

這是 Material Design 強調 減速 緩和曲線的實作方式。

如要進一步控管，可以使用任意 Path 定義曲線：

Kotlin

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  val path = Path().apply {
    moveTo(0.0f, 0.0f)
    cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f)
  }
  PathInterpolator(path)
} else {
  LinearInterpolator()
}

Java

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.moveTo(0.0f, 0.0f);
  path.cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f);
  myInterpolator = new PathInterpolator(path);
} else {
  myInterpolator = new LinearInterpolator();
}

這會產生與立方貝茲曲線範例相同的加/減速曲線，但使用的是 Path。

您也可以將路徑內插器定義為 XML 資源：

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.5"
    android:controlY1="0.7"
    android:controlX2="0.1f"
    android:controlY2="1.0f"/>

建立 PathInterpolator 物件後，您可以將其傳遞至 Animator.setInterpolator() 方法。Animator 會在啟動時使用插補器，判斷時間或路徑曲線。

Kotlin

val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    interpolator = myInterpolator
    start()
}

Java

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(myInterpolator);
animation.start();