MotionLayout--在可视化编辑器中实现动画

构建MotionLayout可视化界面

在对应的XML文件的视图编辑器下，选择如下选项将视图转化为MotionLayout。

之后系统将会在保留原有布局的基础上，生成一个场景文件，如app/src/main/res/xml/activity_main_scene.xml就是刚刚生成的场景文件。

观察activity_main_scene.xml文件中的代码，其中有Transition标签，在可视化界面中对应的是箭头，还有两个ConstraintSet标签，分别对应可视化界面中的两个状态，Constraint是对应状态下组件的样式，Constraint在ConstraintSet中可以存在多个，具体有多少个要看这个状态下有多少个组件了。

<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
       <KeyFrameSet>KeyFrameSet>
    Transition>

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

    <ConstraintSet android:id="@+id/end">
    ConstraintSet>
MotionScene>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

回到activity_main.xml文件，我们将组件View拖动到布局中去，可以看到，目前有两个状态，分别对应动画开始前的状态，和动画结束后的状态。

点击不同的状态，可以对对应状态下的布局进行修改。点击ConstraintSet框右边的“笔”图标，将这个view组件加入的对应状态下的约束集合中去，这样该组件才能在对应状态下显示对应设置的样式。

基础滑动

点击start状态，我们将View组件拖动到左下角，点击end状态，将View组件拖动到右上角，点击两个状态之间的箭头，可以进入动画的关键帧页面，下面进行演示。

增加其它动画

点击start状态或者end状态，点击创建好的Constraint，点击“+”可以增加动画。

比如这里增加旋转动画，效果如下：

曲线运动

曲线对应的是路径，所以修改的是路径的熟悉，那么就点击箭头，在属性栏增加如图属性，当然将对应的值修改为其它的内容。

效果如下：

为动画增加点击事件

点击事件是箭头(Transition)中的属性，所以点击箭头，找到OnClick，并且勾选中图中标注的框，这样就表示点击屏幕中的任何位置都能触发箭头连接的动画。

点击图中标注的“+”图标，可以为某个组件增加点击事件，参数是“targetId”，值是组件的id。

效果如下：

增加插值器motionInterpolator

使用插值器可以让动画执行的过程中给人不同的视觉效果，比如慢进慢出，到达终点时回弹等效果。

使用系统自带的Interpolator

自定义Interpolator–使用cubic-bezie函数

http://yisibl.github.io/cubic-bezier/#.17,.67,.83,.67

在上面这个网站上设置好参数，然后以图示方式使用即可。

效果如下：

关键帧的使用

点击箭头（Transition）可以进入对应箭头的关键帧界面，然后点击图中标注的图标，可以选择设置哪种类型的关键帧属性。有KeyPosition,KeyAttribute,KeyTrigger,KeyCycle,KeyTimeCycle，下面来一一结束它们有什么作用。

KeyPosition

KeyPosition可以设置在某个帧位置组件相对于原坐标偏离的百分比大小。

设置好参数值后点击“Add”即可在50的位置增加一个动画。

效果如下：

KeyAttribute

KeyAttribute可以在某个帧位置设置属性动画。

比如帧50的位置设置rotation属性动画，效果如下：

KeyCycle

KeyCycle可以设置在某个帧位置设置的动画和这个动画执行的周期，这个周期可以是系统自带的一些函数，如下图所示。

同样也可以设置属性动画，设置完成之后表示这个动画以设置好的函数周期执行。

效果如下：

KeyTimeCycle

KeyTimeCycle和KeyCycle类似，只是KeyTimeCycle的效果会一直维持下去。

创建状态并实现状态间的过渡

现在要实现如下动画效果：

可以看出，现在是有三个状态，分别是一个开始状态，和两个不同的结束状态，而之前只有两个状态，那要更多的状态该如何实现呢。点击图中选中的图标即可添加状态，ID是状态的名字，BasedOn是基于哪个状态创建。

然后再创建两个状态之间的Transition，也就是之前一直说的箭头。

最终效果如下：

然后再加入一个组件View来完成动画效果，点击不同的状态来为对应的状态设置页面布局，以“end”状态为例，由上面的动画可以看出，再“start”状态时，点击了黄色的View后，最终黄色的View放大，而红色的View消失了，所以对应的“end”状态就应该是黄色的View放大，红色的View通过设置它的alpha值为0来达到消失的效果。设置完成后，可视化界面是这样的效果。

同理“end2”的状态也是类似设置，不过不要忘了对每个Transition设置点击事件。

图片切换动画 （ImageFilterView）

现要实现如下效果，图片再移动的过程中，图片的内容切换。

这里就需要使用到ImageFilterView，将ImageFilterView拖入布局中来，ImageFilterView中有两个参数，分别是srcCompat和altSrc，srcCompat表示一开始要显示的图片，altSrc是最终要替换显示的图片。

<androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageFilterView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
                                                        
        app:srcCompat="@drawable/iu1"
        app:altSrc="@drawable/iu2"
                                                        />
1
2
3
4
5
6
7
8
9
10
11
12
13

同时要在“start”和“end”状态下的CustomAttributes栏设置crossfade参数。

交错运动（staggered）

实现交错运动只需要再过渡（Transition）属性中增加staggered参数

效果如下: