和 iOS 開發一樣,Android 也有提供幾個內建的轉場動畫,如 Explode / Slide / Fade.
注意:這裡即將介紹的內容為 API 21(Android 5.0) 以上的版本。
Android 的轉場動畫可以設定進入和離開時的轉場動畫,這方面和 iOS 略有不同。
在 NativeTransitionActivity 中,我們提供一個方法,在跳轉 Activity 的時候帶上一個 Flag 標籤。
private fun startTransitionWithFlag(flag:String) {
val intent = Intent(this,NativeDetailActivity::class.java)
intent.putExtra("flag", flag)
startActivity(intent, ActivityOptionsCompat.makeSceneTransitionAnimation(this).toBundle())
}
在 NativeDetailActivity 中,我們通過接收 Flag 標籤來判斷要執行什麼類型的轉場動畫
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
window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
也可以直接在 /values/styles.xml 中設定 android:windowContentTransitions 為 true
<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
val slideTransition = Slide()
slideTransition.duration = 1000
像這樣的動畫在 Android 實現起來比 iOS 方便太多了(需要注意這裏只是視覺上的動畫,而不是真的跑進了另一個 Activity)。
在Activity 或者 layout 文件中給元素加入 transitionName
我們將小貓的動畫定義為 catTransition 文字的動畫設定為 textTransition
activity_main.xml
<ImageView
...
android:transitionName="catTransition"
...
app:srcCompat="@drawable/img_cat" />
<ImageView
...
android:transitionName="textTransition"
...
app:srcCompat="@drawable/img_love" />
activity_native_detail.xml
<ImageView
...
android:transitionName="catTransition"
...
app:srcCompat="@drawable/img_cat" />
<ImageView
...
android:transitionName="textTransition"
...
app:srcCompat="@drawable/img_love" />
單個共享的轉場元素
val intent = Intent(this, NativeDetailActivity::class.java)
val sharedView = catImageView
val transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(this, sharedView,"catTransition")
startActivity(intent, transitionActivityOptions.toBundle())
多個共享的轉場元素,通過 Pair 綁定 <View, Transition>
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())