【Android】MotionLayout实现动画

MotionLayout不断地更新,文章并不适用全部最近的更新内容。

文章目录

    • 引入
  • ConstraintSet
      • TransitionManager和MotionLayout有什么区别?
  • 使用
      • ConstrainSet(属性类似于ConstrainLayout)
    • Transition
      • 属性
      • OnClick
      • OnSwipe
      • KeyFrameSet
        • KeyPosition
        • KeyAttribute
      • CustomAttribute
        • 属性

引入

MotionLayout是Android支持库中的一个布局容器,它可以帮助实现复杂的界面动画和过渡效果。MotionLayout结合了ConstraintLayout和MotionScene的功能,可以通过定义关键帧和过渡效果来创建各种复杂的动画效果。

ConstraintSet

  1. 创建和应用约束关系:

    • ConstraintSet constraintSet = new ConstraintSet(): 创建一个新的ConstraintSet对象。
    • constraintSet.clone(ConstraintLayout layout): 从一个ConstraintLayout中克隆约束关系到ConstraintSet对象中。
    • constraintSet.applyTo(ConstraintLayout layout): 将ConstraintSet对象中的约束关系应用到指定的ConstraintLayout中。
  2. 添加和修改约束关系:

    • constraintSet.connect(int startID, int startSide, int endID, int endSide, int margin): 添加两个视图之间的连接关系,并指定连接的边和边距。
    • constraintSet.setHorizontalBias(int viewId, float bias): 设置视图在水平方向上的偏移位置。
    • constraintSet.setVerticalBias(int viewId, float bias): 设置视图在垂直方向上的偏移位置。
    • constraintSet.constrainHeight(int viewId, int height): 设置视图的高度。
    • constraintSet.constrainWidth(int viewId, int width): 设置视图的宽度。
    • constraintSet.setVisibility(int viewId, int visibility): 设置视图的可见性。
  3. 移除约束关系:

    • constraintSet.clear(int viewId): 移除指定视图的所有约束关系。
    • constraintSet.clear(int viewId, int anchor): 移除指定视图与指定锚点视图之间的约束关系。

我们可以使用 ConstraintSet 和 TransitionManager 来实现一个平移动画。

TransitionManager和MotionLayout有什么区别?

ransitionManager和MotionLayout是Android中用于实现动画效果的两个不同的类。

TransitionManager是Android提供的一个类,用于管理场景之间的转换和动画效果。它可以在不同的ViewGroup之间实现平滑的过渡动画,例如在切换布局、添加或移除View时的过渡效果。TransitionManager通过场景(Scene)的概念来管理动画,可以定义多个不同的场景,并在场景之间进行转换。

MotionLayout是一个继承自ConstraintLayout的布局容器,它可以用来实现复杂的动画和过渡效果。MotionLayout基于ConstraintSet和Transition的概念,通过定义起始和结束状态的约束集合(ConstraintSet),再结合过渡效果(Transition)来实现布局的动画过渡。与TransitionManager相比,MotionLayout提供了更强大和灵活的动画控制能力,可以实现更复杂的动画效果,例如更精细的属性动画、路径动画、关键帧动画等。

当需要简单的场景过渡效果,例如在切换布局或添加/移除View时的平滑过渡,可以使用TransitionManager。而当需要实现更复杂、精细的动画效果时,例如属性动画、路径动画等,可以选择使用MotionLayout。 MotionLayout相对于TransitionManager来说功能更加强大,但也更复杂一些,需要更多的配置和设置。因此,根据具体需求和复杂度来选择使用哪个类。

使用

在MotionLayout布局下每个控件都需要设置一个id

在xml根布局改成MotionLayout后,爆红,可利用编译器自动生成xml文件用来对应layoutDescription属性。该文件用来定义这个动画的动画过程和约束条件。

layoutDescription="@xml/fragment_motion_01_basic_scene"

打开该生成文件:

image-20231107002332889

