Constraint Layout 2.0 新特性 - Moti

MotionLayout是什么

Motion Layout 是 Constraint Layout 2.0 中最令人期待的功能之一。它提供了一个丰富的动画系统来协调多个视图之间的动画效果。MotionLayout 基于 ConstraintLayout，并在其之上进行了扩展，允许您在多组约束 (或者 ConstraintSets) 之间进行动画的处理。您可以对视图的移动、滚动、缩放、旋转、淡入淡出等一系列动画行为进行自定义，甚至可以定义各个动画本身的自定义属性。它还可以处理手势操作所产生的物理移动效果，以及控制动画的速度。使用 MotionLayout 构建的动画是可追溯且可逆的，这意味着您可以随意切换到动画过程中任意一个点，甚至可以倒着执行动画效果。

MotionLayout可以让我们直接在xml里实现动画效果，无需再写一堆的代码，而且有专门的动画编辑器，可以实时预览动画效果，大大增加了开发效率。

MotionLayout的使用

1. 创建一个xml，根据提示创建对应的scene文件的xml（因为MotionLayout有一个必要属性：app:layoutDescription）。MotionLayout是继承于ConstraintLayout，所以直接用MotionLayout当根标签。
   

   
   给layoutDescription加上命名空间：

2. MotionScene
   MotionLayout核心操作都在刚刚自动生成的对应scene的xml文件，这个xml的根标签是MotionScene。
   

   

在不指定layoutDescription时，所使用的布局约束属性是通用的。但一旦指定layoutDescription后，这里要注意，该属性指向的场景文件内的所有布局属性/参数属性都会覆盖原有布局。

MotionScene有两个子标签：ConstraintSet和Transition。

2.1 ConstraintSet

ConstraintSet有以下特点：

1. 需成对出现，用来标识一个或多个动画的start和end。
2. 有一个子标签Constraint，用来标识需要操作的控件id及约束条件。可以使用ConstraintLayout对应的约束方式来约束需要操作的控件id。控件id需要跟MotionLayout中放置的view的id一致。

在MotionLayout中添加一个图片：

在ConstraintSet中需要修改id：

控制动画的开始和结束，只需要在Constraint设置约束条件即可。

2.2 Transition

Transition是用来操作动画，通过必要属性app:constraintSetStart和app:constraintSetEnd来操作对应id的控件的开始和结束。

Transition还有几个其他比较重要的属性：

• app:duration：动画持续时间
• app:autoTransition：自动开始动画效果，取值：none，animateToEnd（过渡到动画结束），- animateToStart（过渡到动画开始），jumpToStart（直接跳转到动画开始状态），jumpToEnd（直接跳转到动画结束状态），默认取值none。
• app:layoutDuringTransition：动画执行期间，MotionLayout子View调用reqeustLayout，是否做出响应回调。取值：ignoreRequest（不回调），honorRequest（回调）
• app:motionInterpolator：动画插值器，取值：linear（线性），bounce（弹簧），easeIn（淡入），easeOut（淡出），easeInOut（淡入淡出，默认值）
• app:pathMotionArc：运动弧线，取值：startHorizontal（水平默认，俗称抛物线模式），startVertical（锤子模式），flip（反转模式，需配合KeyPosition才有效果）
• app:transitionDisable：动画是否启用，取值：true（启动），false（不启用）

2.2.1 KeyFrameSet
KeyFrameSet是中间帧的集合，其内有多个控制中间帧的子标签：KeyPosition，KeyAttribute，KeyCycle，KeyTimeCycle，KeyTrigger。Transition的属性仅能控制动画的起始，并不能对其轨迹做多种变化，如果想要更炫酷的动画，就需要这几个子标签的配合了。

2.2.1.1 KeyPosition
KeyPosition可以称为位置关键帧，主要用来定义动画移动的某个位置的动画。简单的说，就是可以将直线动画改成曲线，并且可以配置多个KeyPosition标签，让动画看起来更炫酷一些。
几个关键属性：

• app:motionTarget：需要操作的视图Id
• app:framePosition：发生曲线的位置。取值：0-100，将动画整体划分100份，设置多少，就代表在哪个位置发生曲线改变。
• app:keyPositionType：参考坐标系。取值：pathRelative，parentRelative，deltaRelative。非常重要的属性，决定了坐标X和Y的结果。
  • pathRelative：以动画运动轨迹为参考。X轴和Y轴的0点坐标是start位置，start->end方向为X轴，此时Y轴方向为X轴方向的左侧。
  • parentRelative：以父控件为参考。此时坐标0点为父控件的左上角。
  • deltaRelative：以整个动画过渡为参考，与pathRelative不同的是，坐标原点是start位置，坐标终点是end位置，可以理解为：start位置是（0.0）坐标，end位置是（1.1）坐标。

2.2.1.2 KeyAttribute
KeyAttribute是属性动画关键帧，可以简单的配置旋转，缩放，位移等。
关键属性：

• app:motionTarget：指定需要操作的视图id
• app:framePosition：发生曲线的位置。取值：0-100，将动画整体划分100份，设置多少，就代表在哪个位置发生曲线改变。

还包含alpha、scale、rotation等矩阵变换。

例如，放大缩小的效果：

            <KeyAttribute
                android:scaleX="0.5"
                android:scaleY="0.5"
                app:framePosition="30"
                app:motionTarget="@+id/ivAction" />
            <KeyAttribute
                android:scaleX="1.5"
                android:scaleY="1.5"
                app:framePosition="60"
                app:motionTarget="@+id/ivAction" />

旋转：

            <KeyAttribute
                android:rotation="0"
                app:framePosition="30"
                app:motionTarget="@+id/ivAction" />
            <KeyAttribute
                android:rotation="90"
                app:framePosition="60"
                app:motionTarget="@+id/ivAction" />

2.2.1.2 KeyCycle
KeyCycle是循环关键帧，即关键周期点，可用于做周期动画。作用有很多，可以做出各种波形的轨迹，也可以自身旋转，缩放等具有循环功能的中间动画。

关键属性：

• app:waveShape：循环帧模式，取值：sin，cos，square，bounce，triangle，sawtooth，reverseSawtooth
  可参考官方文档：https://developer.android.com/reference/androidx/constraintlayout/motion/widget/MotionLayout#keycycle

• app:wavePeriod：波动周期，这里0.5为一个循环周期

• waveOffset: 属性偏移量

如波浪：

            <KeyCycle
                android:rotation="0"
                android:translationY="-50dp"
                app:framePosition="100"
                app:motionTarget="@+id/ivAction2"
                app:waveOffset="45"
                app:wavePeriod="1"
                app:waveShape="sin" />

还有很多属性可以设置出不同的效果，需要熟悉后进行各种复杂的组合，从而创造出各种不同的酷炫动画效果。还需多做测试，熟练掌握后才能变成自己的东西~

官方推荐的Demo： https://github.com/android/views-widgets-samples/tree/master/ConstraintLayoutExamples

练习使用Demo：https://github.com/ooxiaoyan/ConstraintLayoutTest