android MotionLayout从入门到实战..

最新推荐文章于 2024-09-03 21:14:01 发布
最新推荐文章于 2024-09-03 21:14:01 发布
阅读量4.2k 收藏 24
点赞数 12
分类专栏： Android Android进阶 文章标签： android 动画 kotlin MotionLayout
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44819566/article/details/122191259
版权

本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布

android MotionLayout一篇带你了解最新android动画布局!

环境

  • system : macOS
  • android studio : 4.1.3
  • constraintLayout : 2.0.4
  • gradle : gradle-6.7.1-bin
  • kotlin : 1.4.23

你需要知道什么

  • MotionLayout 是ConstraintLayout的子类,具有ConstraintLayout所有功能

    implementation ‘androidx.constraintlayout:constraintlayout:2.0.4’

  • 使用as预览MotionLayout, as版本必须 >= 4.0

使用 MotionLayout 创建动画

将原ConstraintLayout转换为MotionLayout 布局

在这里插入图片描述
转换之后:
在这里插入图片描述

可以看出,这里定义了一个Button,如果说在ConstraintLayout,这样写会有警告,让约束起来,但是这里并没有

没有的原因是因为定义了MotionLayout的layoutDescription属性,需要在layoutDescription属性中写

点击动画[OnClick]

在这里插入图片描述

onClick#clickAction说明:

类型说明效果图
motion:clickAction=“toggle”反转
motion:clickAction=“transitionToEnd”动画到第二个
motion:clickAction=“jumpToEnd”不添加动画直接结束
motion:clickAction=“jumpToStart”不添加动画到开始见名之意…
motion:clickAction=“transitionToStart”添加动画到见名之意…

多个view一起联动

例如这样:
在这里插入图片描述
效果图:

手指拖动 [OnSwipe]

在这里插入图片描述
参数介绍:

  • motion:touchAnchorId 指的是您可以滑动并拖动的视图。
  • motion:touchAnchorSide 表示我们从右侧拖动视图。
  • motion:dragDirection 表示拖动的进度方向。
    例如，motion:dragDirection=“dragRight” 表示当您向右拖动时，进度会增加。

效果图:

辅助工具

motionLayout默认会自带调试工具.

在这里插入图片描述
说明表:

状态说明效果图
app:motionDebug=“SHOW_ALL”辅助线和进度显示
app:motionDebug=“SHOW_PATH”辅助线显示
app:motionDebug=“SHOW_PROGRESS”进度显示

官方说明图:
在这里插入图片描述

  • 圆圈代表一个视图的开始或结束位置。
  • 线条代表一个视图的路径。
  • 菱形代表KeyPosition修改路径。

还有一种使用视图的方式来调试:


修改路径(KeyPosition)

修改路径可以通过右侧可视化工具来进行:


详解图:

详解1详解2

再来看看自动生成的代码:
在这里插入图片描述
KeyPosition参数详解:

  • motion:motionTarget="@+id/button" 需要移动轨迹的view
  • motion:framePosition="[0-100]" framePosition是一个介于 0 和 100 之间的数字。它定义了在动画KeyPosition中的应用时间，1 表示 1% 的动画，99 表示 99% 的动画
  • motion:keyPositionType=’’ ‘’ keyPositionType这是如何KeyPosition修改路径。它可以是parentRelative，pathRelative，或deltaRelative
  • percentX | percentY是修改路径的量framePosition（值介于 0.0 和 1.0 之间，允许负值和值 >1）

这里motion:keyPositionType=’’ ''参数解释一下:

类型说明坐标系效果图
pathRelative它与其他两个完全不同，因为 X 轴从头到尾遵循运动路径。所以，(0,0)是的起始位置，并且(1,0)是结束位置。
deltaRelativedeltaRelative也是“相对变化”的一种说法。在deltaRelative坐标中(0,0)是视图的起始位置，(1,1)是结束位置。X 轴和 Y 轴与屏幕对齐。X 轴在屏幕上始终是水平的，Y 轴在屏幕上始终是垂直的。与 相比parentRelative，主要区别在于坐标仅描述了视图将在其中移动的屏幕部分。效果和pathRelative类似,不做演示
parentRelativeparentRelative使用相同的坐标系作为屏幕。它定义(0, 0)在整个 的左上角MotionLayout和(1, 1)右下角。