可以看到本质是MotionScene+ Transition,用于描述动画的动效。

  • ConstrainSet描述了开始或结束时页面控件的状态
  • Transtion指定了动画要使用的ConstrainSet,动画的触发方式等。

编译器已经自动生成了Start和End的ConstrainSet,那我们主要工作就是操作MotionScene+ Transition

ConstrainSet(属性类似于ConstrainLayout)

ConstraintSet是Android中的一个工具类,它用于在代码中动态设置和管理ConstraintLayout的约束关系。ConstraintLayout是一个强大的布局容器,可以实现复杂的界面布局,而ConstraintSet可以帮助我们在运行时修改和更新这些布局。

使用ConstraintSet,我们可以在不重新加载布局文件的情况下,通过代码来添加、修改或移除视图的约束关系,实现动态的布局效果。下面是一些ConstraintSet的常用方法和功能:

ConstrainSet下的标签类似于Constrainlayout的属性,我们可以直接内嵌Constrain,直接描述出Start和end的状态,再通过Transition进行动画效果的配置。

<?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/button"
            android:background="@color/orange"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"  />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint  android:id="@+id/button"
            android:background="@color/orange"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginEnd="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <Transition
         ...
    </Transition>
</MotionScene>

Transition

属性

  1. app:constraintSetStart:指定过渡的起始状态的ConstraintSet。可以使用@id引用已定义的ConstraintSet。
  2. app:constraintSetEnd:指定过渡的结束状态的ConstraintSet。同样也可以使用@id引用已定义的ConstraintSet。
  3. app:duration:指定动画过渡的持续时间,单位为毫秒。
  4. app:staggered:在多个View之间应用过渡效果时,指定是否应该依次进行过渡。可以设置为truefalse
  5. app:autoTransition:指定是否在布局文件加载时自动开始过渡动画。可以设置为startToEndendToStartautoTransition
  6. app:cycleDuration:指定循环过渡的总时间。当使用循环过渡时,可以设置循环的总时间。
  7. app:transitionOnBackward:指定当用户反向滑动时是否触发过渡动画。可以设置为normaljumpToEndjumpToStart
  8. app:transitionDisable:指定是否禁用过渡动画。可以设置为truefalse
  9. app:motionInterpolator:指定过渡动画的插值器。可以设置为linearacceleratedeceleratefast_out_linear_infast_out_slow_in等。
  10. app:pathMotionArc:指定过渡动画中路径的弧度。可以设置为nonestartVerticalendVerticalstartHorizontalendHorizontal等。
  11. app:touchAnchorId:指定触摸点的锚点View的ID。在触摸事件中,可以定义触摸点锚定的位置。

定义的可处理事件有以下三种,用来规定用户交互逻辑详细法则。

image-20231107005524702

OnClick

在Transition中,可以定义OnClick标签用于处理用户点击事件,

        <OnClick
            motion:clickAction="toggle"
            motion:targetId="@+id/button" />
        <!--OnClick 用于处理用户点击事件 -->
        <!--targetId 设置触发点击事件的组件 -->
        <!--clickAction 设置点击操作的响应行为,这里是使动画过渡到结束状态 -->
  1. app:clickAction="toggle":点击时切换到指定的ConstraintSet。

    例如,app:clickAction="@id/secondConstraintSet"表示点击时切换到ID为secondConstraintSet的ConstraintSet。

  2. app:clickAction="jumpToEnd":点击时立即跳转到Transition的结束状态。

  3. app:clickAction="jumpToStart":点击时立即跳转到Transition的开始状态。

  4. app:clickAction="none":点击时不执行任何操作,保持当前状态不变。

  5. app:clickAction="transitionToEnd":点击时执行Transition到结束状态的动画。

  6. app:clickAction="transitionToStart":点击时执行Transition到开始状态的动画。

  7. app:clickAction="transitionWithCrossfade":点击时执行Transition到指定ConstraintSet的动画,并添加淡入淡出效果。

