JetPack知识点实战系列十一：MotionLayout让动画如此简单

最新推荐文章于 2026-04-15 09:00:54 发布

原创

最新推荐文章于 2026-04-15 09:00:54 发布 · 1.2w 阅读

本文详细介绍了MotionLayout的使用，包括如何从ConstraintLayout转换为MotionLayout，设置动画的开始和结束状态，以及如何通过MotionScene配置动画过渡、关键帧和触发器。此外，还展示了如何通过代码触发动画、监听动画状态以及实现图片变换、属性动画等复杂效果。MotionLayout为Android开发者提供了更丰富的UI动画和交互设计能力。

MotionLayout是ConstraintLayout的子类，所以它是一种布局类型，但是它能够为布局属性添加动画效果，是开发者实现动画效果的另一个新的选择。

MotionLayout基础

让动画跑起来

在入门练习的例子中，我们先利用MotionLayout实现一个View从左下(x25%，y75%)的位置移动到右上(x75%，y25%)的位置，如下图所示：

位置移动

添加依赖

implementation 'androidx.constraintlayout:constraintlayout:2.0.2'

MotionLayout是constraintlayout2.0以后才有的功能。

将ConstraintLayout转为MotionLayout

打开布局文件进入Design模式，选中ConstraintLayout右击弹出选项列表，点击Convert to MotionLayout，这样就进入了MotionLayout Editor界面。

转换MotionLayout

MotionLayout Editor是AndroidStudio 4.0提供的功能。以前的版本是没有这个功能的。

将ConstraintLayout转换成MotionLayout后，我们会发现在res -> xml 下面多了一个MotionScene文件，动画的相关配置都是储存在这个文件中，而静态的布局依然在layout布局文件中。

MotionScene

该MotionScene文件的代码如下：

<?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>

我们目前只先看一看该文件的内容，主要包括Transition和两个ConstraintSet。至于他们分别代表的意义后面再做介绍。

设置开始状态的位置

我们回到MotionLayout Editor，在右上部分可以看到两个可以点击的区域，一个名字是start，一个是end。他们代表的是动画效果两个状态—开始状态和结束状态。

我们需要对imageButton进行动画，所以我们在start状态中勾选上imageButton。

设置方法: 点击start -> 选择imageButton -> 点击ConstraintSet( start ) 后面的编辑按钮 -> 选择 Create Constraint。

start

编辑结束状态的位置

接下来我们编辑结束状态的位置，让imageButton位于右上(x75%，y25%)的位置。

ConstraintSet

开始状态我们不需要进行修改就是左下(x25%，y75%)的位置，

修改结束状态的位置

这时候我们点击start和end 这两个ConstraintSet就能看出View位置的差别了。

Click触发动画

MotionLayout动画可以点击OnClick触发，也可以滑动OnSwipe触发。

点击start和end 这两个ConstraintSet之间的Transition连线，然后勾选OnClick。

点击触发动画

最后的效果如下：

动画效果

设置只能点击imageButton触发动画

上面设置的是点击触发动画，我们可以设置成只有点击imageButton触发动画。

设置方式：点击OnClick后面的**+** -> 选择targetId，属性值为id即imageButton。

点击imageButton触发

MotionScene介绍

经过一系列操作后，我们实现了imageButton的位移动画。
这些是如何实现的呢？我们就回过来看看MotionScene文件的内容变化。

<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>
        <OnClick motion:targetId="@id/imageButton" />
    </Transition>

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

        <Constraint
            android:id="@+id/imageButton"
            motion:layout_constraintEnd_toStartOf="@+id/guideline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toTopOf="@+id/guideline4"
            motion:layout_constraintTop_toTopOf="@+id/guideline4"
            motion:layout_constraintStart_toStartOf="@+id/guideline" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            motion:layout_constraintVertical_bias="1.0"
            android:layout_height="wrap_content"
            motion:layout_constraintEnd_toStartOf="@id/guideline2"
            motion:layout_constraintStart_toStartOf="@id/guideline2"
            motion:layout_constraintTop_toTopOf="@id/guideline3"
            motio