parentRelative:
这里设置了4个点
分别为:
在这里插入图片描述
假设现在移动起始点1,deltaRelative会以开始点和起始点2来构建一个‘贝塞尔环境’来生成对应的路径,这里和pathRelative效果类似但也有不同之处!

pathRelative和deltaRelative的区别:

  • pathRelative不需要依靠起始点和结束点就可以拖动
  • deltaRelative 起始点和结束点在同一x轴上会导致动画路径不按照贝塞尔路径执行.而是执行一条直线.

如图所示:

类型说明效果图
deltaRelative需要依靠起始点和结束点
pathRelative 或 parentRelative不需要依靠起始点和结束点

最终效果长这样:


效果都一样,就只放一个喽,需要的请下载源码观看…

KeyPosition配合pathMotionArc进阶

pathMotionArc见名之意就知道是用来画弧形的.

先来看pathMotionArc简单的例子:


可以看出,想要画一条优雅的弧线很简单,只需要在开始点设置 motion:pathMotionArc="startHorizontal"即可

⚠️:motion:pathMotionArc是需要2个点才生效的,默认是开始点和结束点

如何设置多个点呢?例如这样:

也可以设置两个弧形的比例大小等


位置坐标说明:
在这里插入图片描述

pathMotionArc类型介绍:

  • startVertical 向下的弧形
  • startHorizontal 向上的弧形
  • none 直线
  • flip 和上一个点如果上一个点是startVertical,那么当前就是startHorizontal,可以理解为反转
类型说明效果图
效果一开始点: motion:pathMotionArc="startVertical"
起始点1: motion:pathMotionArc="startHorizontal"
起始点2: motion:pathMotionArc=“startHorizontal”
效果二开始点: motion:pathMotionArc="startVertical"
起始点1: motion:pathMotionArc="none"
起始点2: motion:pathMotionArc=“startHorizontal”
效果三开始点: motion:pathMotionArc="startVertical"
起始点1: motion:pathMotionArc="startVertical"
起始点2: motion:pathMotionArc=“flip”

效果一,效果二和效果三的代码高度重复,这里就只贴一下效果三的代码:

效果三代码:

<?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">
        <!-- 点击事件 -->
        <OnClick
            motion:clickAction="toggle"
            motion:targetId="@id/button6" />
        <KeyFrameSet>
            <!--  起始点1 和 起始点2设置"关联"   -->
            <KeyPosition
                motion:framePosition="40"
                motion:keyPositionType="deltaRelative"
                motion:motionTarget="@+id/button6"
                motion:pathMotionArc="startVertical"
                motion:percentX="0.358"
                motion:percentY="0.17" />
            <!--  起始点2 和结束关联 -->
            <KeyPosition
                motion:framePosition="79"
                motion:keyPositionType="deltaRelative"
                motion:motionTarget="@+id/button6"
                motion:pathMotionArc="flip"
                motion:percentX="0.675"
                motion:percentY="0.568" />
        </KeyFrameSet>
    </Transition>

    <!--    start -->
    <ConstraintSet android:id="@+id/start">
        <!--  开始点 和起始点1设置"关联"  -->
        <Constraint
            android:id="@+id/button6"
            android:layout_width="80dp"
            android:layout_height="80dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:pathMotionArc="startVertical" />
    </ConstraintSet>
    
    <!--    end -->
    <!--  结束点不设置关联。。  -->
    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/button6"
            android:layout_width="64dp"
            android:layout_height="64dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintRight_toRightOf="parent" />
    </ConstraintSet>
</MotionScene>

这里比例也是能改变的,例如这样:


这里还是比较简单的,自己动手试试就懂啦!

改变属性状态(KeyAttribute)

看一眼代码:

<?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/结束了"
        motion:constraintSetStart="@id/开始了"
        motion:duration="1000">
        <KeyFrameSet>

            <!-- 改变属性状态 -->
            <KeyAttribute
                motion:motionTarget="@+id/button7"
                motion:framePosition="22"
                android:alpha="0.2" />
        </KeyFrameSet>

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

    <!--    开始 这里也可以定义中文，但是不建议使用。。 -->
    <ConstraintSet android:id="@+id/开始了">
        <Constraint
            android:id="@+id/button7"
            android:layout_width="60dp"
            android:layout_height="60dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <!--    结束 这里也可以定义中文，但是不建议使用。。-->
    <ConstraintSet android:id="@+id/结束了">
        <Constraint
            android:id="@+id/button7"
            android:layout_width="60dp"
            android:layout_height="60dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>
