MotionLayout使用入门

MotionLayout是安卓新推出的一种布局，用来实现一些炫酷的交互效果，它是ConstraintLayout的子类，不仅拥有自适应的能力，还能实现组件的一些动画和运动效果，兼容Android API 14及以上。 我们可以像使用ConstraintLayout一样，添加约束来控制布局显示，不同的是，我们还可以在XML中为布局和视图新增过渡、属性变化等动画效果。

为什么使用MotionLayout？

在Android中，已经有不少实现视图和布局动画效果的方法和库，比如：

• Animated Vector Drawable
• Property Animation
• LayoutTransition
• TransitionManager
• CoordinatorLayout

上面几种方式各有特点，比如Animated Vector Drawable和Property Animation专注的是动画效果，但是没有结合布局变换，而LayoutTransition和TransitionManager虽然结合了布局变换，但是却不能很方便的实现一些较复杂的动画，CoordinatorLayout虽然结合了布局变换和动画效果，但是不够灵活，有一定的局限性。

MotionLayout就相当于这几者的结合体，它不仅能实现布局变换的过渡效果，还能同时为每一个视图和布局实现属性变化动画，而且还支持手势处理，另外一个优点是它是声明式的，所有动画和过渡效果，无论多复杂都可以在XML中定义。

如何使用MotionLayout？

MotionLayout这么强大，那么如何来使用呢？下面一步步看看如何在项目中使用MotionLayout。

首先，在build.gradle中，添加MotionLayout的依赖，其实就是ConstraintLayout的依赖，不过它是2.0版本才加进来的，所以记得引入2.x.x的版本。

然后在布局中添加MotionLayout，如果是从ConstraintLayout改造的话，只需要把ConstraintLayout改为MotionLayout即可。

接着为MotionLayout创建MotionScene，每个MotionLayout都对应一个MotionScene文件，它是一个XML文件，它里面包含了所有的动画效果的配置。从XML上面来看，MotionLayout就比ConstraintLayout多了一个MotionScene文件的配置，这样它俩之间转换就非常容易，因为关于动画的所有配置都在一个单独的MotionScene文件中。

MotionScene是什么？

在MotionScene中主要由四个元素组成，MotionScene、Transition、KeyFrameSet和ConstraintSet。

• MotionScene，根元素，所有的配置都在该元素内配置，可以配置一个或多个Transition元素。
• Transition，过渡动画配置，指定过渡之前的布局约束和过渡之后的布局约束以及触发机制，一般Transition对应两个ConstraintSet，一个开始状态和一个结束状态。
• ConstraintSet，布局约束集合，包括多个Constraint元素，所有需要实现过渡动画的视图和布局都可以通过一个Constraint来配置约束。
• KeyFrameSet，关键帧配置，默认过渡效果从开始状态逐渐到结束状态，这期间的状态可以通过该元素来配置，这样就可以实现较复杂的动画效果。

更多关于MotionScene的参考可以查看MotionLayout 参考文档。

MotionLayout使用示例一

基础示例，实现的功能是：当点击开始动画按钮后，图标在3秒内从左上方移动到右下方，布局文件如下：

MotionScene文件配置如下：

最终实现的效果图如下：

MotionLayout使用示例二

添加KeyFrameSet，改变中间过程，实现复杂的动画效果，该示例的功能是：当点击开始动画按钮后，图标在3秒内从左上方移动到右下方，并且在动画的过程中，先逐渐转圈放大1倍，最后再转圈恢复原始大小，另外从动画开始到运行到30%的时候，需要将图标的x坐标从开始逐渐转换到父视图70%宽的位置处，从动画30%到70%的过程中，需要将图标的x坐标从父视图70%宽的位置处逐渐转换的父视图30%宽的位置处。

该示例与实例一的布局一样，MotionScene文件配置如下：

最终实现的效果图如下：

MotionLayout使用示例三

通过手势来触发和控制动画，实现功能是：通过手势可以控制动画的开始结束和进度。该示例和示例一的布局文件一样，MotionScene文件也基本上一致，只是Transition中的OnClick改为了OnSwipe。

最终实现的效果如下：

MotionLayout使用示例四

一个播放栏的真实案例，实现功能是：当向上拖动播放栏时，将整个状态栏放大至全屏，当向下拖动播放栏时，缩小播放栏到屏幕底部，最终实现效果如下：

由于涉及代码较多，就不一一贴出代码了，感兴趣可以在底部查看或下载整个项目，