OnSwipe

OnSwipe一般用于处理拖拽事件,其中有一个弹簧的理念。

  • dragThreshold:定义拖拽的最小阈值,当拖拽距离小于该值时,视图不会响应拖拽事件。这个属性可以用于控制视图响应拖拽事件的灵敏度。
  • autoCompleteMode:定义自动完成的模式,可以有以下两种取值:
    • continuousVelocity:使用连续的速度自动完成。
    • spring:使用弹簧效果自动完成。
  • maxVelocity:定义最大速度,当拖拽速度超过该值时,视图将不再响应拖拽事件。
  • maxAcceleration:定义最大加速度,当拖拽加速度超过该值时,视图将不再响应拖拽事件。
  • springMass:定义弹簧质量。
  • springStiffness:定义弹簧刚度。
  • springDamping:定义弹簧阻尼。
  • springStopThreshold:定义弹簧停止的阈值,当速度小于该值时,弹簧将停止弹动。
  • springBoundary:定义弹簧边界,可以有以下几种取值:
    • overshoot:超出边界时弹簧会继续弹动。
    • bounceStart:当拖拽到开始位置时弹簧会弹动。
    • bounceEnd:当拖拽到结束位置时弹簧会弹动。
    • bounceBoth:当拖拽到开始或结束位置时弹簧会弹动。
  • dragDirection:定义拖拽方向,可以有以下几种取值:
    • horizontal:只能水平拖拽。
    • vertical:只能垂直拖拽。
    • both:可以水平和垂直拖拽。
  • touchAnchorId:定义触摸点的锚定视图 ID。
  • touchAnchorSide:定义触摸点在锚定视图中的位置,可以有以下几种取值:
    • top:触摸点位于锚定视图的顶部。
    • bottom:触摸点位于锚定视图的底部。
    • left:触摸点位于锚定视图的左侧。
    • right:触摸点位于锚定视图的右侧。
    • center:触摸点位于锚定视图的中心。
  • rotationCenterId:定义旋转中心的视图 ID。
  • touchRegionId:定义触摸区域的视图 ID。
  • limitBoundsTo:定义限制边界的视图 ID。
  • nestedScrollFlags:定义嵌套滚动的标志位,可以有以下几种取值:
    • none:不支持嵌套滚动。
    • disablePostScroll:禁止滚动结束后的滚动。
    • disableScroll:禁止滚动。
    • supportScrollUp:支持向上滚动。
  • moveWhenScrollAtTop:定义是否在滚动到顶部时允许拖拽。
  • onTouchUp:定义当手指离开屏幕时的行为,可以有以下几种取值:
    • autoComplete:自动完成拖拽。
    • autoCompleteToStart:自动完成拖拽并回到开始位置。
    • autoCompleteToEnd:自动完成拖拽并回到结束位置。
    • stop:停止拖拽。
    • decelerate:减速拖拽。
    • decelerateAndComplete:减速拖拽并完成拖拽。
    • neverCompleteToStart:永远不要自动完成到开始位置。
    • neverCompleteToEnd:永远不要自动完成到结束位置。

KeyFrameSet

KeyFrameSet(关键帧集合)是在动画中定义和控制关键帧的一种方式。通过使用KeyFrameSet,可以定义动画的起始和结束状态控制动画的过程和插值方式实现多阶段动画
在这里插入图片描述

需要定义一个 KeyPosition 对象和一个 KeyAttribute 对象。

KeyPosition 对象定义了中间状态的位置,KeyAttribute 对象定义了中间状态的属性值。您可以将多个 KeyPositionKeyAttribute 对象组合成一个 Keyframes 对象,并将其应用于约束布局中的任何属性

KeyPosition
<KeyPosition
    time="1000"               // 时间点,单位为毫秒
    position="0, 0, 0"        // 位置坐标,可以是二维或三维坐标
    interpolation="linear"    // 插值方式,例如线性插值
    easing="ease-in-out"      // 缓动效果,例如渐入渐出
