Material Design 應用程式中的活動轉換功能,可透過常見元素之間的動作和轉換,提供不同狀態之間的視覺連結。您可以為進入和離開轉場效果,以及在活動之間轉換共用元素指定自訂動畫。
- 「進入」轉換可決定活動中的檢視畫面進入場景的方式。舉例來說,在
explode
進入轉場效果中,檢視畫面會從外部進入場景,然後飛至畫面中央。 - 「離開」轉換可決定活動中的檢視畫面如何離開場景。例如,在
explode
結束轉場中,檢視畫面會從中心離開場景。 - 「共用元素」轉換可決定兩個活動之間共用檢視畫面的方式。舉例來說,如果兩個活動有相同圖片的位置和大小不同,
changeImageTransform
共用元素轉換功能會在這些活動之間順利轉譯並縮放圖片。
Android 支援下列進入和離開轉場效果:
explode
:將檢視畫面往內或從場景的中心移出。slide
:將檢視畫面移入或從場景的任一邊緣移出。fade
:透過變更不透明度的方式,在場景中新增或移除檢視畫面。
凡是擴充 Visibility
類別的轉場效果,都支援做為「進入」或「結束」轉換。詳情請參閱 Transition
類別的 API 參考資料。
Android 也支援下列共用元素轉換功能:
changeBounds
:為目標檢視畫面的版面配置邊界變更建立動畫效果。changeClipBounds
:為目標檢視畫面裁剪範圍的變化建立動畫效果。changeTransform
:為目標檢視畫面的比例和旋轉情形建立動畫效果。changeImageTransform
:為目標圖片的大小和縮放變更加上動畫效果。
在應用程式中啟用活動轉換時,系統會在進入和結束活動之間啟用預設的交叉淡出轉場效果。
如需使用共用元素在活動之間建立動畫的程式碼範例,請參閱 ActivitySceneTransitionBasic。
檢查系統版本
ActivityTransition API 適用於 Android 5.0 (API 21) 以上版本。如要保留與舊版 Android 的相容性,請在叫用下列任一功能的 API 前,先在執行階段檢查系統 version
:
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 }
指定自訂轉場效果
首先,定義繼承 Material 主題的樣式時,請使用 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
類別對應。詳情請參閱 Transition
的 API 參考資料。
如要在程式碼中啟用視窗內容轉換,請呼叫 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
物件呼叫以下函式:
Window.setEnterTransition()
Window.setExitTransition()
Window.setSharedElementEnterTransition()
Window.setSharedElementExitTransition()
setExitTransition()
和 setSharedElementExitTransition()
函式會定義呼叫活動的結束轉場效果。setEnterTransition()
和 setSharedElementEnterTransition()
函式會定義呼叫活動的進入轉場效果。
如要完全發揮轉場效果,您必須在呼叫和呼叫的活動上啟用視窗內容轉換功能。否則,呼叫活動會啟動退出轉換程序,然後您就會看到視窗轉換,例如縮放比例或淡出。
如要盡快啟動進入轉場效果,請在呼叫的活動中使用 Window.setAllowEnterTransitionOverlap()
函式。這麼做可讓你更戲劇化的轉場效果。
使用轉場效果啟動活動
如果您為活動啟用轉換功能,並設定退出轉換,則系統會在您啟動其他活動時啟動轉換,如下所示:
Kotlin
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle())
Java
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
如果您為第二個活動設定進入轉場效果,該轉場效果也會在活動開始時啟動。如要在啟動其他活動時停用轉換功能,請提供 null
選項套裝組合。
使用共用元素啟動活動
如要在兩個包含共用元素的活動之間建立畫面轉換動畫,請按照下列步驟操作:
- 啟用主題的視窗內容轉場效果。
- 在樣式中指定共用元素轉換。
- 將轉換作業定義為 XML 資源。
- 使用
android:transitionName
屬性,為兩個版面配置中的共用元素指派通用名稱。 - 使用
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"));