MotionLayout动画

最新推荐文章于 2025-06-17 15:55:58 发布
最新推荐文章于 2025-06-17 15:55:58 发布
阅读量3.9k 收藏 15
点赞数 9
CC 4.0 BY-SA版权
分类专栏： Android 布局 文章标签： ConstraintLayout MotionLayout
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u014290233/article/details/94398813
本文详细介绍如何使用ConstraintLayout 2.0中的MotionLayout实现复杂的动画效果，包括定义ImageView的位置变化、关键帧设置及路径动画，最终实现一个类似Google I/O演示的动画案例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在今年的Google I/O 上 Google 开发者展示了这么一段视频 What’s New in ConstraintLayout (Google I/O’19) （视频在youtube上，需要翻墙），截了其中一段做了个gif图在这里插入图片描述
图中动画使用ConstraintLayout 2.0里的MotionLayout完成。
ConstraintLayout 2.0现在还是beta版，不过已经可以实行图中的动画了。
今天可以做一个简易版的动画

本文后面的内容需要MotionLayout的相关知识
在此推荐

本项目环境配置：
Android Studio 3.4.1
ConstraintLayout 2.0.0-beta1

新建项目，引入ConstraintLayout 库

implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta1'

布局根节点使用MotionLayout替换ConstraintLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.motion.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/activity_motion"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="20dp"
    android:layout_marginBottom="20dp"
    app:layoutDescription="@xml/motion_scene"
    app:showPaths="true"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/main_image1"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/color1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="ContentDescription" />

</android.support.constraint.motion.MotionLayout>

xml里引入motion_scene文件

<?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="4000"
        motion:motionInterpolator="easeInOut">
        <OnClick
            motion:clickAction="toggle"
            motion:targetId="@id/main_image1" />
            
			......
			......
     
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/main_image1"
            android:layout_width="60dp"
            android:layout_height="60dp"
            motion:drawPath="path"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:pathMotionArc="startVertical" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/main_image1"
            android:layout_width="60dp"
            android:layout_height="60dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent" />

    </ConstraintSet>

</MotionScene>

我们先从最简单的入手，定义一个ImageView，两个ConstraintSet 分别定义开始位置和结束位置，然后在Transition处引入
motion:duration 定义动画时长
motion:motionInterpolator定义缓动动画 （这里推荐一个网站 缓动函数速查表）

<OnClick
            motion:clickAction="toggle"
            motion:targetId="@id/main_image1" />

这段代码 表示监听main_image1的点击事件，并在开始位置和结束位置之间切换状态

在这里插入图片描述
为了使图片旋转一周，我们需要定义5个关键点
在这里插入图片描述
先添加第一个关键点

<KeyFrameSet>

            <KeyPosition
                motion:framePosition="20"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@id/main_image1"
                motion:pathMotionArc="flip"
                motion:percentX="0.25"
                motion:percentY="0.65" />
           
        </KeyFrameSet>

motion:motionTarget 表示关键点应用的控件
motion:framePosition 表示这个点处于动画进行到20%时
motion:keyPositionType 表示使用的坐标系，有三种选择

  • parentRelative
  • deltaRelative
  • pathRelative

motion:percentX motion:percentX 关键点的（x,y）坐标

三种坐标系的区别
parentRelative
这个我使用后发现与引用的博客里不一样，这个是与Android坐标系一致，以父容器左上角为坐标原点，向右为x轴正方向，向下为y轴正方向。
deltaRelative
以控件开始位置和结束位置定义坐标系，开始位置为坐标原点，水平方向为X轴，垂直方向为Y轴。
在这里插入图片描述
pathRelative
以起始位置为坐标原点，起始位置到结束位置的path为X轴，垂直方向为Y轴。
在这里插入图片描述

motion:pathMotionArc 表示两点之间的path形状，默认是none（线性） ，flip表示翻转当前弧形方向

  • startHorizontal
    startHorizontal

  • startVertical
    在这里插入图片描述

第一个关键点定义完成后运行如图
在这里插入图片描述
如此这样，定义完其他的关键点

<KeyFrameSet>

            <KeyPosition
                motion:framePosition="20"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@id/main_image1"
                motion:pathMotionArc="flip"
                motion:percentX="0.25"
                motion:percentY="0.65" />
            <KeyPosition
                motion:framePosition="36"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@id/main_image1"
                motion:pathMotionArc="flip"
                motion:percentX="0"
                motion:percentY="0.5" />
            <KeyPosition
                motion:framePosition="52"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@id/main_image1"
                motion:pathMotionArc="startHorizontal"
                motion:percentX="0.5"
                motion:percentY="0.25" />
            <KeyPosition
                motion:framePosition="68"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@id/main_image1"
                motion:pathMotionArc="startVertical"
                motion:percentX="1"
                motion:percentY="0.5" />
            <KeyPosition
                motion:framePosition="84"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@id/main_image1"
                motion:pathMotionArc="none"
                motion:percentX="0.5"
                motion:percentY="0.75" />

        </KeyFrameSet>

