本文作者

作者:新小梦

链接:

https://juejin.im/post/6854573206653812743

本文由作者授权发布。

0 概述

MotionLayout作为ConstraintLayout子类,在ConstraintLayout 2.0库被引入,主要用来管理运动和组件的动画。ConstrantLayout约束布局,用过的人都说好,反正我用着挺爽的。有部分同学说性能问题,其实对于初中级开发者来说,暂无需考虑这个,相比自己动手嵌套几层布局强吧,而且更重要的是业务UI的实现,尤其工作量大的时候。

本文属于入门级别,重点在于扫盲和入门。如果对你有用,欢迎点赞。个人能力有限,有些东西可能理解不透或不对,欢迎指正,非常感谢。

配置

需要将ConstraintLayout的版本升级到2.0+。

AndroidX:

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  如何快速上手

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

640?wx_fmt=png

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

640?wx_fmt=png

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

<?xml  version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto">

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

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

    <Transitionapp:constraintSetEnd="@id/end"app:constraintSetStart="@+id/start" />
MotionScene>

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

<?xml  version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayoutxmlns: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">

    <Viewandroid:id="@+id/vStartStatus"android:layout_width="50dp"android:layout_height="50dp"android:background="@color/colorPrimary" />

androidx.constraintlayout.motion.widget.MotionLayout>

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

<ConstraintSet android:id="@+id/start">
    <Constraintandroid:id="@+id/vStartStatus"android:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="50dp"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent">
    Constraint>
ConstraintSet>

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

<ConstraintSet android:id="@+id/end">
    <Constraintandroid:id="@id/vStartStatus"android:layout_width="50dp"android:layout_height="50dp"android:layout_marginBottom="50dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent">
    Constraint>
ConstraintSet>

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

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

<Transitionapp:constraintSetEnd="@id/end"app:constraintSetStart="@+id/start">
    <OnClickapp:clickAction="toggle"app:targetId="@id/vStartStatus" />
Transition>

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

<?xml  version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"app:defaultDuration="500">

    <ConstraintSet android:id="@+id/start">
        <Constraintandroid:id="@+id/vStartStatus"android:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="50dp"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent">

        Constraint>
    ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraintandroid:id="@id/vStartStatus"android:layout_width="50dp"android:layout_height="50dp"android:layout_marginBottom="50dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent">
        Constraint>
    ConstraintSet>

    <Transitionapp:constraintSetEnd="@id/end"app:constraintSetStart="@+id/start">
        <OnClickapp:clickAction="toggle"app:targetId="@id/vStartStatus" />
    Transition>
MotionScene>

效果图

640?wx_fmt=gif

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

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

2 标签与属性
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)

1、用户交互的子标签

Transition标签通过一些子标签,实现与用户交互的行为。例如上文的OnClick子标签表示用户的点击行为。

OnClick标签:点击场景中某个视图,开始动画效果。

640?wx_fmt=png

OnSwipe标签:表示在布局上滑动时要执行的操作。由于个人能力有限,一些属性不能准备表达。

640?wx_fmt=png
640?wx_fmt=png
2、关键帧子标签

在上文中,默认情况下过渡动画Transition标签会关联一个开始状态和一个结束状态的TransitionSet标签。但我们知道Transition标签不仅可以创建初始状态和结束状态,还可以创建中间状态。这些中间状态则由关键帧来构成,以实现更复杂的动画效果。

KeyFrameSet标签:用来指定某个中间状态的位置和属性。其实和过渡动画的关键帧是一样的概念。KeyFrameSet标签含有KeyPosition和KeyAttribute两个子标签,这些共同构成过渡动画过程中某特殊状态的位置和属性。

位置关键帧

KeyPosition标签:用来定义整个运动动画中某个状态的位置,相比于静态的TransitionSet标签来说,更加灵活。

640?wx_fmt=png
640?wx_fmt=png

重点属性解释:

framePosition:当前关键帧的位置,把整个运动动画分成100个位置,取值0到99,那么初始状态的位置就是0,结束状态就是99。

keyPositionType:参考坐标系的选择,决定了percentX和percentY属性取值的结果。

取值:parentRelative表示坐标系基于父视图。例如在开头的demo,加上下面的关键帧:

<KeyFrameSet>
    <KeyPositionapp:percentY="0.5"app:framePosition="50"app:motionTarget="@id/vStartStatus"app:keyPositionType="parentRelative"app:percentX="0.25" />
KeyFrameSet>

代码定义了运动动画过程的中间位置framePosition="50",参考系选择了相对父视图坐标keyPositionType="parentRelative"。由于父视图是全屏,所以坐标系原点在屏幕的左上角,percentY="0.5"和percentX="0.25"则表示正方形在父视图高度的1/2,宽度1/4的位置。