</MotionScene>

改变alpha的值:


当然也可以设置多个属性,例如这样:


自行探索:

  • android:visibility
  • android:alpha
  • android:elevation
  • android:rotation
  • android:rotationX
  • android:rotationY
  • android:scaleX
  • android:scaleY
  • android:translationX
  • android:translationY
  • android:translationZ

KeyAttribute配合CustomAttribute设置颜色

  • CustomAttribute 常用来设置view颜色的,是KeyAttribute的属性

来看看代码:

<?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">
        <!--点击-->
        <OnClick
            motion:clickAction="toggle"
            motion:targetId="@id/imageView8" />

        <KeyFrameSet>

            <!-- 旋转3圈到 100点 -->
            <KeyAttribute
                android:rotation="-720"
                motion:framePosition="100"
                motion:motionTarget="@id/imageView8" />

            <!-- 0点 的时候黑色 -->
            <KeyAttribute
                motion:framePosition="0"
                motion:motionTarget="@id/imageView8">
                <CustomAttribute
                    motion:attributeName="colorFilter"
                    motion:customColorValue="#000000" />
            </KeyAttribute>

            <!-- 50点的时候红色 -->
            <KeyAttribute
                motion:framePosition="50"
                motion:motionTarget="@id/imageView8">
                <CustomAttribute
                    motion:attributeName="colorFilter"
                    motion:customColorValue="#E91E63" />
            </KeyAttribute>

            <!-- 100点的时候黑色 -->
            <KeyAttribute
                motion:framePosition="100"
                motion:motionTarget="@id/imageView8">
                <CustomAttribute
                    motion:attributeName="colorFilter"
                    motion:customColorValue="#000000" />
            </KeyAttribute>
        </KeyFrameSet>
    </Transition>
    
    <ConstraintSet android:id="@+id/start" ... />
   
    <ConstraintSet android:id="@+id/end" ... />
</MotionScene>

在里面CustomAttribute你必须指定一个attributeName和一个值来设置。

  • motion:attributeName是此自定义属性将调用的 setter 的名称。在这个例子中， setColorFilteronDrawable将被调用。
  • motion:customColorValue 是名称中注明的类型的自定义值，在此示例中，自定义值是指定的颜色。
    自定义值可以具有以下任何类型：
    • Color
    • Integer
    • Float
    • String
    • Dimension
    • Boolean

来看效果图就懂了:
请添加图片描述

设置抖动[KeyCycle]

如何创建:
请添加图片描述
关键代码:

<Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
        <!--点击-->
        <OnClick ... />

        <KeyFrameSet>
            <!--
             motion:waveOffset 添加到属性的偏移值
             motion:wavePeriod 要在此区域附近循环的循环数
             motion:waveShape="cos"
                     sin|square|triangle|sawtooth|reverseSawtooth|cos|bounce
                     正弦| 方形  |三角形  | 锯齿    |    反向锯齿    |cos| 反弹
             -->
              <KeyCycle
                android:alpha="0.5"
                android:scaleY="1.2"
                android:scaleX="1.2"
                motion:framePosition="51"
                motion:motionTarget="@+id/imageView8"
                motion:waveOffset="2"
                motion:wavePeriod="1"
                motion:waveShape="sin" />
        </KeyFrameSet>
    </Transition>

参数介绍:

  • motion:waveOffset 添加到属性的偏移值
  • motion:wavePeriod 要在此区域附近循环的循环数
  • motion:waveShape=“cos”
    • sin|square|triangle|sawtooth|reverseSawtooth|cos|bounce

各大类型效果图:

sinsquaretrianglesawtoothreverseSawtoothcosbounce
正弦方形三角形锯齿反向锯齿cos反弹

设置抖动(KeyTimeCycle)

KeyTimeCycle和KeyCycle使用起来是一样的,参数也是一样的.

有一点不同的是,一般KeyTimeCycle 是三个一起使用,通过 3 个 KeyTimeCycle 定义一个准确的循环关键帧
请添加图片描述
可以看出,只有在第50帧的时候,会发生改变,因为第50帧的时候设置motion:wavePeriod 为1

  • motion:wavePeriod:要在此区域附近循环的循环数

改变控件属性(KeyTrigger)

什么叫改控件属性? 如何控制?

先来看效果:

首先自定义ImageView,里面就2个方法,show和hide

