Kotlin 開發第 20 天 ActivityTransition

2018鐵人賽 android kotlin transition animation

陳董 Don

2017-12-23 08:55:16

3641 瀏覽

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())