/>
  • keyPositionType:定义如何计算关键帧的偏差。可以设置为 deltaRelativepathRelativeparentRelative 三种取值之一。使用 deltaRelative 时,关键帧的偏差相对于线性路径计算;使用 pathRelative 时,关键帧的偏差相对于路径计算;使用 parentRelative 时,关键帧的偏差相对于父视图计算。
  • percentXpercentY:定义关键帧在 X 和 Y 轴上的位置。可以设置为 0 到 1 之间的浮点数,表示从开始状态到结束状态之间的相对位置。
  • percentWidthpercentHeight:定义宽度和高度的变化量。可以设置为 0 到 1 之间的浮点数,表示从开始状态到结束状态之间的相对变化量。注意,如果宽度或高度没有变化,则这些属性将没有任何效果。
  • framePosition:定义关键帧在动画中的位置。可以设置为 0 到 100 之间的整数,表示从动画开始到结束之间的相对位置。
  • motionTarget:定义应用此关键帧的运动目标。可以是一个视图或者一个运动场景。
  • transitionEasing:定义关键帧的过渡缓动效果。可以使用 Android 系统中提供的各种缓动函数,比如 easeIn, easeOut 等。
  • pathMotionArc:定义关键帧在路径上的运动方式。可以设置为 nonestartVerticalendVerticalfliprotate 等五种取值之一。
  • curveFit:定义关键帧的插值方式。可以设置为 linearsplinediscrete 等三种取值之一。
  • drawPath:定义是否在编辑器中绘制关键帧路径。
  • sizePercent:定义宽度和高度的百分比。可以设置为 0 到 1 之间的浮点数,表示相对于视图父级的百分比。
KeyAttribute

framePosition:定义关键帧在动画中的位置。可以设置为 0 到 100 之间的整数,表示从动画开始到结束之间的相对位置。

motionTarget:定义应用此关键帧的运动目标。可以是一个视图或者一个运动场景。

transitionEasing:定义关键帧的过渡缓动效果。可以使用 Android 系统中提供的各种缓动函数,比如 easeIn, easeOut 等。

curveFit:定义关键帧的插值方式。可以设置为 linearsplinediscrete 等三种取值之一。

motionProgress:定义关键帧的运动进度,即从开始状态到结束状态之间的进度百分比。

alpha:定义视图的不透明度。可以设置为 0 到 1 之间的浮点数,表示视图的透明度。

elevation:定义视图的高度。可以设置为一个浮点数,表示视图的高度。

rotationrotationXrotationY:定义视图的旋转角度,可以分别设置 X、Y、Z 轴上的旋转角度。

transformPivotXtransformPivotY:定义视图的变换中心点坐标。

transformPivotTarget:定义变换中心点的目标视图。

transitionPathRotate:定义视图在路径上的旋转角度。

scaleXscaleY:定义视图的缩放比例。

translationXtranslationYtranslationZ:定义视图的位置偏移量。

CustomAttribute

CustomAttribute是一种用于自定义属性的元素。它允许你在布局文件中定义和使用自定义属性,以便在MotionScene中使用这些属性来控制动画效果。你可以在MotionLayout中设置一个起始状态和一个结束状态,然后使用CustomAttribute来设置自定义属性在这两个状态之间的过渡效果。

<CustomAttribute
    app:attributeName="customProperty"  // 自定义属性的名称
    app:customDimension="100dp"         // 自定义属性的值
    />
属性
  1. app:attributeName: 定义自定义属性的名称。
  2. app:customColorValue: 设置自定义属性的颜色值,例如#FF0000表示红色。
  3. app:customDimension: 设置自定义属性的尺寸值,例如100dp表示100个设备独立像素。
  4. app:customFloatValue: 设置自定义属性的浮点数值。
  5. app:customIntValue: 设置自定义属性的整数值。
  6. app:customStringValue: 设置自定义属性的字符串值。