效果图

640?wx_fmt=gif

将keyPositionType属性改为deltaRelative,即坐标系选择参照整个过渡动画的位置,那么起始状态的位置就是原点(0,0),结束状态的位置就是终点(1,1)。这里由于原点和终点在x轴上的距离是0,所以percentX="0.25"是没有效果的。

效果图:

640?wx_fmt=other

将keyPositionType属性改为pathRelative,即坐标系选择参照整个运动路径,即起始和终点的直线距离构成X轴,此时y轴就有正负之分,表示在X轴的左边还是右边。x轴和y轴的长度都是等于路径的长度。

例如代码如下:

<KeyFrameSet>
    <KeyPositionapp:framePosition="50"app:percentX="0.5"app:percentY="0.1"app:keyPositionType="pathRelative"app:motionTarget="@id/vStartStatus" />
KeyFrameSet>

效果图:

640?wx_fmt=other

代码如下,percentY改为-1:

<KeyFrameSet>
    <KeyPositionapp:framePosition="50"app:percentX="0.5"app:percentY="-0.1"app:keyPositionType="pathRelative"app:motionTarget="@id/vStartStatus" />
KeyFrameSet>

效果图:

640?wx_fmt=other

percentWidth和percentHeight属性表示视图自身大小,如果整个动画过程中,视图大小不存在变化,是没有效果的。例如文章开始的demo就是没有效果的,可以将正方形在起始状态和结束状态的大小改为不一致,就可以看到效果。percentWidth和percentHeight属性会导致sizePercent属性失效。

属性关键帧

KeyAttribute相对于位置关键帧,属性关键帧更注重的是属性,而不是某位置。例如常见的位移、旋转动画。属性有:

  • framePosition 关键帧位置

  • motionTarget 关联视图Id

  • transitionEasing 动画速度

  • curveFit 选择基于直线的路径或基于单一速率的路径

  • motionProgress 设置动画进度

  • android:alpha 透明度

  • android:elevation 阴影,注意SDK版本

  • android:rotation 旋转

  • android:rotationX 绕X轴旋转

  • "android:rotationY" 绕Y轴旋转

  • android:transformPivotX 旋转或缩放的中心点X坐标

  • android:transformPivotY 旋转或缩放的中心点Y坐标

  • transitionPathRotate

  • android:scaleX" X轴缩放

  • android:scaleY" Y轴缩放

  • android:translationX X轴平移

  • android:translationY Y轴平移

  • android:translationZ X轴平移

如果以上属性不够,也可以通过添加CustomAttribute子标签实现自己属性,跟属性动画自定属性是同个概念。

自定义属性

CustomAttribute标签必须通过attributeName属性指定一个属性名。支持下类型的属性。

  • customColorValue 颜色值类型

  • customColorDrawableValue颜色值的Drawable类型

  • customIntegerValue int类型

  • customFloatValue float类型

  • customStringValue String类型

  • customDimension 尺寸类型

  • customPixelDimension Pixel尺寸类型

  • customBoolean Boolean 类型

到这里,Transition标签和其子标签、相关属性基本就介绍完了。

ConstraintSet标签

ConstraintSet约束集主要用来定义多个属性集合,并通过id被Transition标签引用,作为运动动画过程的起始或结束状态。

Constraint标签

子标签Constraint用来该状态某个View的相关约束属性,约束属性支持ConstraintLayout布局的所有属性+上文提到的自定义属性。

或者通过组织Layout、PropertySet、Transform、Motion、CustomAttribute等子标签,关于这些子标签,感兴趣可以参阅官方文档:

https://developer.android.com/reference/androidx/constraintlayout/motion/widget/MotionLayout#motion

系列好文推荐:

Android属性动画,看完这篇够用了吧

https://juejin.im/post/6846687601118691341

Android矢量图动画:每人送一辆掘金牌小黄车

https://juejin.im/post/6847902224396484621

Android过渡动画,发现掘金小秘密

https://juejin.im/post/6850037271714856968

官方文档

https://developer.android.com/reference/androidx/constraintlayout/motion/widget/MotionLayout#motion

中文官方文档

https://developer.android.com/training/constraint-layout/motionlayout/ref/constraint


最后推荐一下我做的网站,玩Android: wanandroid.com ,包含详尽的知识体系、好用的工具,还有本公众号文章合集,欢迎体验和收藏!

推荐阅读:

直面底层:WindowManager 视图绑定以及体系结构 你准备好了吗?加油呀! 开发一个 IM App 需要会多少知识点?

640?wx_fmt=jpeg

扫一扫 关注我的公众号

如果你想要跟大家分享你的文章,欢迎投稿~

┏(^0^)┛明天见!

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