MontionLayout:打开动画新世界大门(其一,附小技巧

2024-02-29 05:20

本文主要是介绍MontionLayout:打开动画新世界大门(其一,附小技巧,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

MotionLayout 基础


首先,我们需要从 MotionLayout 的一些基本属性和用法讲起,这样对于我们后面的实际操作将会很有帮助。

引入 MotionLayout 库

1dependencies {

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

3}

4复制代码

目前,MotionLayout 仍处于 beta 版本,虽然官方之前说过 MotionLayout 的动画辅助工具将会在 beta``ConstraintLayout

在布局文件中使用 MotionLayout

想要使用 MotionLayout,只需要在布局文件中作如下声明即可:

1<android.support.constraint.motion.MotionLayout

2        xmlns:android=“http://schemas.android.com/apk/res/android”

3        xmlns:tools=“http://schemas.android.com/tools”

4        xmlns:app=“http://schemas.android.com/apk/res-auto”

5        android:layout_width=“match_parent”

6        android:layout_height=“match_parent”

7        app:layoutDescription="@xml/scene1">

8

9</android.support.constraint.motion.MotionLayout>

10复制代码

由于 MotionLayout 作为 ConstraintLayout 的子类,那么就自然而然地可以像 ConstraintLayout``Motio![](https://www.hualigs.cn/image/61dba891ed8ee.jpg) nLayout 的用处可远不止这些。我们先来看看 MotionLayout 的构成:

640?wx_fmt=png

由上图可知,MotionLayout 可分为 <View> 和 <Helper> 两个部分。 <View> 部分可简单理解为一个ConstraintLayout,至于 <Helper> 其实就是我们的“动画层”了。MotionLayout 为我们提供了layoutDescription 属性,我们需要为它传入一个 MotionScene 包裹的 XML

MotionScene:传说中的“百宝袋”


什么是 MotionScene?结合上图 MotionScene 主要由三部分组成: StateSet 、ConstraintSet 和 Transition 。为了让大家快速理解和使用 MotionScene,本文将重点讲解ConstarintSet 和 Transition,至于 StateSet

首先,我们从实现下面这个简单的效果讲起:

640?wx_fmt=gif

GIF 画质有点渣,见谅,但从上图我们可以发现这是一个简单的平移动画,通过点击自身(篮球)来触发,让我们来通过 MotionLayout

1<?xml version=“1.0” encoding=“utf-8”?>

2<android.support.constraint.motion.MotionLayout

3        xmlns:android=“http://schemas.android.com/apk/res/android”

4        xmlns:tools=“http://schemas.android.com/tools”

5        xmlns:app=“http://schemas.android.com/apk/res-auto”

6        android:layout_width=“match_parent”

7        android:layout_height=“match_parent”

8        app:layoutDescription="@xml/step1"

9        tools:context=".practice.MotionSampleActivity">

10    <ImageView

11        android:id="@+id/ball"

12        android:layout_width=“wrap_content”

13        android:layout_height=“wrap_content”

14        android:src="@drawable/ic_basketball"/>

15</android.support.constraint.motion.MotionLayout>

16复制代码

布局文件很简单,只不过你可能会注意到,我们对 ImageView 并没有添加任何约束,原因在于:我们会在 MotionScene 中声明ConstraintSet,里面将包含该 ImageView 的“运动”起始点和终点的约束信息。当然你也可以在布局文件中对其加以约束,MotionScene 中对于控件约束的优先级会高于布局文件中的设定 。这里我们通过 layoutDescription 来为MotionLayout 设置它的 MotionScene 为 step1,接下来就让我们一睹 MotionScene 的芳容:

1<?xml version=“1.0” encoding=“utf-8”?>

2<!–describe the animation for activity_motion_sample_step1.xml–>

3<MotionScene xmlns:android=“http://schemas.android.com/apk/res/android”

4             xmlns:app=“http://schemas.android.com/apk/res-auto”>

5    <!-- A transition describes an animation via start and end state -->

6    <Transition

7        app:constraintSetStart="@id/start"

8        app:constraintSetEnd="@id/end"

9        app:duration=“2200”>

10        <OnClick

11                app:targetId="@id/ball"

12                app:clickAction=“toggle” />

13    </Transition>

14

15    <!-- Constraints to apply at the start of the animation -->

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

17        <Constraint

18                android:id="@+id/ball"

19                android:layout_width=“48dp”

20                android:layout_height=“48dp”

21                android:layout_marginStart=“12dp”

22                android:layout_marginTop=“12dp”

23                app:layout_constraintStart_toStartOf=“parent”

24                app:layout_constraintTop_toTopOf=“parent”/>

25    </ConstraintSet>

26

27    <!-- Constraints to apply at the end of the animation -->

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

29        <Constraint

30                android:id="@+id/ball"

31                android:layout_width=“48dp”

32                android:layout_height=“48dp”

33                android:layout_marginEnd=“12dp”

34                android:layout_marginBottom=“12dp”

35                app:layout_constraintEnd_toEndOf=“parent”

36                app:layout_constraintBottom_toBottomOf=“parent”/>

37    </ConstraintSet>

38

39</MotionScene>

40复制代码

首先,可以发现我们定义了两个 <ConstraintSet> ,分别描述了这个? ImageView<Transition> 元素了。事实上,我们都知道,动画都是有开始位置和结束位置的,而 MotionLayoutPath

回到上面这个例子,我们只需要为 Transition 设置起始位置和结束位置的 ConstraintSet 并设置动画时间即可,剩下的都交给MotionLayout 自动去帮我们完成。当然你也可以通过 onClick 点击事件来触发动画,绑定目标控件的 id 以及通过clickAction 属性来设置点击事件的类型,这里我们设置的是toggle,即通过反复点击控件来切换动画的状态,其他还有很多属性可以参照官方文档去研究,比较简单,这里就不一一讲解它们的效果了。如此一来,运行一下就能看到上面的效果了。另外,为了方便测试,我们可以给MotionLayout 加上调试属性: app:motionDebug="SHOW_PATH" ,然后就能轻易的查看其动画内部的运动轨迹:

640?wx_fmt=gif

什么?你说这个动画效果太基础?那好,我就来个简陋版的“百花齐放”效果吧,比如下面这样:

640?wx_fmt=gif

首先,让我们分析一下这个效果:仔细看我们可以发现,通过向上滑动蓝色的 Android

1<?xml version=“1.0” encoding=“utf-8”?>

2<android.support.constraint.motion.MotionLayout

3        xmlns:android=“http://schemas.android.com/apk/res/android”

4        xmlns:tools=“http://schemas.android.com/tools”

5        xmlns:app=“http://schemas.android.com/apk/res-auto”

6        android:layout_width=“match_parent”

7        android:layout_height=“match_parent”

8        app:motionDebug=“SHOW_PATH”

9        app:layoutDescription="@xml/step2"

10        tools:context=".practice.MotionSampleActivity">

11    <ImageView

12            android:id="@+id/ic_android_blue"

13            android:layout_width=“42dp”

14            android:layout_height=“42dp”

15            android:src="@mipmap/android_icon_blue"/>

16    <ImageView

17            android:id="@+id/ic_android_left"

18            android:layout_width=“42dp”

19            android:layout_height=“42dp”

20            android:src="@mipmap/android_icon_purple"/>

21    <ImageView

22            android:id="@+id/ic_android_right"

23            android:layout_width=“42dp”

24            android:layout_height=“42dp”

25            android:src="@mipmap/android_icon_orange"/>

26    <TextView

27            android:id="@+id/tipText"

28            android:text=“Swipe the blue android icon up”

29            android:layout_width=“wrap_content”

30            android:layout_height=“wrap_content”

31            app:layout_constraintEnd_toEndOf=“parent”

32            android:layout_marginEnd=“16dp”

33            android:layout_marginTop=“16dp”

34            app:layout_constraintTop_toTopOf=“parent”/>

35</android.support.constraint.motion.MotionLayout>

36复制代码

下面我们来看下 step2 中的 MotionScene:

1<?xml version=“1.0” encoding=“utf-8”?>

2<!–describe the animation for activity_motion_sample_step2.xml–>

3<!–animate by dragging target view–>

4<MotionScene xmlns:android=“http://schemas.android.com/apk/res/android”

5             xmlns:app=“http://schemas.android.com/apk/res-auto”>

6    <!–At the start, all three stars are centered at the bottom of the screen.–>

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

8        <Constraint

9                android:id="@+id/ic_android_blue"

10                android:layout_width=“42dp”

11                android:layout_height=“42dp”

12                android:layout_marginBottom=“20dp”

13                app:layout_constraintStart_toStartOf=“parent”

14                app:layout_constraintEnd_toEndOf=“parent”

15                app:layout_constraintBottom_toBottomOf=“parent”/>

16        <Constraint

17                android:id="@+id/ic_android_left"

18                android:layout_width=“42dp”

19                android:layout_height=“42dp”

20                android:alpha=“0.0”

21                android:layout_marginBottom=“20dp”

22                app:layout_constraintStart_toStartOf=“parent”

23                app:layout_constraintEnd_toEndOf=“parent”

24                app:layout_constraintBottom_toBottomOf=“parent”/>

25        <Constraint

26                android:id="@+id/ic_android_right"

27                android:layout_width=“42dp”

28                android:layout_height=“42dp”

29                android:layout_marginBottom=“20dp”

30                android:alpha=“0.0”

31                app:layout_constraintStart_toStartOf=“parent”

32                app:layout_constraintEnd_toEndOf=“parent”

33                app:layout_constraintBottom_toBottomOf=“parent”/>

34    </ConstraintSet>

35

36    <!–Define the end constraint to set use a chain to position all three stars together below @id/tipText.–>

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

38        <Constraint

39                android:id="@+id/ic_android_left"

40                android:layout_width=“58dp”

41                android:layout_height=“58dp”

42                android:layout_marginEnd=“90dp”

43                android:alpha=“1.0”

44                app:layout_constraintHorizontal_chainStyle=“packed”

45                app:layout_constraintStart_toStartOf=“parent”

46                app:layout_constraintEnd_toStartOf="@id/ic_android_blue"

47                app:layout_constraintTop_toBottomOf="@id/tipText"/>

48        <Constraint

49                android:id="@+id/ic_android_blue"

50                android:layout_width=“58dp”

51                android:layout_height=“58dp”

52                app:layout_constraintEnd_toStartOf="@id/ic_android_right"

53                app:layout_constraintStart_toEndOf="@id/ic_android_left"

54                app:layout_constraintTop_toBottomOf="@id/tipText"/>

55        <Constraint

56                android:id="@+id/ic_android_right"

57                android:layout_width=“58dp”

58                android:layout_height=“58dp”

59                android:layout_marginStart=“90dp”

60                android:alpha=“1.0”

61                app:layout_constraintStart_toEndOf="@id/ic_android_blue"

62                app:layout_constraintEnd_toEndOf=“parent”

63                app:layout_constraintTop_toBottomOf="@id/tipText"/>

64    </ConstraintSet>

65    <!-- A transition describes an animation via start and end state -->

66    <Transition

67            app:constraintSetStart="@id/start"

68            app:constraintSetEnd="@id/end">

69        <!-- MotionLayout will track swipes relative to this view -->

70        <OnSwipe app:touchAnchorId="@id/ic_android_blue"/>

71    </Transition>

72</MotionScene>

73复制代码

上面代码其实很好理解,之前我们定义了一个控件的 Constraint,现在只需要多加两个即可。由于三个 AndroidConstraintLayout 的基础,就不多说了。接着将结束位置的左、右 Android 机器人透明度设置为MotionLayout 会自动处理目标控件 alpha 属性的变化效果,让其看起来依旧丝滑。

另外,我们这里没有再通过 <OnClick> 来触发动画效果,类似的,我们使用了 <OnSwipe> 手势滑动来触发动画,只需要指定touchAnchorId 为蓝色小机器人即可,怎么样,是不是有种“拍案惊奇”的感觉?。此外,你可以通过指定 touchAnchorSide 和dragDirection

到这里,你可能会说:前面两个示例的动画轨迹一直是"直线",如果想要某段动画过程的轨迹是"曲线"效果可以吗?当然没问题! Keyframes

这篇关于MontionLayout:打开动画新世界大门(其一,附小技巧的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/m0_66264673/article/details/122639172
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/757691

相关文章

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

Java中的雪花算法Snowflake解析与实践技巧

《Java中的雪花算法Snowflake解析与实践技巧》本文解析了雪花算法的原理、Java实现及生产实践,涵盖ID结构、位运算技巧、时钟回拨处理、WorkerId分配等关键点,并探讨了百度UidGen... 目录一、雪花算法核心原理1.1 算法起源1.2 ID结构详解1.3 核心特性二、Java实现解析2.

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器(Decorator)是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧

Go语言代码格式化的技巧分享

《Go语言代码格式化的技巧分享》在Go语言的开发过程中,代码格式化是一个看似细微却至关重要的环节,良好的代码格式化不仅能提升代码的可读性,还能促进团队协作,减少因代码风格差异引发的问题,Go在代码格式... 目录一、Go 语言代码格式化的重要性二、Go 语言代码格式化工具:gofmt 与 go fmt(一)

如何在Mac上彻底删除Edge账户? 手动卸载Edge浏览器并清理残留文件技巧

《如何在Mac上彻底删除Edge账户?手动卸载Edge浏览器并清理残留文件技巧》Mac上的Edge账户里存了不少网站密码和个人信息,结果同事一不小心打开了,简直尴尬到爆炸,想要卸载edge浏览器并清... 如果你遇到 Microsoft Edge 浏览器运行迟缓、频繁崩溃或网页加载异常等问题,可以尝试多种方

MySQL 打开binlog日志的方法及注意事项

《MySQL打开binlog日志的方法及注意事项》本文给大家介绍MySQL打开binlog日志的方法及注意事项,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录一、默认状态二、如何检查 binlog 状态三、如何开启 binlog3.1 临时开启(重启后失效)

qt5cored.dll报错怎么解决? 电脑qt5cored.dll文件丢失修复技巧

《qt5cored.dll报错怎么解决?电脑qt5cored.dll文件丢失修复技巧》在进行软件安装或运行程序时,有时会遇到由于找不到qt5core.dll,无法继续执行代码,这个问题可能是由于该文... 遇到qt5cored.dll文件错误时,可能会导致基于 Qt 开发的应用程序无法正常运行或启动。这种错

mtu设置多少网速最快? 路由器MTU设置最佳网速的技巧

《mtu设置多少网速最快?路由器MTU设置最佳网速的技巧》mtu设置多少网速最快?想要通过设置路由器mtu获得最佳网速,该怎么设置呢?下面我们就来看看路由器MTU设置最佳网速的技巧... 答:1500 MTU值指的是在网络传输中数据包的最大值,合理的设置MTU 值可以让网络更快!mtu设置可以优化不同的网

MySQL JSON 查询中的对象与数组技巧及查询示例

《MySQLJSON查询中的对象与数组技巧及查询示例》MySQL中JSON对象和JSON数组查询的详细介绍及带有WHERE条件的查询示例,本文给大家介绍的非常详细,mysqljson查询示例相关知... 目录jsON 对象查询1. JSON_CONTAINS2. JSON_EXTRACT3. JSON_TA

Spring @RequestMapping 注解及使用技巧详解

《Spring@RequestMapping注解及使用技巧详解》@RequestMapping是SpringMVC中定义请求映射规则的核心注解,用于将HTTP请求映射到Controller处理方法... 目录一、核心作用二、关键参数说明三、快捷组合注解四、动态路径参数(@PathVariable)五、匹配请