自定义属性的名称必须与View具有相应的setter方法名称相匹配,才能在MotionLayout中使用。例如,如果您想要定义一个名为"customText"的CustomAttribute来控制TextView的文本内容,那么TextView中需要有一个名为为"setCustomText"的方法,以便MotionLayout能够找到相应的setter方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/206938.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

会泽一村民上山放羊吸烟引发森林火灾,AI科技急需关注

2023年4月&#xff0c;会泽县古城街道厂沟村委会望香台山林中发生了一场由疏忽引发的森林火灾。张某某在放羊时未完全熄灭烟头&#xff0c;导致7.33公顷的林地和草地被焚毁&#xff0c;直接经济损失高达29.097万元。这一事件再次凸显了日常生活中的安全隐患。 在这一背景下&…

双通道 H 桥 5V 4A驱动芯片

SS6951A 为电机一体化应用提供一种双通道集成电机驱动方案。SS6951A 有两路 H 桥驱动&#xff0c;每个 H 桥可提供最大峰值电流 4.0A&#xff0c;可驱动两个刷式直流电机&#xff0c;或者一个双极步进电机&#xff0c;或者螺线管或者其它感性负载。双极步进电机可以以整步、2 细…

文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《基于分布鲁棒优化的广义共享储能容量配置方法》

这个标题涉及到储能系统的容量配置方法&#xff0c;具体而言&#xff0c;是一种基于分布鲁棒优化的广义共享储能容量配置方法。让我们逐步解读&#xff1a; 基于分布鲁棒优化&#xff1a; 这表明该方法采用了一种优化技术&#xff0c;即分布鲁棒优化。分布鲁棒优化通常是指在考…

git基本命令

git init 初始化代仓库&#xff0c;本地没有git需要git init执行一下才能上传 创建文件 touch gitOrder.txt git status 查看修改或者添加文件的状态 &#xff0c;红色表示添加到分支 git add git add 文件&#xff1a;添加单个文件 git add . 添加所有修改或者添加的所有…

Maven Helper插件——实现一键Maven依赖冲突问题

总结/朱季谦 业余在一个SpringBoot项目集成Swagger2时&#xff0c;启动过程一直出现以下报错信息—— An attempt was made to call a method that does not exist. The attempt was made from the following location: ​ springfox.documentation.schema.DefaultModelDepe…

【Linux】快速上手自动化构建工具make/makefile

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.什么是make / makefile 2…

