Android animation 30天上手 — Day27 MotionLayout

Motion Layout是ConstraintLayout的子類別，是在ConstraintLayout 2.0 版本新增的。Motion Layout 可以讓我們用xml 的方式宣告動畫。
什麼時候需要用MotionLayout呢？當我們需要與UI互動時產生動畫時，就會使用MotionLayout。

如下圖，往滑動時，下方的區塊會跟著移動。

使用方式：
Gradle

implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha2'

MotionLayout

在activity_main.xml加上MotionLayout，加上屬性app:layoutDescription=”@xml/scene”。這個MotionLayout裡的子View就可以透過scene.xml的設定當使用者與UI互動時產生動畫。

activity_main.xml

<android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"                               xmlns:app="http://schemas.android.com/apk/res-auto"                       xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/motionLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutDescription="@xml/scene"
        tools:showPaths="true">
    <View
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="@color/colorAccent"
            android:text="Button" />
</android.support.constraint.motion.MotionLayout>

MotionScene

在這裡設定當使用者與UI做什麼樣的互動(例：OnSwipe)時，要使用什麼動畫。

xml/scene.xml

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">
    <!--在這裡設定當使用者與UI做什麼樣的互動(OnSwipe)時，要使用什麼動畫(Transition)。-->
    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:duration="1000">
        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorId="@+id/button"
            motion:touchAnchorSide="right" />
    </Transition>
    <!--起始Layout ConstraintSet-->
    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>
    <!--結束Layout ConstraintSet-->
    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginEnd="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>
</MotionScene>

touchAnchorId： 物件的Id
touchAnchorSide: 物件移動的方向 (top / left / right / bottom )
dragDirection：物件拉至哪個方向 (dragRight / dragLeft / dragUp / dragDown )

所以這個例子可以解釋為，當把id/button往右拉時，button會往右移動，動畫將從id/start的ConstraintSet到id/end的ConstraintSet，動畫期間為1秒。

除了透過ConstraintSet的開始Layout、結束Layout不同的Constraint產生的動畫，還可以加上CustomAttribute，改變背景顏色

在start加上CustomAttribute 設定 attributeName 改變BackgroundColor

<ConstraintSet android:id="@+id/start">
    <Constraint
            android:id="@id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
        <CustomAttribute
                motion:attributeName="BackgroundColor"
                motion:customColorValue="#1b54d8" />
    </Constraint>
</ConstraintSet>

在end加上CustomAttribute 設定 attributeName 改變BackgroundColor

<ConstraintSet android:id="@+id/end">
    <Constraint
            android:id="@id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginEnd="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
        <CustomAttribute
                motion:attributeName="BackgroundColor"
                motion:customColorValue="#f2431c" />
    </Constraint>
</ConstraintSet>

CustomAttribute 還有其他可以設定

<CustomAttribute
    motion:attributeName="alpha"
    motion:customFloatValue="0" />

android:visibility
android:alpha
android:elevation
android:rotation
android:rotationX
android:rotationY
android:scaleX
android:scaleY
android:translationX
android:translationY
android:translationZ

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

參考
https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d

https://github.com/googlesamples/android-ConstraintLayoutExamples

下一篇：Day28 MotionLayout KeyframeSet

線上課程：

Android 動畫入門到進階

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

Android UI 進階實戰(Material Design Component)

Android UI 進階實戰 - 打造App絕佳體驗 - HiSKIO 跨領域學程式 | 專業程式線上課程平台 | 嗨 程式技能

出版書：

Android TDD 測試驅動開發：從 UnitTest、TDD 到 DevOps 實踐

天瓏網路書店 | Android TDD 測試驅動開發：從 UnitTest、TDD 到 DevOps 實踐（iT邦幫忙鐵人賽系列書）