Android MotionLayout 起步走

Published in

Goons

6 min readApr 15, 2020

# 前言

MotionLayout主要用來實現使用者點擊或滑動時的動畫效果，但Google在推出MotionLayout之前也有提供其他不同添加動畫的方法，例如：TranslateAnimation、Property Animation，那MotionLayout與他們有什麼不一樣呢？主要的差異在於之前那些動畫方法都是設定一個固定的動畫時長，但在進行動畫期間無法與控制動畫，而MotionLayout提供了一些方法，可以讓你更靈活的控制這些動畫。目前最新版本為2019年12月16日推出的的ConstraintLayout2.0.0 bata4，就讓我們一起動手試試看吧～

# 前置作業

google maven repository:

dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta4'
}

android.support packages:

dependencies {
    implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta4'
}

# 開始實作

首先，MotionLayout為ConstrainLayout的子類別，在使用上很簡單，可以將原本.xml中的ConstrainLayout直接改成MotionLayout，這邊做一個簡單的小範例

首先，大致分成背景區塊、頭像、姓名，如左圖，向上滑動後，背景區塊縮小，頭像縮小至無，姓名從頭像下方移至螢幕上方中間且變成白色，且左上角出現返回箭頭。

activity_main.xml

這邊跟平常寫ConstrainLayout不一樣的地方是，多了layoutDescription這個屬性，這是MotionLayout的關鍵屬性，用來指定動畫描述檔，我們想要執行的動畫具體怎麼動就寫在這個檔案（MotionScene）中。

MotionScene中包含：
1. Transition (定義動畫開始與結束、動畫樣式)
2. ConstraintSets
3. KeyFrameSet(關鍵幀，不一定要加)

collapsing_toolbar.xml

在<Transtion>中：
constraintSetStart：指定動畫開始佈局id
constraintSetEnd：指定動畫結束佈局id
motionInterpolator：動畫差值器，指的是整個動畫從開始到結束的動畫效果。
1. linear：線性效果
2. bounce：彈簧效果
3. easeIn：緩入效果
4. easeInOut：緩入緩出效果
5. easeOut：緩出效果

補充屬性：
duration:設定動畫持續時間

用<OnSwipe>來描述動畫樣式
dragDirection：滑動的方向(必須設定touchAnchorId屬性該屬性才會有效)
1. dragUp：由下往上滑動
2. dragDown：由上往下滑動
3. dragLeft：由右往左滑動
4. dragRight：由左往右滑動
touchAnchorId：指定滑動區域

在<ConstraintSets>中：
在每個<Constraint>設定對應id，這邊說的id必須是activity_main.xml中找得到的id才行，有些屬性需要透過<CustomAttribute>來做設定

名字（移動到畫面上方並稍微縮小變成白色）改變對齊位置及scaleX、scaleY，再用<CustomAttribute>設定顏色

<影片demo1>

Android MotionLayout Demo1

目前完成的動畫總覺得哪裡怪怪的，如何讓動畫變得更順暢呢？加入KeyFrameSet試試看吧！

將<KeyFrameSet>寫在<Transition>中

<KeyPosition>：描述位置的變化
<KeyAttribute>：描述屬性的變化

keyPositionType：表示使用的座標系種類
1. parentRelative：以父容器的左上角為原點，x軸向右為正，y軸向下為正
2. deltaRelative：以起始點與終點定義座標系，起始點作為原點，水平方向為x軸，垂直方向為y軸
3.pathRelative：以起始點為原點，與終點的連線形成x軸，垂直方向為y軸

percentX、percentY：數值為0–1表示x軸或y軸，移動的進程，0為起始1為終點

framePosition：數值為0–100表示動畫的進度，例如40就表示動畫進程到40％的時候

所以上面第一組KeyPosition、KeyAttribute就是表示在動畫進程到40％的時候，Y座標移動到全部距離的一半X座標不變，且變成透明; 第二組則是在動畫進程到50％的時候，Y座標保持在全部距離的一半X座標直接移動到結束的X座標位置。

加入以上關鍵幀就可以讓你的名字先往上移一些再右移最後再上移到終點位置，是不是變的順暢許多呢！

<影片demo2>

Android MotionLayout Demo2

# 結語

這次實做了一個簡單的MotionLayout感覺很有趣，有更多方法可以實現動畫，也讓動畫可以有更多彈性，完成一些客製化的動畫效果，在Android Studio Preview(Android Studio4.0)中有提供Motion Editor，可以對動畫進行視覺化的編輯，增加製作動畫效果的效率，有興趣的朋友也可以試試看。

我是果思設計的 Android 工程師 Ula，我們專注在 App 設計與 App 開發，創造真正有價值的數位產品。

如果你喜歡我的文章，歡迎幫我拍手；有任何想法或想補充的事項，也歡迎在留言區留下你的足跡，期待我們能教學相長，分享看法：）

Android MotionLayout 起步走

Written by Ula