Python实现FA萤火虫优化算法优化循环神经网络回归模型(LSTM回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 萤火虫算法&#xff08;Fire-fly algorithm&#xff0c;FA&#xff09;由剑桥大学Yang于2009年提出 , …

Ubuntu镜像与K8S冲突,容器持续Terminating

问题 记录一次软件冲突BUG&#xff1a; eclipse-temurin:11-jdk&#xff08;底层Ubuntu 20.04.3 LTS&#xff09;镜像创建的容器在K8S-1.25.5上无法正常terminating&#xff0c;造成资源浪费&#xff0c;甚至引发K8S资源CPU insufficient报错。具体表现 某些容器镜像在K8S上无…

云轴科技ZStack信创云平台助力国泰君安期货实现信创改造

信创是数字中国建设的重要组成部分&#xff0c;也是数字经济发展的关键推动力量。作为云基础软件企业&#xff0c;云轴科技ZStack 产品矩阵全面覆盖数据中心云基础设施&#xff0c;ZStack信创云首批通过可信云《一云多芯IaaS平台能力要求》先进级&#xff0c;是其中唯一兼容四种…

分布式系统中最基础的 CAP 理论及其应用

对于开发或设计分布式系统的架构师、工程师来说&#xff0c;CAP 是必须要掌握的基础理论&#xff0c;CAP 理论可以帮助架构师对系统设计中目标进行取舍&#xff0c;合理地规划系统拆分的维度。下面我们先讲讲分布式系统的特点。 分布式系统的特点 随着移动互联网的快速发展&a…

【数据库】数据库并发控制的冲突检测,冲突可串行化的调度,保障事务的特性

冲突可串行化 ​专栏内容&#xff1a; 手写数据库toadb 本专栏主要介绍如何从零开发&#xff0c;开发的步骤&#xff0c;以及开发过程中的涉及的原理&#xff0c;遇到的问题等&#xff0c;让大家能跟上并且可以一起开发&#xff0c;让每个需要的人成为参与者。 本专栏会定期更新…

centos服务器安装docker和Rabbitmq

centos服务器 一 centos安装docker1 安装docker所需要的依赖包2配置yum源3查看仓库中所有的docker版本4安装docker5 设置docker为开机自启6验证docker是否安装成功 二 使用docker安装RabbitMQ拉取RabbitMQ镜像创建并运行容器 一 centos安装docker 1 安装docker所需要的依赖包 …

git解决冲突

记录一次 git 解决冲突的过程。 情况是前一段时间我基于本地的 master 分支上新建了一个分支比如叫做 weight_linear: git checkout -b weight_linear 然后我已经在这个分支上进行了修改并上传到 github 上了&#xff0c;比如&#xff1a; git add . git commit -m "u…

联软 IT 安全运维管理软件反序列化漏洞复现

0x01 产品简介 联软科技持续十多年研发的联软IT安全运维管理软件&#xff0c;集网络准入控制、终端安全管理、BYOD设备管理、杀毒管理、服务器安全管理、数据防泄密、反APT攻击等系统于一体&#xff0c;通过一个平台&#xff0c;统一框架&#xff0c;数据集中&#xff0c;实现更…

数据中心机房精密配电——解决方案

新一代数据中心对供电系统的可靠性及可管理性要求越来越高。IT用户需要对信息设备的供电系统进行更可靠与更灵活的配电、更精细化的管理、更准确的成本消耗等。 一、前言 随着各行业信息化的建设&#xff0c;数据中心机房机柜电功率的预设定问题&#xff0c;并且介绍了如何通…

three.js结合vue

作者&#xff1a;baekpcyyy&#x1f41f; 1.搭建环境 ps&#xff1a;这里要按照node.js在之前有关vue搭建中有介绍 新建文件夹并在vsc终端中打开 1.输入vite创建指令 npm init vitelatest然后我们cd进入刚才创建的目录下 npm install安装所需依赖 npm run dev启动该项目 …

目标检测简介

文章目录 前言一、目标检测的概述1.1 目标检测概念1.2 主流解决方式1.3 应用领域 二、目标检测的发展2.1 两阶段目标检测2.2 单阶段目标检测2.3 新时代的检测技术 三、目标检测的指标3.1 基础概念3.2 评价指标3.3 评价指标代码实现3.3.1 精确率3.3.2 召回率3.3.3 准确率3.3.4 F…

[安洵杯 2019]easy_web

打开环境 img传参还有cmd img应该是base&#xff0c;先解码看看 3535352e706e67 这个好像是十六进制的&#xff0c;再解 访问一下看看&#xff0c;得到一张图片 尝试base解码&#xff0c;但是没有什么发现 再看看地址栏出现index.php,应该是要下载源码&#xff0c;但是还没有…

渗透测试学习day4

文章目录 靶机&#xff1a;SequelTask1Task2Task3Task4Task5Task6Task7Task8 靶机&#xff1a;CrocodileTask1Task2Task3Task4Task5Task6Task7Task8Task9Task10 靶机&#xff1a;ResponderTask1Task2Task3Task4Task5Task6Task7Task8Task9Task10Task11 靶机&#xff1a;ThreeTas…

【开源】基于Vue+SpringBoot的高校宿舍调配管理系统

项目编号&#xff1a; S 051 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S051&#xff0c;文末获取源码。} 项目编号&#xff1a;S051&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能需求2.1 学生端2.2 宿管2.3 老师端 三、系统…