前言

前几天在逛公众号的时候偶然看到了关于MotionLayout的文章，效果确实非常的神奇，所以在网上查看了相关的资料，可能是比较新的东西，所以资料上介绍的并不是很全，就自己尝试了一下，写一个笔记记录一下心得。本文是为了快速入门，所以不会介绍的很详细，需要详细了解的可以去看看网上的其他资料。

正文

MotionLayout是ConstraintLayout的子类，ConstraintLayout已经推出很久了，相信大家都多多少少了解一些，这里就不做介绍了。MotionLayout可以直接在xml中绑定动画xml，非常的方便。

首先我们写一个简单的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.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/motion_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutDescription="@xml/scene1">

    <ImageView
            android:id="@+id/image"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@mipmap/ic_launcher_round" />

</androidx.constraintlayout.motion.widget.MotionLayout>

我什么布局参数都没有设置，效果就是一个图片显示在左上角。

MotionScene

如果想要ImageView动起来，我们需要MotionScene，可以简单的理解为常用的补间动画的根节点，他还包含了非常丰富的子节点，我们一一了解一下：

ConstraintSet

通俗的讲可以理解为一个属性集合，可以定义多个，每一个集合可以设置id，通过id就可以使用不同属性集合。

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">

    <ConstraintSet android:id="@+id/start">

        <Constraint
                android:id="@+id/image"
                android:layout_width="48dp"
                android:layout_height="48dp"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent" />

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
                android:id="@+id/image"
                android:layout_width="48dp"
                android:layout_height="48dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent" />
    </ConstraintSet>

</MotionScene>

上面的示例代码中定义了两个属性集合：start和end。分别把image这个View设置不同的位置。ConstraintSet中的属性优先级最高，会覆盖掉xml中的布局参数，所以我们可以把公共布局参数写在xml中，需要变化的布局参数写在ConstraintSet中。

Transition

我们已经定义了好了开始状态和结束状态，接下来就是要让他动起来，这里我们需要使用Transition。

 <Transition
            app:constraintSetEnd="@id/end"
            app:constraintSetStart="@id/start"
            app:duration="1000">

        <OnClick
                app:clickAction="toggle"
                app:targetId="@id/image" />

    </Transition>

设置开始的状态是start，结束的状态为end，时间为1000毫秒，触发动画的条件是OnClick(点击)，点击的控件的id为image。

image

除了点击事件，还可以设置滑动：

<OnSwip  app:dragDirection="dragRight""/>

OnSwipe表示手指滑动，dragDirection表示手指滑动的方向，即动画的开始的方向。有一些资料还用了touchAnchorId和touchAnchorSide，经过测试发现这两个属性对动画没有什么影响，可能是预留的属性，还没有具体实现。

现在我们已经完成了一个非常简单的平移动画。

KeyFrameSet

如果我们想要在某一帧进行控制，就需要使用KeyFrameSet，他还包含了四个子标签：KeyPosition，KeyAttribute，KeyTimeCycle，KeyCycle。

KeyPosition

KeyPosition表示一个关键的位置，例如我们滑动到一半的时候，我们希望是在屏幕的中间：

<KeyPosition
                    app:framePosition="50"
                    app:keyPositionType="parentRelative"
                    app:motionTarget="@id/image"
                    app:percentY="0.5" />

framePosition：关键的位置，范围为0到100，可以理解为动画的百分比，50就是动画的一半。
motionTarget：动画的控件的id。
keyPositionType：计算位置的类型，parentRelative相对父布局。
percentY：范围为0到1，高度的百分比，他是和keyPositionType一起使用的。

MotionScene会自动帮助我们让动画变得顺滑，而不是突然跳到我们指定的位置。

KeyAttribute

KeyAttribute表示关键的属性，用来描述View本身的属性的变化，例如缩放，旋转等等，让动画更加的丰富。

  <KeyAttribute
                    android:rotation="-360"
                    android:scaleX="2"
                    android:scaleY="2"
                    app:framePosition="50"
                    app:motionTarget="@id/image" />

KeyTimeCycle

KeyTimeCycle表示循环动画，他会跟一直显示在View上，不会随着动画的变化而消失，例如下面的代码，会给View增加一个左右来回晃动的动画：

  <KeyTimeCycle app:motionTarget="@id/image"
                    android:rotation="50"
                    app:waveShape="sin"
                    app:wavePeriod="1" />

KeyCycle

KeyCycle和KeyTimeCycle有一些类似，他们的属性完全相同，他表示动画过程中的循环动画，但是KeyCycle的优先级比KeyTimeCycle要高，如果设置KeyCycle，KeyTimeCycle不会生效。

 <KeyCycle app:motionTarget="@id/image"
                    app:framePosition="30"
                    android:rotation="50"
                    app:waveShape="sin"
                    app:wavePeriod="1" />

例如上面的代码页实现在动画中实现左右晃动的效果，并且可以设置动画的开始位置。

StateSet

从字面意思理解是一个状态集合，但是从源码上，我没有看到这个的属性的使用场景，可能是为了之后丰富动画切换效果预留的。

总结

我们已经简单了解了MotionLayout动画的基本用法，写一个简单的补间动画已经绰绰有余，更高级的用法就需要慢慢学习了，希望本文能帮助大家快速入门MotionLayout。