如此这样，定义完其他的关键点

<KeyFrameSet>

            <KeyPosition
                motion:framePosition="20"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@id/main_image1"
                motion:pathMotionArc="flip"
                motion:percentX="0.25"
                motion:percentY="0.65" />
            <KeyPosition
                motion:framePosition="36"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@id/main_image1"
                motion:pathMotionArc="flip"
                motion:percentX="0"
                motion:percentY="0.5" />
            <KeyPosition
                motion:framePosition="52"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@id/main_image1"
                motion:pathMotionArc="startHorizontal"
                motion:percentX="0.5"
                motion:percentY="0.25" />
            <KeyPosition
                motion:framePosition="68"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@id/main_image1"
                motion:pathMotionArc="startVertical"
                motion:percentX="1"
                motion:percentY="0.5" />
            <KeyPosition
                motion:framePosition="84"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@id/main_image1"
                motion:pathMotionArc="none"
                motion:percentX="0.5"
                motion:percentY="0.75" />

        </KeyFrameSet>

运行效果如下：
在这里插入图片描述
添加其他的ImageView，更改最后的显示位置，将ImageView1的关键点复制3份，分别设成其他的ImageView的关键点

<ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/main_image1"
            android:layout_width="60dp"
            android:layout_height="60dp"
            motion:drawPath="path"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:pathMotionArc="startVertical" />

        <Constraint
            android:id="@+id/main_image2"
            android:layout_width="60dp"
            android:layout_height="60dp"
            motion:drawPath="path"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:pathMotionArc="startVertical" />
        <Constraint
            android:id="@+id/main_image3"
            android:layout_width="60dp"
            android:layout_height="60dp"
            motion:drawPath="path"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:pathMotionArc="startVertical" />
        <Constraint
            android:id="@+id/main_image4"
            android:layout_width="60dp"
            android:layout_height="60dp"
            motion:drawPath="path"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:pathMotionArc="startVertical" />

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/main_image1"
            android:layout_width="60dp"
            android:layout_height="60dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toLeftOf="@id/main_image2"
            motion:layout_constraintVertical_chainStyle="spread_inside" />
        <Constraint
            android:id="@+id/main_image2"
            android:layout_width="60dp"
            android:layout_height="60dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toRightOf="@id/main_image1"
            motion:layout_constraintRight_toLeftOf="@id/main_image3" />
        <Constraint
            android:id="@+id/main_image3"
            android:layout_width="60dp"
            android:layout_height="60dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toRightOf="@id/main_image2"
            motion:layout_constraintRight_toLeftOf="@id/main_image4" />
        <Constraint
            android:id="@+id/main_image4"
            android:layout_width="60dp"
            android:layout_height="60dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toRightOf="@id/main_image3"
            motion:layout_constraintRight_toRightOf="parent" />

    </ConstraintSet>

效果如下：
在这里插入图片描述
可以看到效果和演示视频差不多了，接下来使4个ImageView依次运动

更改每个ImageView的每个motion:framePosition，使各个关键点产生距离，最终效果如下

在这里插入图片描述
代码已上传github github地址

参考文章：

