一、前言

MotionLayout可以管理应用中的运动轨迹和控件的动画。因为是ConstraintLayout的子类，所以很多属性是和ConstraintLayout一样的。这个动画相较于属性动画、逐帧动画有更丰富的功能，而且还可以进行拓展，并且可以和CoordinatorLayout进行配合使用。而且用法上会简单很多，有些动画效果完全可以使用MotionLayout而不用去自定义View。可以提高一部分的工作效率，这里记录下基本的使用方式，进行下简单的了解。其余的用法可以在文末查看官方文档

二、基本用法

需要添加依赖

implementation 'androidx.constraintlayout:constraintlayout:2.1.4'

这里先创建一个布局，让里面的TextView做动画效果，注意其id

activity_montion.xml

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/scene_01"
    tools:context=".MotionActivity">
    <TextView
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="标题"
        android:layout_marginTop="100dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
androidx.constraintlayout.motion.widget.MotionLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

创建res/xml/scene_01.xml，内容如下，注意其运动的id与上述布局运动的id保持一致

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

    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:duration="1000">
        <OnSwipe
            motion:touchAnchorId="@+id/button"
            motion:touchAnchorSide="right"
            motion:dragDirection="dragRight" />
    Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />

    ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginEnd="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    ConstraintSet>

MotionScene>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

以下来自官方文档

请注意以下几点：

• 包含运动的基本定义。

  • motion:constraintSetStart 和 motion:constraintSetEnd 指的是运动的端点。这些端点在 MotionScene 后面的 元素中定义。

  • motion:duration 指定完成运动所需的毫秒数。

• 可让您通过轻触控制运动。

  • motion:touchAnchorId 指的是您可以滑动并拖动的视图。

  • motion:touchAnchorSide 表示我们从右侧拖动视图。

  • motion:dragDirection 表示拖动的进度方向。例如，motion:dragDirection="dragRight" 表示当您向右拖动时，进度会增加。

• 是定义描述您的运动的各种限制条件的位置。在此示例中，我们为运动的每个端点定义一个 ConstraintSet。这些端点垂直居中（通过 app:layout_constraintTop_toTopOf="parent" 和 app:layout_constraintBottom_toBottomOf="parent"）。在水平方向上，端点位于屏幕最左侧和最右侧。

这里需要注意motion:touchAnchorId和Constraint中的android:id与布局中运动的控件的id保持一致

然后直接在Activity中加载布局，加载后，手势拖动控件会发现出现动画效果

三、参考链接

1. 使用 MotionLayout 管理运动和微件动画

2. MotionLayout 参考文档 | Android 开发者 | Android Developers

3. 官方的MotionLayout动画示例

4. github上使用MotionLayout做的视差动画

5. Android MotionLayout详解

6. KeyCycles的使用(可以使运动轨迹使用波形轨迹，可视化操作，可以导出代码)