MotionLayout：一个可以直接写动画的ConstraintLayout

前言

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

正文

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

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

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

MotionScene

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

ConstraintSet

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

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

Transition

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

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

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

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

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

KeyFrameSet

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

KeyPosition

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

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

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

KeyAttribute

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

KeyTimeCycle

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

KeyCycle

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

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

StateSet

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

总结

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