class KeyTriggerImageView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) :
    AppCompatImageView(context, attrs, defStyleAttr) {

    // 显示 view
    fun show() {
        visibility = View.VISIBLE
    }
    // 隐藏当前 view
    fun hide() {
        visibility = View.GONE
    }
}

如何使用:

<?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="2000">
        <!--点击-->
        <OnClick
            motion:clickAction="toggle"
            motion:targetId="@id/imageView11" />
        <KeyFrameSet>
            <KeyTrigger
                motion:framePosition="0"
                motion:motionTarget="@+id/imageView11"
                motion:onCross="show" />
            <KeyTrigger
                motion:framePosition="20"
                motion:motionTarget="@+id/imageView11"
                motion:onCross="hide" />
            <KeyTrigger
                motion:framePosition="60"
                motion:motionTarget="@+id/imageView11"
                motion:onCross="show" />
            <KeyTrigger
                motion:framePosition="79"
                motion:motionTarget="@+id/imageView11"
                motion:onCross="hide" />
            <KeyTrigger
                motion:framePosition="100"
                motion:motionTarget="@+id/imageView11"
                motion:onCross="show" />
        </KeyFrameSet>
    </Transition>

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

KeyTrigger参数介绍:

  • motion:onCross 调用的方法名字
  • motion:framePosition 当前是第几帧 (0-100)
  • motion:motionTarget 设置的控件id
    来看一眼效果:

根据这个思路,是不是就可以在滑动的过程中替换图标显示,例如这样:


再来一张辅助图,现在应该是非常清晰了!!
在这里插入图片描述

加速与减速(Easing)

也是一个参数的效果:使用很简单,直接看代码:

<?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">
        <!--点击-->
        <OnClick
            motion:clickAction="toggle"
            motion:targetId="@id/imageView13" />
        <KeyFrameSet>

        </KeyFrameSet>
    </Transition>
    <!--   开始 -->
    <ConstraintSet android:id="@+id/start">
  		<!--   
			motion:transitionEasing 设置加速度 or 减速 类型	
		-->
        <Constraint
            android:id="@+id/imageView13"
            android:layout_width="100dp"
            android:layout_height="100dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:transitionEasing="acclerate" />
    </ConstraintSet>
    <!--    结束-->
    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/imageView13"
            android:layout_width="100dp"
            android:layout_height="100dp"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>
</MotionScene>

motion:transitionEasing类型介绍:

类型辅助图效果
standard
acclerate
decelerate

常见的就这几种,其他的还有很多,就不一一演示了.

效果变化很细微,自己手动搞一遍就明白啦!!

实战

先来看看实战效果:


布局长这样:
在这里插入图片描述
需求分析:

  • 类似皮皮虾点击评论功能
  • 点击评论按钮时候,图片缩小,底下弹出一个recyclerview来显示评论
  • recyclerview显示的时候,评论按钮不显示
  • recyclerview不显示的时候,评论按钮显示

activity_motion_layout_9_scene.xml:

<?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="400">

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

        <OnSwipe
            motion:dragDirection="dragUp"
            motion:touchAnchorId="@id/recyclerView" />
    </Transition>

    <!-- 开始 -->
    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />

        <Constraint
            android:id="@+id/imageComment"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginRight="@dimen/dp_10"
            android:alpha="1"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.7" />
        <Constraint
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            motion:layout_constraintTop_toBottomOf="@id/image" />
    </ConstraintSet>

    <!-- 结束 -->
    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            motion:layout_constraintBottom_toTopOf="@id/recyclerView"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
        <Constraint
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="500dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintTop_toBottomOf="@id/image" />

        <Constraint
            android:id="@+id/imageComment"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginRight="@dimen/dp_10"
            android:alpha="0"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.7" />
    </ConstraintSet>
</MotionScene>

走到这里基本上就完事了

总结

大致结构

