Material Motion Part 2— Shared axis

Material Design 在1.2 推出了新的動畫Material Motion。提供了4種動畫的方式：

• Container transform
• Shared axis
• Fade Through
• Fade

SharedAxis

這一篇要來看的是SharedAxis。axis的中文意思就是軸，以X軸、Y軸、Z軸透過共享的變換產生動畫移動效果。

🔹線上課程，學習更快速「Android 動畫入門到進階」

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

下例的註冊會員畫面，在第一步與第二步的頁面切換有著X軸的切換畫面效果，適合加上SharedAxis的X軸的動畫。

首先建立Activity及兩個畫面的Fragment。

註冊會員第一頁Fragment A的onCreate加上點選下一步及返回時的動畫，這裡的參數MaterialSharedAxis.X指的就是X軸的動畫。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    //返回的動畫
    val backward = MaterialSharedAxis.create(MaterialSharedAxis.X, false)
    reenterTransition = backward
    //下一步的動畫
    val forward = MaterialSharedAxis.create(MaterialSharedAxis.X, true)
    exitTransition = forward
}

註冊會員第二頁Fragment B 的onCreate加上進入及返回的動畫

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    //進入的動畫
    val forward = MaterialSharedAxis.create(
      MaterialSharedAxis.X, true
    )
    enterTransition = forward
    //返回的動畫
    val backward = MaterialSharedAxis.create(
      MaterialSharedAxis.X, false
    )
    returnTransition = backward
}

點選Activity上的「下一步」按鈕時，就用一般的方式來切換Fragment就可以了。

next.setOnClickListener {
    val bFragment = Sample1BFragment.newInstance()
    supportFragmentManager
        .beginTransaction()
        .replace(R.id.container, bFragment)
        .addToBackStack(null)
        .commit()
}

再來看另一個例子用SharedAxis的Y軸動畫效果，這裡將以同一個View中使用來呈現。

這個畫面則是隱含著上下步驟的感覺，所以可以使用SharedAxis的Y軸動畫。

先看Layout的部分，如果是在同一個View中的SharedAxis動畫，需要指定動畫的範圍。

stepView：畫面左邊的步驟(下圖紅框)
container：畫面右邊的景點區塊(下圖綠框)

由於點選左邊的數字步驟時，只有右邊的景點區塊會做變動，所以綠色框的部分就是動畫的範圍。

由於有4個景點，綠框container裡的content1~4分別代表4個景點的區塊，在左邊的步驟1被點選時，content1就會顯示。再接著點擊步驟2，則content1會隱藏，content2會顯示。

點下左邊數字時開始動畫

步驟如下：

1. 決定 isFoward，也就是Y軸的動畫方向
2. 呼叫動畫
3. 改變container裡哪一個景點區塊要顯示

步驟1：決定isFoward，也就是Y軸的動畫方向。

MaterialSharedAxis的Y軸動畫，可以分為向下與向上isForward。如果點選的數字比之前的大，isForward則為true，返之為false。

例如：原本停留在1，點了3，從1到3數字變大了，所以動畫的isForward=true，產生往上的動畫

例如：原本停留在2，點了1。從2到1數字變小了，所以動畫的isForward=false，產生往下的動畫

步驟2：呼叫動畫

決定好isForward之後，就可以呼叫動畫了。

beginDelayedTransition(container, sharedAxis) 這裡的第一個參數container就是我們先前說的動畫範圍，也就是該Layout裡的id。

val sharedAxis = MaterialSharedAxis.create(MaterialSharedAxis.Y, isForward)
TransitionManager.beginDelayedTransition(container, sharedAxis)

步驟3：改變container裡哪一個景點區塊要顯示。

設定動畫後，還要調整哪一個對映的content的顯示，也就是綠框裡的content~content4哪一個View要顯示及隱藏。

這樣就完成了透過MaterialSharedAxis讓container裡View的消失與顯示來產生動畫。

下一篇將會介紹第三種Fade Through