因为id
为start
的ConstraintSet
标签关联到Transition
标签的constraintSetStart
属性,所以它作为动画(目前只有一个动画)的起始状态。而id
为end
的ConstraintSet
标签关联到Transition
标签的constraintSetEnd
属性,所以它将作为动画的结束状态。结束状态我们将正方形设置水平居中,距离底部50dp
。
设置Constraint
标签时记得设置layout_width
与layout_height
,不然是看不到正方形的。
- 到这一步,
Transition
标签已经拥有开始和结束状态了,就差触发动画开始的操作了。给Transition
标签增加onClick
子标签,表示点击触发动画。onClick
标签增加clickAction
属性,值为toggle
,表示重复点击时,动画循环效果;增加targetId
属性,值为@id/vStartStatus
,表示点击正方形视图触发过渡动画。
此时activity_motion_scene.xml
看起来是这样子的。
效果图
OK,看到这里,你应该可以创建个类似的MotionLayout动画。还不行的话,需要回头再看看。
下面讲介绍一些标签的属性与效果。
标签与属性
Transition标签
Transition
标签主要用来指定Motion场景中一个或多个动画。即关联到动画对应的各种状态和用户交互动作。和过渡动画是大同小异的。
常用属性:
constraintSetStart
:指定动画初始状态;
constraintSetEnd
:指定动画结束状态;
duration
:指定动画时长;
autoTransiton
:是否自动开启动画。取值有:animateToStart
过渡到初始状态、animateToEnd
过渡到结束状态、jumpToEnd
跳到结束状态、jumpToStart
跳到初始状态、none
不开始状态。默认情况下是none
,当设为其他值时,不用和用户交互即自动开启动画。
motionInterpolator
:插值器。取值有:linear
线性、bounce
弹簧、easeIn
淡入、easeOut
淡出、easeInOut
淡入淡出;
transitionDisable
:允许动画功能。取值:false
和true
;
layoutDuringTransition
:动画过程中,MotionLayout
子View
调用reqeustLayout
,是否做出响应。取值honorRequest
响应、ignoreRequest
忽略;(beta 4)
1、用户交互的子标签
Transition
标签通过一些子标签,实现与用户交互的行为。例如上文的OnClick
子标签表示用户的点击行为。
OnClick
标签:点击场景中某个视图,开始动画效果。
OnSwipe
标签:表示在布局上滑动时要执行的操作。由于个人能力有限,一些属性不能准备表达。
2、关键帧子标签
在上文中,默认情况下过渡动画Transition
标签会关联一个开始状态和一个结束状态的TransitionSet
标签。但我们知道Transition
标签不仅可以创建初始状态和结束状态,还可以创建中间状态。这些中间状态则由关键帧来构成,以实现更复杂的动画效果。
KeyFrameSet
标签:用来指定某个中间状态的位置和属性。其实和过渡动画的关键帧是一样的概念。KeyFrameSet
标签含有KeyPosition
和KeyAttribute
两个子标签,这些共同构成过渡动画过程中某特殊状态的位置和属性。
位置关键帧
KeyPosition
标签: 用来定义整个运动动画中某个状态的位置,相比于静态的TransitionSet
标签来说,更加灵活。
重点属性解释:
framePosition
:当前关键帧的位置,把整个运动动画分成100个位置,取值0到99,那么初始状态的位置就是0,结束状态就是99。
keyPositionType
:参考坐标系的选择,决定了percentX
和percentY
属性取值的结果。
取值:parentRelative
表示坐标系基于父视图。例如在开头的demo,加上下面的关键帧:
代码定义了运动动画过程的中间位置framePosition="50"
,参考系选择了相对父视图坐标keyPositionType="parentRelative"
。由于父视图是全屏,所以坐标系原点在屏幕的左上角,percentY="0.5"
和percentX="0.25"
则表示正方形在父视图高度的1/2,宽度1/4的位置。
效果图
将keyPositionType
属性改为deltaRelative
,即坐标系选择参照整个过渡动画的位置,那么起始状态的位置就是原点(0,0),结束状态的位置就是终点(1,1)。 这里由于原点和终点在x轴上的距离是0,所以percentX="0.25"
是没有效果的。
效果图:
将keyPositionType
属性改为pathRelative
,即坐标系选择参照整个运动路径,即起始和终点的直线距离构成X轴,此时y轴就有正负之分,表示在X轴的左边还是右边。x轴和y轴的长度都是等于路径的长度。
例如代码如下:
效果图:
代码如下,percentY
改为-1
:
效果图:
percentWidth
和percentHeight
属性表示视图自身大小,如果整个动画过程中,视图大小不存在变化,是没有效果的。例如文章开始的demo就是没有效果的,可以将正方形在起始状态和结束状态的大小改为不一致,就可以看到效果。percentWidth
和percentHeight
属性会导致sizePercent
属性失效。
属性关键帧
KeyAttribute
相对于位置关键帧,属性关键帧更注重的是属性,而不是某位置。例如常见的位移、旋转动画。 属性有:
framePosition
关键帧位置motionTarget
关联视图IdtransitionEasing
动画速度curveFit
选择基于直线的路径或基于单一速率的路径motionProgress
设置动画进度android:alpha
透明度android:elevation
阴影,注意SDK版本android:rotation
旋转android:rotationX
绕X轴旋转"android:rotationY"
绕Y轴旋转android:transformPivotX
旋转或缩放的中心点X坐标android:transformPivotY
旋转或缩放的中心点Y坐标transitionPathRotate
android:scaleX"
X轴缩放android:scaleY"
Y轴缩放android:translationX
X轴平移android:translationY
Y轴平移android:translationZ
X轴平移
如果以上属性不够,也可以通过添加CustomAttribute
子标签实现自己属性,跟属性动画自定属性是同个概念。
自定义属性
CustomAttribute
标签必须通过attributeName
属性指定一个属性名。支持下类型的属性。
customColorValue
颜色值类型customColorDrawableValue
颜色值的Drawable类型customIntegerValue
int类型customFloatValue
float类型customStringValue
String类型customDimension
尺寸类型customPixelDimension
Pixel尺寸类型customBoolean
Boolean 类型
到这里,Transition
标签和其子标签、相关属性基本就介绍完了。
ConstraintSet标签
ConstraintSet
约束集主要用来定义多个属性集合,并通过id被Transition
标签引用,作为运动动画过程的起始或结束状态。
Constraint标签
子标签Constraint
用来该状态某个View
的相关约束属性,约束属性支持ConstraintLayout
布局的所有属性+上文提到的自定义属性。或者通过组织Layout
、PropertySet
、Transform
、Motion
、CustomAttribute
等子标签,关于这些子标签,感兴趣可以参阅官方文档
【系列好文推荐】
更多Android高级工程师进阶学习资料
进阶学习视频
附上:我们之前因为秋招收集的二十套一二线互联网公司Android面试真题(含BAT、小米、华为、美团、滴滴)和我自己整理Android复习笔记(包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。)
里面包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等,资源持续更新中…
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!
id复习笔记(包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。)
[外链图片转存中…(img-eDvy75Al-1714396582009)]
里面包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等,资源持续更新中…
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!