使用動畫啟動活動

Material Design 應用程式中的活動轉場效果可在 透過共同元素之間的動作和轉換來呈現不同狀態 您可以為進入和離開轉場以及 活動之間共用元素的轉換。

圖 1. A 罩杯 改為使用共用元素

  • 進入轉場效果可決定活動中的檢視畫面 進入場景。例如,在 explode 進入轉場效果時, 從外面進入場景,再向內飛到 。
  • 「結束」轉換會決定活動結束檢視畫面的方式 另一個好處例如,在 explode 結束轉場效果中,檢視畫面會 請從中央遠離場景。
  • 「共用元素」轉換決定了檢視畫面 才會在兩個活動之間轉換共用。例如: 如果兩個活動在不同位置和大小中擁有相同的圖片,則 changeImageTransform 個共用元素轉換翻譯和 在這些活動之間流暢縮放圖片。

Android 支援以下進入和離開轉場效果:

  • explode:將檢視畫面向畫面中央向外或向外移動。
  • slide:將檢視畫面移入或移出 場景。
  • fade:透過變更場景來新增或移除檢視畫面 不透明度。

凡是擴充 Visibility 類別的轉場效果,都可做為進入或退出轉場效果。 如需詳細資訊,請參閱 Transition 類別

Android 也支援以下共用元素轉換功能:

  • changeBounds:針對目標版面配置邊界的變化建立動畫效果 次觀看。
  • changeClipBounds:為目標剪輯邊界的變化建立動畫效果 次觀看。
  • changeTransform:以動畫方式呈現縮放比例和旋轉方向的變化 目標觀看次數
  • changeImageTransform:以動畫呈現 鎖定圖片

在應用程式中啟用活動轉場效果時,預設的交叉淡出 進入和退出活動之間的轉場效果。

圖 2. 含有一個共用元素的場景轉場。

如需使用共用元素在活動之間建立動畫效果的程式碼範例,請參閱 ActivitySceneTransitionBasic

檢查系統版本

活動轉換 API 適用於 Android 5.0 (API 21) 以上版本。如要保留與舊版 Android 的相容性,請查看 系統 version 的執行階段, 叫用下列任一功能的 API:

Kotlin

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Java

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

指定自訂轉場效果

首先,使用 android:windowActivityTransitions 啟用視窗內容轉場效果 屬性。您也可以指定 請在樣式定義中進入、結束和共用元素轉換:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

本例中的 change_image_transform 轉換定義如下:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

changeImageTransform 元素會對應至 ChangeImageTransform 類別。詳情請參閱 API Transition 的參照。

如要改為在程式碼中啟用視窗內容轉換,請呼叫 Window.requestFeature() 函式:

Kotlin

// Inside your activity (if you did not enable transitions in your theme)
with(window) {
    requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

    // Set an exit transition
    exitTransition = Explode()
}

Java

// Inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

// Set an exit transition
getWindow().setExitTransition(new Explode());

如要在程式碼中指定轉場效果,請使用 Transition 物件:

setExitTransition()setSharedElementExitTransition() 函式會定義離開事件 呼叫活動。setEnterTransition()setSharedElementEnterTransition() 函式會定義輸入項目 針對呼叫的活動

如要完全發揮轉換效果,請啟用視窗內容 呼叫和呼叫的活動之間存在轉換。否則,呼叫 活動會啟動結束轉換,但您會看到 例如縮放比例或淡出

如要盡快開始進行進入轉換作業,請使用 Window.setAllowEnterTransitionOverlap() 函式。如此一來,就能享有更具戲劇性的轉場效果。

使用轉場效果啟動活動

如果您啟用轉場效果並為活動設定結束轉場效果, 轉場效果會在您啟動其他活動時啟動,如下所示:

Kotlin

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

Java

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

如果您為第二項活動設定了進入轉場效果,也會 會在活動開始時啟動。如何在開始時停用轉場效果 另一個活動,請提供 null 選項組合。

使用共用元素啟動活動

在包含 請執行以下動作:

  1. 啟用主題中的視窗內容轉換功能。
  2. 請在樣式中指定共用元素轉換。
  3. 將轉場效果定義為 XML 資源。
  4. 使用 android:transitionName 屬性。
  5. 使用 ActivityOptions.makeSceneTransitionAnimation() 函式。

Kotlin

// Get the element that receives the click event
val imgContainerView = findViewById<View>(R.id.img_container)

// Get the common element for the transition in this activity
val androidRobotView = findViewById<View>(R.id.image_small)

// Define a click listener
imgContainerView.setOnClickListener( {
    val intent = Intent(this, Activity2::class.java)
    // Create the transition animation - the images in the layouts
    // of both activities are defined with android:transitionName="robot"
    val options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot")
    // Start the new activity
    startActivity(intent, options.toBundle())
})

Java

// Get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// Get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// Define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // Create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // Start the new activity
        startActivity(intent, options.toBundle());
    }
});

對於您在程式碼中產生的共用動態檢視畫面,請使用 View.setTransitionName() 函式,用於在兩個欄位中指定共同元素名稱 活動。

如要在完成第二個活動時反轉場景轉換動畫,請呼叫 Activity.finishAfterTransition() 函式,而不是 Activity.finish()

使用多個共用元素啟動活動

在兩個包含不同活動的活動之間建立場景轉換動畫 而非一個共用元素,請使用 android:transitionName 屬性,或使用 View.setTransitionName() 函式,以及 建立 ActivityOptions 物件,如下所示:

Kotlin

// Rename the Pair class from the Android framework to avoid a name clash
import android.util.Pair as UtilPair
...
val options = ActivityOptions.makeSceneTransitionAnimation(this,
        UtilPair.create(view1, "agreedName1"),
        UtilPair.create(view2, "agreedName2"))

Java

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));