Android MotionLayout动画：续写ConstraintLayout新篇章

最新推荐文章于 2024-09-03 21:14:01 发布

2401_84519718

最新推荐文章于 2024-09-03 21:14:01 发布

阅读量841

点赞数 8

分类专栏：程序员文章标签： android

本文链接：https://blog.csdn.net/2401_84519718/article/details/138276734

版权

程序员专栏收录该内容

187 篇文章 2 订阅

订阅专栏

本文介绍了如何在Android项目中使用MotionLayout实现动画，包括引入支持库，创建MotionLayout布局，配置MotionScene，设置动画的开始和结束状态，以及关键帧。通过实例演示了如何设置动画触发条件和显示路径。

摘要由CSDN通过智能技术生成

implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta8’

支持库：

implementation ‘com.android.support.constraint:constraint-layout:2.0.0-beta8’

学习MotionLayout动画可能需要点Transition和ConstraintLayout知识点，不了解可以看看文末链接哦。MotionLayout运动动画定义了在两个状态集（StateSet）或者两个约束集(ConsraintSet）之间如何进行过渡。状态集与约束集只是过渡动画不同的组织方式。

如果快速入手

1、通过Android Studio创建名为activity_motion的MotionLayout布局文件。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2、生成MotionLayout布局后会报红，提示创建MotionScene.xml文件。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3、选择创建后，会在res/xml文件夹下生成activity_motion_scene.xml文件。内容：

<?xml version="1.0" encoding="utf-8"?>

此时在activity_motion.xml布局文件中的MotionLayout标签会多一个layoutDescription="@xml/activity_motion_scene"属性，但Android Studio还是缺少layoutDescription属性的错误，需要手动添加上命名空间。

<?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”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
app:layoutDescription=“@xml/activity_motion_scene”>

</androidx.constraintlayout.motion.widget.MotionLayout>

欧力给，已经学会创建MotionLayout,但好像没什么卵用。我们来看看刚刚自动生成的activity_motion_scene.xml文件。

【划重点】根标签MotionScene有一个defaultDuration属性，表示所有未指定时间的动画的默认时间，默认为300毫秒。MotionScene根标签必须包含Transition标签，可以有多个Transition标签。Transition标签是用来指定动画的开始和结束状态、任何中间状态以及触发动画的动作，可以理解为一个Transition标签对应一个动画。同时，MotionScene标签可以包含TransitionSet标签，这是可选的。TransitionSet标签主要为Transition标签提供起始和结束状态的位置和属性。而TransitionSet标签必须包含一个或多个Constraint子标签。Constraint标签用来定义布局中某个View在动画中某个状态下位置（通过ConstraintLayout的相关属性来约束）。

充分理解上段话的内容，下面通过实战加深理解：

1、在activity_motion.xml布局文件增加一个id 为vStartStatus的正方形View。并在根标签MotionLayout添加showPaths="true"属性，用来显示正方形运动的路径。

<?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”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
app:layoutDescription=“@xml/activity_motion_scene”
app:showPaths=“true”>

</androidx.constraintlayout.motion.widget.MotionLayout>

2.将activity_motion_scene.xml文件中Constraint标签的id值修改成正方形的id，即vStartStatus。Constraint标签的id属性值需要与要起动画效果的View的id保持一致，这样Constraint标签的所有属性都会作用于该View。Constraint标签的属性与ConstraintLayout的属性是一致的，为此，给正方形开始状态增加一些属性，使其位置水平居中，距离顶部50dp。

因为id为start的ConstraintSet标签关联到Transition标签的constraintSetStart属性，所以它作为动画（目前只有一个动画）的起始状态。而id为end的ConstraintSet标签关联到Transition标签的constraintSetEnd属性，所以它将作为动画的结束状态。结束状态我们将正方形设置水平居中，距离底部50dp。

设置Constraint标签时记得设置layout_width与layout_height，不然是看不到正方形的。

到这一步，Transition标签已经拥有开始和结束状态了，就差触发动画开始的操作了。给Transition标签增加onClick子标签，表示点击触发动画。onClick标签增加clickAction属性，值为toggle,表示重复点击时，动画循环效果；增加targetId属性，值为@id/vStartStatus,表示点击正方形视图触发过渡动画。

此时activity_motion_scene.xml看起来是这样子的。

<?xml version="1.0" encoding="utf-8"?>

效果图

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

OK,看到这里，你应该可以创建个类似的MotionLayout动画。还不行的话，需要回头再看看。

下面讲介绍一些标签的属性与效果。

标签与属性

Transition标签

Transition标签主要用来指定Motion场景中一个或多个动画。即关联到动画对应的各种状态和用户交互动作。和过渡动画是大同小异的。

常用属性：

constraintSetStart:指定动画初始状态；

constraintSetEnd:指定动画结束状态；

duration:指定动画时长；

autoTransiton:是否自动开启动画。取值有：animateToStart过渡到初始状态、animateToEnd过渡到结束状态、jumpToEnd跳到结束状态、jumpToStart跳到初始状态、none不开始状态。默认情况下是none,当设为其他值时，不用和用户交互即自动开启动画。

motionInterpolator:插值器。取值有：linear线性、bounce弹簧、easeIn淡入、easeOut淡出、easeInOut淡入淡出;

transitionDisable：允许动画功能。取值：false和true；

layoutDuringTransition:动画过程中，MotionLayout子View调用reqeustLayout，是否做出响应。取值honorRequest响应、ignoreRequest忽略；(beta 4)