Android 使用MotionLayout实现动画效果
之前的文章中,我们通过TransitionManager可以方便地实现过渡动画效果,但是TransitionManager存在一个问题,就是不能"跟手"。即不能手指移到到哪里,动画就到哪里,而通过MotionLayout,却可以很方便地解决这个问题。
而且,MotionLayout不仅仅可以解决这个问题,还可以动态改变动画路径,View属性,十分强大。
MotionLayout继承自ConstraintLayout,接下来我们就来看下MotionLayout如何使用。
MotionLayout最简单的使用
首先,我们新建动画开始时候的布局activity_motion_layout3_start.xml
<androidx.constraintlayout.widget.ConstraintLayout 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"><Viewandroid:id="@+id/button"android:layout_width="64dp"android:layout_height="64dp"android:background="@color/colorAccent"android:text="Button"android:layout_marginLeft="16dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>
新建一个动画结束时候的布局activity_motion_layout3_end.xml
<androidx.constraintlayout.widget.ConstraintLayout 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"><Viewandroid:id="@+id/button"android:layout_width="64dp"android:layout_height="64dp"android:layout_marginRight="16dp"android:background="@color/colorAccent"android:text="Button"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>
然后,在Activity的xml中,使用MotionLayout,注意,这几个布局中的id需要相同
<androidx.constraintlayout.motion.widget.MotionLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/motionLayout"app:layoutDescription="@xml/activity_main_scene3"android:layout_width="match_parent"android:layout_height="match_parent"><Viewandroid:id="@+id/button"android:background="@color/colorAccent"android:layout_width="64dp"android:layout_height="64dp"android:text="Button"tools:layout_editor_absoluteX="147dp"tools:layout_editor_absoluteY="230dp" /></androidx.constraintlayout.motion.widget.MotionLayout>
这里的重点app:layoutDescription
,我们设置了activity_main_scene3.xml
,这里文件就是具体设置动画的地方了
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"><Transitionapp:constraintSetEnd="@layout/activity_motion_layout3_end"app:constraintSetStart="@layout/activity_motion_layout3_start" ><OnSwipeapp:dragDirection="dragRight"app:touchAnchorId="@id/button"app:touchAnchorSide="right" /></Transition>
</MotionScene>
app:constraintSetStart
设置动画开始时候的布局,app:constraintSetEnd
设置动画结束时候的布局,而OnSwipe
可以设置当向某个方向滑动的时候,触发该动画。
我们运行程序,来看下效果。
MotionLayout动态改变View属性
MotionLayout不仅可以实现动画效果,还可以动态改变View的属性。
这时候,我们就不能只使用activity_motion_layout3_start.xml
和activity_motion_layout3_end.xml
了。
我们删除这两个布局,完全用activity_main_scene3.xml
来控制动画和布局位置。
修改activity_main_scene3.xml
如下
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"xmlns:motion="http://schemas.android.com/apk/res-auto"><!--动画设置--><Transitionmotion:constraintSetEnd="@+id/end"motion:constraintSetStart="@+id/start"motion:duration="1000"><OnSwipemotion:dragDirection="dragRight"motion:touchAnchorId="@id/button"motion:touchAnchorSide="right" /></Transition><!--动画开始时候的布局--><ConstraintSet android:id="@+id/start"><Constraint android:id="@id/button"><Layoutandroid:layout_width="64dp"android:layout_height="64dp"android:layout_marginStart="8dp"motion:layout_constraintBottom_toBottomOf="parent"motion:layout_constraintStart_toStartOf="parent"motion:layout_constraintTop_toTopOf="parent" /><!--设置View属性--><CustomAttributemotion:attributeName="BackgroundColor"motion:customColorValue="#D81B60" /></Constraint></ConstraintSet><!--动画结束时候的布局--><ConstraintSetandroid:id="@+id/end"motion:deriveConstraintsFrom="@id/start"><Constraint android:id="@id/button"><Layoutandroid:layout_width="64dp"android:layout_height="64dp"android:layout_marginEnd="8dp"motion:layout_constraintEnd_toEndOf="parent" /><!--设置View属性--><CustomAttributemotion:attributeName="BackgroundColor"motion:customColorValue="#9999FF" /></Constraint></ConstraintSet></MotionScene>
我们再来运行下程序
可以看到,View的背景色动态的发生了改变,如果我们修改View的大小之类的属性,都是可以动态呈现出来的,这里就不演示了。
使用MotionLayout关键帧
我们在动画执行的过程中,还可以设置关键帧,让动画路径按照我们预期的执行。
我们在<Transition>
节点中,添加如下代码
<KeyFrameSet><KeyPositionmotion:keyPositionType="pathRelative"motion:percentY="-0.25"motion:framePosition="50"motion:motionTarget="@id/button"/>
</KeyFrameSet>
运行程序
可以看到,动画路径按照我们预期的设置运行了,具体更多的关键帧属性详见KeyFrameSet
使用代码来执行MotionLayout动画
我们不仅可以通过滑动等方式来触发MotionLayout动画,我们也可以在代码里去执行。
我们在activity_motion_layout3.xml
中添加一个Button
<Buttonandroid:id="@+id/btn_toggle"android:text="toggle"android:layout_marginBottom="16dp"app:layout_constraintRight_toRightOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintBottom_toBottomOf="parent"android:layout_width="wrap_content"android:layout_height="wrap_content" />
然后在Activity中,添加如下代码
var motionLayout = findViewById<MotionLayout>(R.id.motionLayout)
var btnToggle = findViewById<Button>(R.id.btn_toggle)
btnToggle.setOnClickListener {if (motionLayout.progress <= 0) {motionLayout.transitionToEnd()} else {motionLayout.transitionToStart()}
}
运行程序,我们点击Button按钮时候,动画也就会进行切换了
示例代码
文本相关代码及更多MotionLayout代码示例,详见 MotionLayout-Demo
参考
Developer | MotionLayout
Android新控件MotionLayout介绍(四)
Android MotionLayout动画:续写ConstraintLayout新篇章
Android 使用MotionLayout实现动画效果相关推荐
- android中设置Animation 动画效果
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
- android仿ppt,android 仿ppt进入动画效果合集
EnterAnimation android 仿ppt进入动画效果合集, 百叶窗效果,擦除效果,盒状效果,阶梯效果,菱形效果,轮子效果,劈裂效果,棋盘效果, 切入效果,扇形展开效果,十字扩展效果,随机 ...
- Android 登录3D翻转动画效果
Android 登录3D翻转动画效果 描述:这是一个 登录3D翻转效果的Demo. 项目代码在最后面!!!!跳转到最后 控件效果如下: 实现功能: 使页面进行3D翻转(3D翻转效果) 可通过回调监听两 ...
- android 开红包动画,Android实现红包雨动画效果
本文介绍了Android实现红包雨动画效果,分享给大家,希望对大家有帮助 红包雨 关于实现上面红包雨效果步骤如下: 1.创建一个红包实体类 public class RedPacket { publi ...
- Android利用SVG实现动画效果
系列文章目录 Android利用SVG实现动画效果 老规矩,文中/文末会放置源码 文章目录 系列文章目录 前言 一.先看看Android中一个简单的SVG图 二.pathdata中参数的定义(三角形是 ...
- android 仿ppt进入动画效果合集
EnterAnimation android 仿ppt进入动画效果合集, 百叶窗效果,擦除效果,盒状效果,阶梯效果,菱形效果,轮子效果,劈裂效果,棋盘效果, 切入效果,扇形展开效果,十字扩展效果,随机 ...
- Android—ListView Item 展开动画效果
Android-ListView Item 展开动画效果 最近在做一个关于ListView item的展开效果,类似于 "粮仓" App 的商店页面,点击Item,展开显示子Vie ...
- android 说话水波动画,Android实用View——水波动画效果多种实现方式详解
原标题:Android实用View--水波动画效果多种实现方式详解 这次给大家带来的是一篇关于自定义View实现水波动画效果的文章,其实在去年项目中使用过类似的动画,当时就自定义View也实现了预期的 ...
- android跳转界面动画,Android Activity跳转动画效果
Activity的跳转动画在5.0的时候做了一个重大的突破,下面来看一下吧 1.5.0之前的overridePendingTransition 相信大家对OverridePendingTransiti ...
- android炫酷的动画效果
这段时间看到一些比较好看的android动画效果,下面我就给大家一些我比较喜欢的动画效果,并附上源码希望对你们有用处. 1.很简单却很酷的粒子破碎效果 介绍: 实现思路 1.新建一个 Bean Pa ...
最新文章
- 重写 equals 方法就一定要重写 hashCode 方法?其实有个前提
- 过去半年,二手楼市里的真实与残酷
- 橡胶支座抗压弹性模量计算公式_囊谦网架生态酒店_网架抗震垫块A诚信商家-桥兴橡胶...
- android 隐藏导航栏 虚拟键
- python能写软件吗-python代码能做成软件吗
- IDEA创建Web Project图解
- 网络爬虫入门系列(3) httpClient
- [技术分享]20171130_Kendo UI _ datePicker日期控件如何只选择年,不选择月,日?
- 密码学专题 证书和CA指令 证书和CA功能概述
- UVA 10608-Friends
- 将TIMESTAMP类型的差值转化为秒的方法
- 容易被忽略的注解,你能了解多少?
- 论文赏析[NAACL19]无监督循环神经网络文法 (URNNG)
- 让Microsoft Office2010 新建 Microsoft Office 97-2003 文档
- java转码工具应用程序_java转码工具native2ascii.exe的使用方法
- / ./ ../的区别
- Android 更换壁纸 代码
- 【Unity】打包报错 com.android.buil.gradle.internal.tasks.workers$ActionFacade
- mysql多次登录失败控制,Mysql登录失败多次锁定配置
- 如何从外网访问校园内网
热门文章
- ADS1112|MS1112|16位AD转换芯片|国产兼容PIN-TO-PIN。兼容替代无需修改软硬件
- 笔记本用PCIE转并口卡连接H-JTAG烧写PXA270 NOR Flash
- Java对接支付宝(alipay)电脑网站生成二维码扫码支付 alipay.trade.page.pay统一收单下单并支付页面接口
- flask 中upload()上传文件相关操作及出现的问题
- 新零售业背景下实体店的经营战略
- java 算法,Java的十大算法你掌握好了吗?
- 小米路由器mini刷7620老毛子Padavan固件(支持私人云储存 aria2 QOS $$R等)
- TKG 1.5.1 的 BYOH 集群部署
- HuaWei ❀ 双协议栈
- sqlite3:深入理解sqlite3_stmt 机制