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
物件:
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"));