Android animation 30天上手 — Day16 TransitionManager 進階

上一篇我們介紹了使用Scene，來設定UI的起始畫面、結束畫面，讓TransitionManager自動加上起始、結束間的動畫。

這篇就來介紹自訂Transition。

在Scene2增加一個Textview，將Textview出現的方式設定為Slide

新增changebounds_slide_together.xml，
transitionSet 裡為動畫改變的方式：changeBounds、slide

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds/>
    <slide>
        <targets>
            <target android:targetId="@id/transition_text" />
        </targets>
    </slide>
</transitionSet>

為scene2新增一個scene2_transition_manager.xml，
android:toScene=”@layout/scene2" 指定scene為scene2
android:transition=”@transition/changebounds_slide_together” 指定transition

<transitionManager xmlns:android="http://schemas.android.com/apk/res/android">
    <transition
        android:toScene="@layout/scene2"
        android:transition="@transition/changebounds_slide_together"/>
</transitionManager>

修改動畫方式，將TransitionManager.go(scene2)註解
改使用 transitionManagerForScene2.transitionTo(scene2)

scene2Button.setOnClickListener {
    // TransitionManager.go(scene2)
    // 將Scene2改成由transitionManagerForScene2來決定動畫方式
    transitionManagerForScene2.transitionTo(scene2)
}

這樣就可以將動畫由原本的自動設定，調整為我們自已設定的transitionSet

不使用Scene來設定動畫

除了使用Scene設定起始、結束的動畫，也可以不透過scene而是直接在程式碼改變layout
新增一個scene4Button，將結束畫面設定為：藍色圓圈為原本的2倍大

使用TransitionManager.beginDelayedTransition(sceneRoot)
在之後加上UI的改變即可

scene4Button.setOnClickListener {
    //不使用Scene做為View的改變。在TransitionManager.beginDelayedTransition，調整View的值
    TransitionManager.beginDelayedTransition(sceneRoot)
    //在這裡調整結束layout。將藍色圓圈放大2倍。
    val square = sceneRoot!!.findViewById<View>(R.id.transition_oval_blue)
    val params = square.layoutParams
    params.width = params.width * 2
    params.height = params.height * 2
    square.layoutParams = params
}

完整程式：
https://github.com/evanchen76/SceneTransition

參考：
https://developer.android.com/training/transitions/

下一篇：Day17 CoordinatorLayout

線上課程：

Android 動畫入門到進階

Android animation 動畫入門到進階 - HiSKIO 跨領域學程式 | 專業程式線上課程平台 | 嗨 程式技能