MotionLayout第二篇概述Android 最丝滑的动画--(后面陆续更新)(带效果图)

奇奇怪怪的android code

已于 2023-03-13 09:31:43 修改

阅读量1.8k

点赞数 2

文章标签： android 动画

于 2022-07-18 15:49:10 首次发布

本文链接：https://blog.csdn.net/weixin_45882304/article/details/125852187

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、 MotionLayout概述

MotionLayout 是谷歌推出的一种布局类型，可帮助管理应用中的运动和微件动画。MotionLayout 是 ConstraintLayout 的子类，在其丰富的布局功能基础之上构建而成。作为 ConstraintLayout 库的一部分，MotionLayout 可用作支持库，并可向后兼容 API 级别 14。
MotionLayout 缩小了布局转换与复杂运动处理之间的差距，同时在属性动画框架、TransitionManager 和 CoordinatorLayout 之间提供了各种功能。
除了描述布局之间的转换之外，MotionLayout 还能够让您为任何布局属性添加动画效果。此外，它本身就支持可搜索转换。也就是说，您可以根据某个条件（例如触控输入）立即显示转换中的任意点。MotionLayout 还支持关键帧，从而实现完全自定义的转换以满足您的需求。
MotionLayout 是完全声明性的，也就是说您可以使用 XML 描述任何转换，无论复杂程度如何。(官方概述)
ConstraintLayout 是谷歌在16年I/O大会上，发布了全新的布局-

二、ConstraintLayout

1. 完美的屏幕适配

ConstraintLayout的大小、距离都可以使用比例来进行设置，适配性相对于其他布局要好很多

1. ConstraintLayout较高的性能优势

ConstraintLayout实现的初衷就是避免过度绘制,我们知道,Android的界面是通过不和和控件组成的,在开始的线性布局和相对布局使用的时候,经常会导致布局的过度绘制.布局的过度绘制一共分为四个层级
原色：没有过度绘制
蓝色：1 次过度绘制
绿色：2 次过度绘制
粉色：3 次过度绘制
红色：4 次及以上过度绘制
在app界面面积超过屏幕 1/4 区域的 3 次（淡红色区域）及其以上过度绘制,就会导致界面掉帧的情况,在前几年的手机,大部分都是60hz每秒刷新率的时候,原本的情况下是一秒钟60帧的刷新,差不多是16.6毫秒刷新一帧,如果存在过度绘制的情况,就会出现16.6毫秒的时间中刷新不了一帧图片,导致在视觉上出现了卡顿的现象,而ConstraintLayout就很好的解决了这个问题,使用ConstraintLayout通常一层布局就能够实现界面效果

2.ConstraintLayout开始使用

引入:api ‘com.android.support.constraint:constraint-layout:1.1.2’
ConstraintLayout一共有13个属性,使用方式和RelativeLayout有点相似,就是相对其他布局的位置来定位自身的位置,相对的可以是一个控件的id,也可以是父布局parent

layout_constraintLeft_toLeftOf    (自身控件的左边相对于比较的控件的左边开始绘制控件位置)
layout_constraintLeft_toRightOf       (自身控件的左边相对于比较的控件的右边开始绘制控件位置)
layout_constraintRight_toLeftOf        (自身控件的右边相对于比较的控件的左边开始绘制控件位置)
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

在这里插入图片描述
如图就是相对于父布局来定位绘制的

 <soup.neumorphism.NeumorphTextView
            android:id="@+id/text_user"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="35dp"
            android:text="Hi User "
            android:textColor="#000000"
            android:textSize="26sp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:neumorph_shadowColorDark="#DDDDDD"
            app:neumorph_shadowColorLight="#fff" />

在这里插入图片描述
相对于其他控件和父布局的定位

 <soup.neumorphism.NeumorphTextView
            android:id="@+id/date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:text="Hi User"
            android:textColor="#000000"
            android:textSize="12sp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/text_user"
            app:neumorph_shadowColorDark="#DDDDDD"
            app:neumorph_shadowColorLight="#fff" />