by
和 iOS 開發一樣，Android 也有提供幾個內建的轉場動畫，如 Explode / Slide / Fade.
- 使用內建的轉場動畫
- 使用 Android 的共享元素動畫（比如視覺上有一張圖片在兩個 Activity 之間移動）
原生的轉場動畫
注意：這裡即將介紹的內容為 API 21（Android 5.0） 以上的版本。
Android 的轉場動畫可以設定進入和離開時的轉場動畫，這方面和 iOS 略有不同。
在 NativeTransitionActivity 中，我們提供一個方法，在跳轉 Activity 的時候帶上一個 Flag 標籤。
|
1 2 3 4 5 |
private fun startTransitionWithFlag(flag:String) { val intent = Intent(this,NativeDetailActivity::class.java) intent.putExtra("flag", flag) startActivity(intent, ActivityOptionsCompat.makeSceneTransitionAnimation(this).toBundle()) } |
在 NativeDetailActivity 中，我們通過接收 Flag 標籤來判斷要執行什麼類型的轉場動畫
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
private fun setupTrainsition() { window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS) when(intent.getStringExtra("flag")){ "explode" -> { val explodeTransition = Explode() explodeTransition.duration = 1000 window.enterTransition = explodeTransition window.exitTransition = explodeTransition } "slide" -> { val slideTransition = Slide() slideTransition.duration = 1000 window.enterTransition = slideTransition window.exitTransition = slideTransition } "fade" -> { val fadeTransition = Fade() fadeTransition.duration = 1000 window.enterTransition = fadeTransition window.exitTransition = fadeTransition } } } |
注意必須要在 setContentView() 之前執行下面的方法，這個在官方文件中有說明 – requestFeature
|
1 |
window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS) |
也可以直接在 /values/styles.xml 中設定 android:windowContentTransitions 為 true
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> ... <item name="android:windowContentTransitions">true</item> ... </style> </resources> |
轉場動畫都會有一個默認的動畫長度，也可以自己設定這個 duration
|
1 2 |
val slideTransition = Slide() slideTransition.duration = 1000 |
共享元素的轉場動畫（Shared Elements Transitions）
像這樣的動畫在 Android 實現起來比 iOS 方便太多了（需要注意這裏只是視覺上的動畫，而不是真的跑進了另一個 Activity）。
在Activity 或者 layout 文件中給元素加入 transitionName
我們將小貓的動畫定義為 catTransition 文字的動畫設定為 textTransition
activity_main.xml
|
1 2 3 4 5 6 7 8 9 10 11 |
<ImageView ... android:transitionName="catTransition" ... app:srcCompat="@drawable/img_cat" /> <ImageView ... android:transitionName="textTransition" ... app:srcCompat="@drawable/img_love" /> |
activity_native_detail.xml
|
1 2 3 4 5 6 7 8 9 10 11 |
<ImageView ... android:transitionName="catTransition" ... app:srcCompat="@drawable/img_cat" /> <ImageView ... android:transitionName="textTransition" ... app:srcCompat="@drawable/img_love" /> |
單個共享的轉場元素
|
1 2 3 4 |
val intent = Intent(this, NativeDetailActivity::class.java) val sharedView = catImageView val transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(this, sharedView,"catTransition") startActivity(intent, transitionActivityOptions.toBundle()) |
多個共享的轉場元素，通過 Pair 綁定 <View, Transition>
|
1 2 3 4 5 6 7 8 9 |
val intent = Intent(this, NativeDetailActivity::class.java) val sharedView1 = catImageView as View val sharedView2 = loveImageView as View val p1 = Pair(sharedView1, "catTransition") val p2 = Pair(sharedView2, "textTransition") val transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(this, p1, p2) startActivity(intent, transitionActivityOptions.toBundle()) |
筆記
- TODO: 研究自定義的轉場動畫
- 在 build.gradle 中的 minSdkVersion 可以設定支持的最低系統版本號。
參考
- Material Animation
- Shared-Element-Activity-Transition
- 官方文件 – Animations
- 可以到 Github 上看對應的 Source Code