使用MotionLayout实现动画效果
金戈鐡馬
04-05 496
MotionLayout 是一个 Google 官方出品用于制作 Android 中的过渡动画的框架。用来它就能轻松的做出一些较为复杂的动画效果。 MotionLayout 是 ConstraintLayout 的子类，并且在 ConstraintLayout 发展到 2.0 时才加入 ConstraintLayout 这个库。
28、Android MotionLayout 动画开发全解析
06-16 25
本文全面解析了 Android 中 MotionLayout 的动画开发，涵盖 MotionLayout 简介、关键帧声明、位置关键帧、时间线性控制、触发关键帧、从代码启动动画等内容。通过详细的步骤和示例项目，介绍了 MotionLayout 编辑器的使用流程，并深入分析了核心代码及常见问题的解决方法。适合希望提升 Android 动画开发技能的开发者参考。
MotionLayout实现Android控制中心动画效果
qq_31054411的博客
12-14 786
前言 最近了解到ConstraintLayout库升级到了2.0.0，而且其中的MotionLayout非常的好用，可以实现各种好看的动画，本着学习的目的，使用MotionLayout来实现一次Android控制中心的动画效果。效果如下： 开始 导入依赖 由于MotionLayout是2.0.0开始出现的，因此需要将依赖的版本升至2.0.0以上，这里使用当前最新版本2.0.4。 implementation 'androidx.constraintlayout:constraintlayout:2.0
MotionLayout（二）：MotionLayout是什么？MotionLayout调试技巧、KeyFrame关键帧等等
chuyouyinghe的专栏
06-17 106
MotionLayout是Android Jetpack中继承自ConstraintLayout的高级布局容器，专门用于处理复杂的界面动画和交互效果。它通过MotionScene配置文件定义动画状态（ConstraintSet）、过渡规则（Transition）和关键帧（KeyFrame），支持手势触发、路径动画等高级功能。开发者可以创建折叠标题栏、多视图联动等流畅动画效果。调试时可使用showPaths属性可视化路径，注意确保constraintSetStart与初始布局一致。相比传统动画实现方式，Mot
MotionLayout的使用
Mr_Tony的专栏
08-03 968
MotionLayout的简单用法
MotionLayout第二篇概述Android 最丝滑的动画--(后面陆续更新)(带效果图)
奇奇怪怪的Android code的博客
07-18 2074
Android 最丝滑的动画--第二篇MotionLayout概述(后面陆续更新)
MotionLayout的大致使用
m0_74000465的博客
11-05 647
同样是上面的代码。如果不适用外部已经创建好的布局文件，而是使用ConstraintSet定义起始和终止的布局。​​android:text="滑动"​android:text="滑动"ConstraintSet中必须包含元素。起始布局和结束布局基本是由< Constraint>实现的。< Constraint>元素用来声明运动序列其中一个视图的位置和属性，也就是视图的约束。效果和之前是一样的。
Android-MotionLayout动画：续写ConstraintLayout新篇章
2401_85763952的博客
06-19 718
因为id为start的标签关联到Transition标签的属性，所以它作为动画（目前只有一个动画）的起始状态。而id为end的标签关联到Transition标签的属性，所以它将作为动画的结束状态。结束状态我们将正方形设置水平居中，距离底部50dp。设置Constraint标签时记得设置与，不然是看不到正方形的。TransitionTransitiononClickonClicktoggletargetId此时看起来是这样子的。OK,看到这里，你应该可以创建个类似的MotionLayout动画。
基于Kotlin语言的Android动画效果实现项目_包含ConstraintLayout约束布局与MotionLayout动画效果的演示应用_展示如何使用Kotlin开发流畅的A.zip
最新发布
08-14
基于Kotlin语言的Android动画效果实现项目_包含ConstraintLayout约束布局与MotionLayout动画效果的演示应用_展示如何使用Kotlin开发流畅的A.zip
用MotionLayout实现这些不可思议的效果
郭霖
11-30 1475
/ 今日科技快讯 /近日，据外媒报道，自从研发电动汽车的计划取消后，家电品牌戴森正对其产品路线图进行重组，承诺在人工智能、机器人和能源储存等领域进行投资。该公司表示，计划在未来5...
Android 使用MotionLayout实现动画效果
朱豪凯的博客
07-29 3829
MotionScene 运动场景文件的根元素。 <MotionScene>包括一个或多个<Transition>元素，每个元素用于定义运动序列的开始和结束状态，以及这两种状态的转换。 必须包含的元素 Transition 指定需要执行的运动序列。 如果<MotionScene>包含多个<Transition>元素，MotionLayout会根据用户的互动选择最合适的元素。例如，<MotionScene>可能有四个<Transition>
motionstudio
10-30
制作酷炫动画片头利器。为你的视频制作增光添彩。这是一份crk文件，原文件自己找度娘吧。
MotionLayout
Vincent的博客
08-24 1294
文章目录1 MotionLayout的背景2 MotionLayout使用说明2.1 MotionScene2.2 Transition2.2.1 OnClick2.2.2 OnSwipe2.2.3 KeyFrameSet2.2.3.1 KeyAttribure2.2.3.2 KeyCycle2.2.3.3 KeyPosition2.2.3.4 KeyTimeCycle2.2.3.5 KeyTrigger2.3 ConstraintSet2.4 StateSet 1 MotionLayout的背景 2 Mo
MotionLayout动画使用参考
qq_37196748的博客
12-25 1582
MotionLayout ConstraintLayout的子类，是一种可以管理应用中的运动和微件动画的布局类型，关联手势和组件动画。 支持在XML中完全描述一个复杂的动画。 常规使用 依赖 implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-rc1’ ​ 布局 <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://s
MotionLayout 学习实践，仿写两个效果图
L_junpeng的博客
01-21 320
MotionLayout 学习实践
MotionLayout 动画使用
huang_xiao_yu的博客
03-29 382
需求： 页面有张背景图，随着下拉刷新，背景图也随之逐渐放大。 分析： 方案一：监听下拉刷新的控件，根据下拉的距离，动态设置拉伸比例 方案二：采用MotionLayout 效果如下： （因为动态图上传不了，所以，截取了个动画初始图，动画拉伸放大效果图） 初始效果： 拉伸放大之后的效果： 实现如下： 布局： <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout
【Android笔记#7】底部导航栏动态效果：MotionLayout+ImagFilterView实现+NavHostFragment使用
Jelly_Bean的博客
01-11 1438
本文基于B站UP主longway教程编写：第57集 底部导航栏动态效果 效果图 一个理想中的应用导航栏，应该达到什么需求标准？ 1.能够切换Fragment 2.点击切换图片 3.附带动画效果 4.滑动切换 5.右上角带消息红点 理想归理想，还得看需求实现，对于底部按钮动画用MotionLayout+ImagFilterView简单便捷又能取得不错的效果。 布局结构 MotionLayout作为ConstraintLayout的子类，AS4.0可以直接将ConstraintLayout转为Motion
SOLIDWORKS motion如何创建动画
jkggg的博客
10-18 1312
今天我们就来看看SOLIDWOKRS motion是如何制作动画的。首先我们可以尝试进行简单移动，将上图中红色滑块沿导轨移动到相应位置，在开始移动滑块之前，我们需要先拖动时间轴到运动停止的时间刻度上，再将需要移动的模型拖到相应位置，若勾选了自动键码则在时间轴新位置会伴随着零件移动同步自动生成新键码。这是基础的单自由度运动，有时我们需要多个零部件分别进行不同方向上的运动，与简单运动相同，依然是拖动时间轴放置键码后实现，不过每个单独的运动模块需要分别设置各自的键码，再根据实际情况选择相应的插值模式即可。
Android MotionLayout：以最简单的方式创建类似Twitter的“福师大APP
m0_67598977的博客
04-28 340
MotionLayout是Android ConstraintLayout的子类，可让您非常轻松地为应用程序中的任何视图或布局设置动画。 虽然仍处于测试阶段，但尚未得到广泛采用，但是我已经可以想象到，稳定发行后人们会想到的独特的交互式动画！ [](()什么是MotionLayout？快速介绍 简而言之，MotionLayout是一个ConstraintLayout允许您轻松在两个ConstraintSet之间进行转换的工具。 ConstraintSet包含每个视图的所有约束和布局属性。 Tra..
android MotionLayout动画
03-12
### 如何在 Android 中使用 MotionLayout 创建动画 #### 定义布局文件中的 `MotionLayout` `MotionLayout` 是一种特殊的布局管理器，继承自 `ConstraintLayout`。这意味着可以在定义视图位置和大小的同时指定这些属性随时间变化的方式。 ```xml <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/motion_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:layoutDescription="@xml/scene_file"> <!-- 子View --> </androidx.constraintlayout.motion.widget.MotionLayout> ``` 上述代码展示了如何声明一个 `MotionLayout` 控件并关联到场景描述文件[^1]。 #### 场景描述文件 (`@xml/scene_file`) 的结构 为了使 `MotionLayout` 能够工作，需要创建 XML 文件来描述不同状态下的约束条件以及两者之间的转换方式： ```xml <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"/> <ConstraintSet android:id="@+id/start"> <!-- 初始状态下各组件的位置和其他属性设置 --> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <!-- 结束状态下各组件的新位置和其他属性设置 --> </ConstraintSet> </MotionScene> ``` 此配置指定了两个不同的约束集——起始(`start`) 和结束(`end`) ，并通过 `<Transition>` 标签连接起来形成完整的运动路径[^2]。 #### 动态控制动画播放 除了静态设定外，还可以编程地触发或调整动画过程。例如，在 Java/Kotlin 代码里调用相应的方法启动特定的过渡动作或者改变当前进度值: ```java // 获取 MotionLayout 实例 MotionLayout motionLayout = findViewById(R.id.motion_layout); // 开始向目标状态转变 motionLayout.transitionToEnd(); // 或者手动设置中间某个百分比的状态 float progressValue = 0.5f; // 表示一半完成度 motionLayout.setProgress(progressValue); ``` 以上方法允许开发者灵活操控由 `MotionLayout` 所驱动的各种交互行为[^4]。 #### 添加关键帧 (Optional) 如果希望更精细地定制动画流程，则可以通过添加额外的关键帧节点进一步增强表现力。这使得某些时刻内的视觉特性得以精确调控而不必依赖线性的插值算法。 ```xml <KeyFrameSet> <KeyAttribute app:framePosition="50" app:motionTarget="@id/my_view"> <CustomAttribute app:attributeName="alpha" app:value="0.5"/> </KeyAttribute> </KeyFrameSet> ``` 这里展示了一个简单的例子，其中当达到整个动画周期的一半时会将某对象透明度设为半透明白色[^3]。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值