iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 20
0

ActivityTransition
和 iOS 開發一樣,Android 也有提供幾個內建的轉場動畫,如 Explode / Slide / Fade.

  • 使用內建的轉場動畫
  • 使用 Android 的共享元素動畫(比如視覺上有一張圖片在兩個 Activity 之間移動)

原生的轉場動畫

注意:這裡即將介紹的內容為 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

共享元素的轉場動畫(Shared Elements Transitions)

Shared Elements Transitions
像這樣的動畫在 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())

筆記

  • TODO: 研究自定義的轉場動畫
    在 build.gradle 中的 minSdkVersion 可以設定支持的最低系統版本號。

參考


上一篇
Kotlin 開發第 19 天 LittleBirdSound ( MediaPlayer + MediaRecorder )
下一篇
Kotlin 開發第 21 天 LayoutSwitch (RecyclerView + GridLayoutManager + Out of memory)
系列文
Kotlin 30 天,通過每天一個小 demo 學習 Android 開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言