参考官方文档，手敲一份代码：
https://developer.android.com/training/constraint-layout/motionlayout?hl=zh-cn
滑动效果如下：
首先需要导包，注意是android还是androidx. androidx是
dependencies {
implementation"androidx.constraintlayout:constraintlayout:2.0.0-beta4"
}
注意：beta2会报错：
AAPT: error: resource attr/flow_horizontalSeparator not found
参考
https://github.com/android/views-widgets-samples/issues/37 改为beta4
android 则是：
dependencies {
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1'
}
activity_main.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/motionLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/test_motion_scene"
app:showPaths="false"
app:motionDebug="SHOW_ALL"
app:motionProgress="0.5"
tools:context=".MainActivity">
<TextView
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:background="@color/purple_700"
android:text="Button" />
</androidx.constraintlayout.motion.widget.MotionLayout>
[图片上传中...(image.png-64183b-1606878949252-0)]
res/xml/test_motion_scene.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
motion:motionInterpolator="bounce">
<OnSwipe
motion:dragDirection="dragRight"
motion:touchAnchorId="@+id/button"
motion:touchAnchorSide="right" />
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
android:alpha="50"
android:rotation="90"
android:scaleX="1"
android:scaleY="1"
android:elevation="2dp"
android:translationY="0dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#D81B60"/>
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
android:alpha="100"
android:rotation="270"
android:scaleX="0.5"
android:scaleY="0.5"
android:elevation="1dp"
android:translationY="30dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#1BD8AC"/>
</Constraint>
</ConstraintSet>
</MotionScene>
其他 MotionLayout 属性
除了上述示例中的属性之外，MotionLayout 还包含您可能想要指定的其他属性：
app:applyMotionScene="boolean" 表示是否应用 MotionScene。此属性的默认值为 true。
app:showPaths="boolean" 表示在运动进行时是否显示运动路径。此属性的默认值为 false。
app:progress="float" 可让您明确指定转换进度。您可以使用从 0（转换开始）到 1（转换结束）之间的任意浮点值。
app:currentState="reference" 可让您指定具体的 ConstraintSet。
app:motionDebug 可让您显示与运动有关的其他调试信息。可能的值为“SHOW_PROGRESS”、“SHOW_PATH”或“SHOW_ALL”。
可以看到：
- showPaths的效果就是虚线和起始、结束的点。app发布需要取消显示Path.
- 设置2端颜色，可以看到颜色是渐变过来的。设置自定义属性，使用CustomAttribute， 必须设置motion:attributeName 和自定义属性值。属性名称必须是具备getr 和set方法的。
- 设置手势，可以看到手指左滑、右滑可以响应动画（从start到end和从end到start）。同样也可以设置上下滑动。
- 2种状态不可中断，要么变成另一种状态，要么状态恢复。
- 可以同时设置动画 缩放、旋转、透明、移动，以及部分属性：可见性、透明度、投影范围。
插入的属性
在 MotionScene 文件中，ConstraintSet 元素可包含在转换期间插入的其他属性。除了位置和边界之外，MotionLayout 还插入以下属性：
alpha
visibility
elevation
rotation、rotationX、rotationY
translationX、translationY、translationZ
scaleX、scaleY
6.app:motionDebug="SHOW_ALL" 显示 debug 信息。数据格式：
61.77 fps start->end(progress:38.00) state=undefined
- app:motionProgress="0.5" 设置初始进度，在这个案例中，就是一进去就在屏幕中间位置。
- motion:motionInterpolator 还可以设置动画的interpolator.
说句题外话：
简书markdown 模式，不能上传MP4，只能用gif代替。
解决办法：将mp4在线转换成gif并下载（搜索:mp4在线转换gif），然后将gif文件拖到文档中，复制只能复制png图片。
