MotionLayout 使用说明书（入门级详解）

最新推荐文章于 2025-10-13 00:43:03 发布

原创

最新推荐文章于 2025-10-13 00:43:03 发布 · 1w 阅读

49 ·

CC 4.0 BY-SA版权

文章标签：

#android

本文详细介绍MotionLayout动画技术，涵盖从入门到进阶的使用方法，包括动画开始与结束的定义、属性转场动画、关键帧设置等内容，适合初学者及进阶用户。

系列文章

MotionLayout 使用说明书（入门级详解）
MotionLayout 使用说明书（进阶+实战）

准备工作

把大象🐘关进冰箱需要三步，让项目中用上MotionLayout只需两步

第一步:升级constraintlayout 至2.0及以上

 implementation 'androidx.constraintlayout:constraintlayout:2.0.0-rc1'

写此文时最新版本为 2.0.0-rc1，目前最新版请前往官网查看Constraintlayout更新日志)

第二步：将布局转换为MotionLayout

MotionLayout 是ConstraintLayout 的子类，用ConstraintLayout 写的布局，用MotionLayout也可以。
所有就放心的将ConstraintLayout 转换为MotionLayout 吧
打开布局在视图预览处或则在Component Tree 栏选中选择ConstraintLayout 右击在菜单栏中点击 Covert to MotionLayout 选项

认识 MotionLayout 工作台

当我们通过上面方式将ConstraintLayout转换为MotionLayout 之后，会帮我们创建一个MotionScene文件在 res/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">
       <KeyFrameSet>
       </KeyFrameSet>
    </Transition>

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

    <ConstraintSet android:id="@+id/end">
    </ConstraintSet>
</MotionScene>

这个文件和布局关联在一起是通过在布局文件声明的 app:layoutDescription

<androidx.constraintlayout.motion.widget.MotionLayout 
      ……                                                
    app:layoutDescription="@xml/activity_main_scene"
   >

再来看看布局,Android studio(4.0及以上版本) 给我带来一个MotionLayout 可视化的动画编辑工具，如下图所示

① 普通状态，选中后预览视图显示原始的状态
② 表示id="start"的ConstraintSet，选中后预览视图显示此约束集的布局，xml 中代码如下

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

💡 ConstraintSet 标签官方解释：“指定所有视图在动画序列中某一点上的位置和属性。通常，一个 Transition元素可指向两个 ConstraintSet 元素，其中一个定义动画序列的开始，另一个定义结束”
我的理解 ConstraintSet 用来存放一些View在某个状态下的约束集和属性

③ 表示id="end"的ConstraintSet，选中后预览视图显示此约束集的布局
④表示从start 约束集到end 的转场，对应xml 代码如下

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

⑤ 创建一个新的ConstraintSet
⑥ 创建一个新的转场Transition
⑦ 创建触发转场的行为，是点击Click还是滑动swipe

<Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
        <!-- 点击-->
        <OnClick />
        <!-- 滑动-->
        <OnSwipe />
    </Transition>

仔细看这三个图标还挺形象的

⑧ 点击后有有个帮助教程

⑨ 表示约束集的元素

动画的开始与结束

动画，有开始有结束。我们享受的是从开始到结束的过程。

入门一个简单的效果

预览

实现一个简单的矩形平移动画

💡 上图是运行效果，图中虚线表示运动轨迹。要显示运动轨迹的虚线需要把MotionLayout的showPaths 属性设置为true
app:showPaths="true"

创建动画元素

在布局中创建一个View 如下

<androidx.constraintlayout.motion.widget.MotionLayout 
      ……
    app:layoutDescription="@xml/activity_main_scene"
    app:showPaths="true">

     <View
        android:id="@+id/box"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:background="@color/colorAccent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>
  
</androidx.constraintlayout.motion.widget.MotionLayout>