前言
前几天在逛公众号的时候偶然看到了关于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。
除了点击事件，还可以设置滑动：
<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。
