参考资料
https://mp.weixin.qq.com/s/8DhoUK9YlbRGwr6ALp2CBw
话不多说,上图为敬:
效果图分析
- 头部用户信息区域的渐隐渐显
- 头部用户信息区域的位置变化
- 控件大小的变化(比如关注按钮)
- 文字大小及颜色的变化(比如用户名称)
添加依赖
MotionLayout要求ConstraintLayout的版本在2.0.0及其以上.依赖如下:
implementation 'androidx.constraintlayout:constraintlayout:2.0.0'
创建布局
创建一个名为activity_main.xml的布局文件,根布局为ConstraintLayout,然后选择Design->Component Tree -> 选中根布局ConstratintLayout右键,选择Convert to MotionLayout,将其根布局转为MotionLayout。然后Design面板变成了如下:多了动画预览窗口.
注意:我们尽量采用右键自动转化为MotionLayout的方式,避免手动将ConstratintLayout变为MotionLayout根布局文件,有时不能正常显示的问题,可能需要重启。
创建MotionScene动画资源文件
我们返回去看一眼根布局,已经变成了MotionLayout,而且layoutDescription属性指向了自动为我们创建的MotionScene动画资源文件.
我们紧接着看一眼activity_main_scene这个文件,该文件位于res-xml文件夹下的activity_main_scene.xml.
motionscene文件的基本结构说明如下:
- MotionScene为项目的根标签
- Transition指定了动画要使用的ConstraintSet,及动画的触发方式等
- ConstraintSet指定了动画开始页面和结束页面的控件状态
- KeyFrameSet 用来描述一系列运动过程中的关键,我们稍后说
完善布局
添加背景动画
由于MotionLayout是ConstraintLayout的子类,所以我们可以像使用ConstraintLayout一样使用它.我们先来将背景添加上,代码如下:
activity_main.xml中:
activity_main_scene.xml中:
id为start的Constraint定义了动画开始的状态;id为end的Constraint的则定义了动画结束的状态,Constraint标签用来描述一个控件的位置和属性,但光有这些还不够,我们还需要添加一个动画的触发方式,这里有两种触发方式:
标签表示点击触发动画 标签表示拖拽执行动画
这里我们选择后者:标签要放在Transition标签中,代码如下:
解释下相关的属性
- dragDirection 拖拽的方向
- touchAnchorId 滑动影响的控件id
- touchAnchorSide 滑动所固定到的目标视图的一侧,可以配合dragDirection理解,二者相反
在xml布局文件和motionscene的文件中,控件的id不能少,Constraint标签中layout_打头的属性都要有,其余可以省略比如src属性,因为在xml中已经赋值了
我们现在看一下效果,可以在design面板中先预览一下:
点击1所指的start可以预览start状态,点击2所指的end预览end状态。点击上方3所指的连线,可以在下方面板点击播放键查看动画,当然也可以自己拖拽查看。
我们直接运行看效果吧:
添加右下方收藏按钮等动画
activity_main.xml代码:
activity_main_scene.xml代码:
在motionlayout根布局中添加app:showPaths="true"可以在手机上看到动画的移动轨迹,我们加入一下
运行看效果:
但是我们看这个收藏按钮的运动轨迹有点单调,就是直线从A点到B点.我们来改进一下,这就需要用到我们上面提到的 KeyFrameSet了,KeyFrameSet包含于Transition标签中,这个标签用来描述一系列运动过程中的关键帧。我们可以利用其使动画效果变的更复杂。其子元素包含KeyPosition、KeyAttribute等,我们先使用一下其子元素KeyPosition(因为要改变的是运动轨迹),具体的用法如下:
activity_main_scene.xml代码:
运行效果如下:
通过设置app:showPaths="true"我们可以很明显的看到运动轨迹发生了变化.
关键属性说明如下:
- motionTarget 受影响的控件id
- framePosition 关键帧的位置取值为1 到 99 之间的整数。这里取值50就是指动画进行到一半的位置
- percentX和 percentY 控件到达framePosition点时的位置,是个float值。这两个属性的具体意义需要根据keyPositionType的类型来定
- keyPositionType 有多种取值,以我们代码中为例
motion:keyPositionType="deltaRelative"
,取值为deltaRelative时:percentX 和 percentY 坐标系以constraintSetStart指定的位置为原点,X轴平行于父布局X轴,方向为动画开始的x点指向结束点x点,其值0为原点,1为动画整个动画X轴方向的运动距离。Y轴平行于父布局Y轴,方向为动画开始的y点指向结束点y点,其值0为原点,1为动画整个动画Y轴方向的运动距离。如下:
image.png
关注按钮
注意:关注按钮的控件大小和字体大小的变化,运动过程中也伴随着渐变效果.这样的效果我们就需要用的KeyFrameSet中的另一个子元素KeyAttribute以及Constraint 中的CustomAttribute标签配合完成.
activity_main.xml相关代码如下:
activity_main_scene.xml相关代码如下:
在ConstraintSet的start状态
在ConstraintSet的end状态
效果如下:
相关属性说明:
关于Constraint
Constraint:每一个Constraint元素对应一个id属性所指向的View,我们必须为控件设置宽和高即使在布局xml中已经设置过了.
- id :用来指定布局中对应的view
- CustomAttribute: 包含在Constraint元素中,一个
本身包含两个属性
1.motion:attributeName 是必需属性,并且必须与控件中具有 getter 和 setter 方法的属性相对应。
2.第二个属性我们需要基于上面填写的属性来决定。比如上面填写的backgroundColor这里我们就需要使用customColorValue。
关于KeyAttribute
指定动画序列中特定时刻的视图属性。
motionTarget 和framePosition 与KeyPosition意义相同
KeyAttribute还支持visibility、rotation、scale等控件基本属性。
最后附上所有代码
activity_main.xml
```
**activity_main_scene.xml**
```
```
ok,关于MotionLayout就说这么多,更详细的内容推荐大家去查看官方文档或者其它资料.