<Transition
    app:constraintSetStart="@+id/start"
    app:constraintSetEnd="@+id/end"
    app:duration="1000">
	<!-- 拖动 -->
    <OnSwipe />

	<!-- 点击 -->
    <OnClick />
    <KeyFrameSet >
    
	        <KeyAttribute>
	            	<CustomAttribute/>
	        </KeyAttribute>
	        
	        <KeyPostion/>
	        
	        <KeyCycle/>
	        
	        <KeyTimeCycle/>
    </KeyFrameSet>
    
	    <!--用于过渡动画的起始点状态参数配置-->
	   <Constraint android:id="@id/viewId">
			    <!-- 运动模型: 弧线路路径，时间模型等 -->
			    <Motion/>
			    <!--
			    布局相关
			    注意: width 、 height 和 margin 的命名空间是 android: (beta1 开始)
			         而约束相关的命名空间是 app (或 motion )
			    -->
			    <Layout/>
			    <!-- 动画变换:做旋转，位移，缩放，海海拔等属性 -->
			    <Transform/>
			    <!--
			    自定义属性
			        attributeName 会加上 set/get 反射找到真正的函数名，
			        ⽐如 backgroundColor 就会调用 setBackgroundColor() 函数
			        custom(xxx)Value 对应属性的数据类型
			    -->
			    <CustomAttribute/>
			    <!--
			    特定的属性
			        visibility 、alpha 等属性
			    -->
			    <PropertySet/>
	</Constraint>
    
    <!--用于过渡动画的结束点状态参数配置-->
    <ConstraintSet android:id="@+id/end"../>
</Transition>

完整代码

其他:

原创不易,您的点赞就是对我最大的支持!

