MotionLayout 关键帧
MotionLayout 运动布局继承于ConstraintLayout(约束布局) 它的的大体实现是静态处理放在ConstraintSet(约束集合)上,用ConstraintSet控制布局适应不通的屏幕尺寸
在一些特殊的情况下我们需要一个特殊的过度状态,用于处理一些过渡变化,如下图.中间点就是个开始点到结束点的关键点,用于处理开始点到结束点的动画变化以及路径变化
关键帧作用:
可以应用于位置或属性值;它们基本上允许您在过渡期间的某个时间点指定更改。
代码:
2.关键帧类型
MotionLayout 动画系统通过在使用 ConstraintLayout 的完整约束系统以及视图属性指定的两个状态之间插入值(通常是小部件的位置/大小)来工作。这两种状态之间的转换也可以完全由触摸驱动。这个系统通常会给你的过渡带来很好的效果。
MotionLayout 支持不同类型的关键帧:
- A: 位置关键帧: KeyPosition
- B: 属性关键帧: KeyAttribute
- C: 循环关键帧: KeyCycle
- D: 时间周期关键帧: KeyTimeCycle
注意:
每种类型的关键帧都是独立于其他类型的——也就是说,您不需要在同一点定义所有关键帧(但您不能在同一点定义相同类型的多个关键帧
关键帧的通用属性
motion:framePosition : 过渡期间何时应用关键帧(从 0 到 100,位于父布局的100份比例换算)
motion:target : 哪个对象受此关键帧影响(作用与那个控件)
motion:transitionEasing : 使用哪个缓动曲线(默认为线性,移动轨迹曲线路径)
motion:curveFit:样条曲线(默认)或线性——哪条插值曲线适合关键帧。默认为单调样条曲线,使过渡更平滑,但您可以决定改为使用线性段。(我理解为是移动的插值器)
A: KeyPosition 位置关键帧
位置关键帧可能是您将遇到或使用的最常见的关键帧。它们允许您修改小部件在转换期间将在屏幕上显示的路径。例如,让我们看一下包含在 MotionLayout(“父级”)中的单个小部件的以下动画:
我们有一个开始(左下)和结束(右上)状态,运动路径只是这两个状态之间的线性插值 - 小部件将沿直线移动。
通过引入位置关键帧,我们可以将运动路径更改为曲线运动:
关键帧包含在一个
target: 关键帧应用到的小部件
framePosition: 从 0 到 100,关键帧什么时候应用
keyPositionType:使用的坐标系, parentRelative, deltaRelative, pathRelative
percentX / percentY : 位置的 (x,y) 坐标
pathMotionArc 圆弧运动
transitionEasing 缓和过度
代码
属性说明
1.定位属性percentX percentY 说明
为了使位置关键帧在这样的系统中有用,我们需要它们能够以类似的自适应方式定位自己——我们不能简单地将它们定义为固定位置。
为了解决这个问题,同时保持关键帧系统的轻量级,我们提出了一种灵活的方法——在给定的坐标系中,每个关键帧的位置都用 (x,y) 坐标对表示:percentX percentY
这些坐标的含义取决于使用的坐标系类型(motion:keyPositionType ):parentRelative、deltaRelative或pathRelative。
注意
每个关键帧位置都是单独完成的——每个关键帧都可以使用自己的坐标系来表示,独立于其他。
2.motion:keyPositionType 坐标系类型()
1. parentRelative
相对父布局表示的坐标类型(此坐标系仅基于父尺寸)
2. deltaRelative:
第二个坐标系通过使用开始/结束位置定义来解决这个确切的问题。坐标表示开始位置和结束位置之间距离的百分比
-3.pathRelative
最后一个坐标系被定义为相对于开始和结束状态之间的直线路径
3: pathMotionArc 圆弧运动轨迹
ConstraintLayout 2.0.0 alpha 2 中,我们引入了一种实现完美弧线运动的新方法——而且它更易于使用。你只需要添加 motion:pathMotionArc 属性到起始 ConstraintSet, 从默认的直线运动切换到圆弧运动
1.圆弧轨迹类型
a.startHorizontal 水平启动(横向): motion:pathMotionArc=”startHorizontal”
b.startVertical:垂直启动(纵向)
motion:pathMotionArc=”startVertical”
motion:pathMotionArc通过设置属性,该场景中的位置关键帧也可用于更改圆弧的方向。该属性可以是flip(翻转当前弧线方向)、none(恢复为直线运动)或明确地startHorizontal或startVertical。
c.flip 具有翻转方向的中间关键帧
motion:pathMotionArc="flip"
4.transitionEasing 缓动曲线(类似插值器)
-
standard 标准模式
通常用于将角色添加到非触摸驱动的动画中。它最适用于以静止开始和结束的元素
[站外图片上传中...(image-c6adb-1643778430377)]
-
accelerate:加速模式
将元素移出场景时通常使用加速。
3.decelerate :减速模式
将元素移动到场景中时通常使用减速。
- cubic(float, float , float, float), 其中参数是 x1,y1,x2,y2 表示
B: KeyAttribute 属性关键帧
属性关键帧可让您在动画期间的给定时间点指定小部件属性更改 - 换句话说,它们类似于位置关键帧,但适用于属性而不是位置。可以理解为关键位置的属性
< KeyFrameSet >
< KeyAttribute
android:scaleX="2"
android:scaleY="2"
android:rotation="-45"
motion:framePosition="50"
motion:target="@id/button" />
KeyFrameSet >
1.支持的属性
您可以直接使用的属性是视图属性:android:visibility, android:alpha, android:elevation, android:rotation, android:rotationX, android:rotationY, android:scaleX, android:scaleY, android:translationX, android:translationY,android:translationZ
重要提示:根据您针对应用程序的 SDK 级别,其中一些属性将不起作用:
- android:elevation 在 SDK 21 中引入
- android:translationZ 在 SDK 21 中引入
2.自定属性义
您可以通过添加子元素在 ConstraintSets 和 KeyAttribute 元素中声明自定义属性
customColorValue: 应用颜色值
customColorDrawableValue:应用颜色值,包装为可绘制对象
customIntegerValue: 应用一个整数值
customFloatValue: 应用浮点值
customStringValue: 应用一个字符串值
customDimension: 应用维度值
customBoolean: 应用一个布尔值
总结
根据谷歌开发者文章总结加上子理解写下的这篇博客,英文好的可以看原版.在这里简单的结束了下 位置关键帧以及属性关键帧,其他的几种暂时没学习回头补上.