s10g
关注
专栏目录
android-ui入门之MotionLayout
蛐蛐的博客
10-03 214
文档：https://developer.android.com/training/constraint-layout/motionlayout 1.简介 MotionLayout 是一种布局类型，可帮助管理应用中的运动和微件动画。 MotionLayout 是 ConstraintLayout 的子类，在其丰富的布局功能基础之上构建而成。 作为 ConstraintLayout 库的一部分，MotionLayout 可用作支持库，并可向后兼容 API 级别 14。 MotionLay
【Android】0、Android 开发从入门到实战超详细路线图
呆呆的猫的博客
09-03 1589
然后是进阶阶段，在入门阶段了解了 Android 基础知识后，再看《Android 权威编程指南》可以更细致的讲解各知识点，也会以实战方式巩固。可以阅读较新的书，如《Android Jetpack 应用指南》，学习较新版本的 Android 的最佳实践。然后入门阶段，推荐看《Android 第一行代码》书，跟着书可以较系统的掌握知识点，也可以上手实战。接下来就是实战，可以从一个小的需求出发，例如做一个直播 App，攻克各技术难点。
Android-MotionLayout动画：续写ConstraintLayout新篇章，android启动流程
m0_64383184的博客
12-08 459
本文属于入门级别，重点在于扫盲和入门。如果对你有用，欢迎点赞。个人能力有限，有些东西可能理解不透或不对，欢迎指正，非常感谢。 配置 需要将ConstraintLayout的版本升级到2.0+。 AndroidX: implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta8’ 支持库： implementation ‘com.android.support.constraint:constraint-layout:2.0.0-b
Android MotionLayout详解
yingaizhu的博客
07-22 2641
文章目录一、前言二、使用入门2.1 引入依赖2.2 创建 MotionLayout 布局文件2.3 创建 MotionScene 一、前言     MotionLayout 其实是一种布局类型，可帮助您管理动画。MotionLayout 是 ConstraintLayout的子类（关于 ConstraintLayout 的介绍可以参考: Android ConstraintLayout从入门到精通），因此， MotionLayout 拥有者 ConstraintLay
【Android】MotionLayout实现动画效果
2301_79344902的博客
08-30 1214
突破传统动画：探索MotionLayout的独特优势-腾讯云开发者社区-腾讯云 (tencent.com)Android | MotionLayout入门级使用教程（一）_motionlayout的使用-CSDN博客希望这篇文章可以给大家的UI开发做一些思路上的扩展~
Android MotionLayout：以最简单的方式创建类似Twitter的“福师大APP
m0_67598977的博客
04-28 289
MotionLayout是Android ConstraintLayout的子类，可让您非常轻松地为应用程序中的任何视图或布局设置动画。 虽然仍处于测试阶段，但尚未得到广泛采用，但是我已经可以想象到，稳定发行后人们会想到的独特的交互式动画！ [](()什么是MotionLayout？快速介绍 简而言之，MotionLayout是一个ConstraintLayout允许您轻松在两个ConstraintSet之间进行转换的工具。 ConstraintSet包含每个视图的所有约束和布局属性。 Tra..
Android MotionLayout：以最简单的方式创建类似Twitter的“福师大APP”的启动动画
fjnu_se的博客
06-11 1812
简介✍️ Twitter作为国外流行的交流软件，它的启动画面非常经典。现在，使用Android Jetpack库中的新布局MotionLayout可以比以往更轻松地实现出类似的初始动画。这就是我将在本文中创建的内容：基于Motionlayout实现类似Twitter的福师大图标的启动动画。此外，我还将介绍有关MotionLayout的一些基础知识。 我将在这篇文章中实现如下的动画： 背景✍️ MotionLayout是Android ConstraintLayout的子类，可让您非常轻松地为应用程序中.
ANDROID物联网开发从入门到实战.part1
06-05
ANDROID物联网开发从入门到实战.part1 由于上传限制,此书籍采用分卷压缩，需要与 ANDROID物联网开发从入门到实战.part2一起才能正常解压使用
Jetpack Compose 入门到精通.pdf
07-07
Jetpack Compose 入门到精通 本文将对 Jetpack Compose 进行深入的讲解，帮助读者从基础开始了解 Jetpack Compose，并 Familiarize 自己的使用。 1. why Jetpack Compose？ Android 中的 UI 工具包历史可以追溯...
Android开发从入门到精通.扶松柏
02-25
Android开发，从入门到精通。 第1章，走进android世界； 第2章，界面布局实战演练； 第3章，基本控件实战演练； ...
Android-MotionLayout动画
薛之涛
11-03 426
参考资料 https://mp.weixin.qq.com/s/8DhoUK9YlbRGwr6ALp2CBw 话不多说,上图为敬: motionlayout.gif 效果图分析 头部用户信息区域的渐隐渐显 头部用户信息区域的位置变化 控件大小的变化(比如关注按钮) 文字大小及颜色的变化(比如用户名称) 添加依赖 MotionLayout要求ConstraintLayout的版本在2.0....
Android代码-MotionLayoutCarousel
08-06
Android MotionLayout Carousel Simple Carousel built with MotionLayout Demo 1 Demo 2 Buy me a coffee ☕
Android MotionLayout 五角星
FlyPig_Vip的博客
08-19 232
有偏差 <?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...
Android上的MotionLayout简介
weixin_26739079的博客
09-08 473
In this article, we are going to go through some basic information about MotionLayout, a subclass of ConstraintLayout. It’s used by Android developers to create motion and widget animations in their a...
Android 使用MotionLayout实现动画效果
朱豪凯的博客
07-29 3703
MotionScene 运动场景文件的根元素。 <MotionScene>包括一个或多个<Transition>元素，每个元素用于定义运动序列的开始和结束状态，以及这两种状态的转换。 必须包含的元素 Transition 指定需要执行的运动序列。 如果<MotionScene>包含多个<Transition>元素，MotionLayout会根据用户的互动选择最合适的元素。例如，<MotionScene>可能有四个<Transition>
Github Android MotionLayout 一个图片从方到圆
FlyPig_Vip的博客
02-28 419
implementation "androidx.constraintlayout:constraintlayout:2.0.0-beta4" implementation 'com.github.zhangqifan1:The_Corner_ImageView:1.0' <?xml version="1.0" encoding="utf-8"?> <and...
Android新控件MotionLayout介绍（三）
成长的烧年
05-17 1999
文章目录实例MotionLayout与CoordinatorLayoutMotionLayout 与DrawerLayoutMotionLayout 与ViewPagerMotionLayout与Lottie结论 上两章内容： Android新控件MotionLayout介绍（一） Android新控件MotionLayout介绍（二） 这一节主要讲述将MotionLayout与已经存在的Layo...
Android中使用MotionLayout实现动画
qq_42866851的博客
08-24 350
Android中使用MotionLayout实现动画每天学一点2021.8.24（Android-4）实现步骤1. 创建布局文件2. 创建动画配置文件 每天学一点2021.8.24（Android-4） 今天所要分享的是Android中实现类似gif动画，通过xml配置实现一些动画效果。显示效果如下所示： 实现步骤 1. 创建布局文件 <?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?&
Andorid-Motionlayout 简单理解和学会使用
最新发布
wakuwaku0821的博客
09-03 335
将constraintlayout版本升级 更换为如上依赖。（只要是2.0以上就可以使用android Motionlayout 简单使用首先： 我们创建一个constrainlayout右键 转化为Motionlayout任意拖入两个控件在转为Motionlayout的时候 会自动生成如下的文件 MotionLayout 的动画和过渡效果可以通过 MotionScene 文件来定义和控制。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

s10g

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值