MotionLayout 关键帧
MotionLayout 运动布局继承于ConstraintLayout(约束布局) 它的的大体实现是静态处理放在ConstraintSet(约束集合)上,用ConstraintSet控制布局适应不通的屏幕尺寸
在一些特殊的情况下我们需要一个特殊的过度状态,用于处理一些过渡变化,如下图.中间点就是个开始点到结束点的关键点,用于处理开始点到结束点的动画变化以及路径变化
关键帧作用:
可以应用于位置或属性值；它们基本上允许您在过渡期间的某个时间点指定更改。
关键点过度.gif
代码:
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:duration="1000"
motion:motionInterpolator="linear">
<!-- motion:pathMotionArc="startHorizontal"-->
<!-- motionInterpolator 动画插值器 -->
<!-- autoCompleteToEnd 自动完成到结尾 autoComplete自动完成 -->
<OnSwipe
motion:dragDirection="dragRight"
motion:touchAnchorId="@+id/button"
motion:touchAnchorSide="right" />
<!--parentRelative 相对父布局的路径 相对控件的-->
<!--percentY 移动的Y位置(百分比+在下 -在上)-->
<!--percentX 移动的Y位置(百分比+在右边 -在左边)-->
<!--motionTarget 目标View-->
<!--framePosition 0=起点100=终点 什么时候关键帧起作用-->
<KeyFrameSet>
<KeyPosition
motion:framePosition="50"
motion:keyPositionType="pathRelative"
motion:motionTarget="@id/button"
motion:percentX="0.5"
motion:percentY="-0.5" />
<!-- KeyAttribute 关键帧的属性-->
<!-- scaleX scaleY XY 缩放 -->
<!-- rotation 旋转 -->
<!-- framePosition 执行到这个区间的百分之80 -->
<KeyAttribute
android:rotation="45"
android:scaleX="2"
android:scaleY="2"
motion:framePosition="80"
motion:motionTarget="@id/button" />
<!-- <KeyPosition-->
<!-- motion:framePosition="60"-->
<!-- motion:keyPositionType="pathRelative"-->
<!-- motion:motionTarget="@id/button"-->
<!-- motion:percentX="0.7"-->
<!-- motion:percentY="-0.8" />-->
</KeyFrameSet>
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/button"
android: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">
<CustomAttribute
motion:attributeName="BackgroundColor"
motion:customColorValue="#D81B60" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="BackgroundColor"
motion:customColorValue="#9999FF" />
</Constraint>
</ConstraintSet>
</MotionScene>
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（“父级”）中的单个小部件的以下动画：
parentRelative.gif
我们有一个开始（左下）和结束（右上）状态，运动路径只是这两个状态之间的线性插值 - 小部件将沿直线移动。
parentRelative.png
通过引入位置关键帧，我们可以将运动路径更改为曲线运动：
parentRelative2.gif
parentRelative2.png
关键帧包含在一个<KeyFrameSet>属性中，该属性本身包含在<Transition>MotionScene 文件中。位置关键帧通过 tag 表示<KeyPosition>，至少需要包含：
target: 关键帧应用到的小部件
framePosition: 从 0 到 100，关键帧什么时候应用
keyPositionType：使用的坐标系， parentRelative, deltaRelative, pathRelative
percentX / percentY : 位置的 (x,y) 坐标
pathMotionArc 圆弧运动
transitionEasing 缓和过度
代码
<KeyFrameSet>
<KeyPosition
motion:keyPositionType="pathRelative"
motion:percentX="0.75"
motion:percentY="-0.3"
motion:framePosition="25"
motion:target="@id/button"/>
<KeyPosition
motion:keyPositionType="pathRelative"
motion:percentY="-0.4"
motion:framePosition="50"
motion:target="@id/button"/>
<KeyPosition
motion:keyPositionType="pathRelative"
motion:percentX="0.25"
motion:percentY="-0.3"
motion:framePosition="75"
motion:target="@id/button"/>
</KeyFrameSet>
属性说明
1.定位属性percentX percentY 说明
为了使位置关键帧在这样的系统中有用，我们需要它们能够以类似的自适应方式定位自己——我们不能简单地将它们定义为固定位置。
为了解决这个问题，同时保持关键帧系统的轻量级，我们提出了一种灵活的方法——在给定的坐标系中，每个关键帧的位置都用 (x,y) 坐标对表示：percentX percentY
这些坐标的含义取决于使用的坐标系类型(motion:keyPositionType )：parentRelative、deltaRelative或pathRelative。
注意
每个关键帧位置都是单独完成的——每个关键帧都可以使用自己的坐标系来表示，独立于其他。
2.motion:keyPositionType 坐标系类型()
1. parentRelative
相对父布局表示的坐标类型(此坐标系仅基于父尺寸)
2. deltaRelative:
第二个坐标系通过使用开始/结束位置定义来解决这个确切的问题。坐标表示开始位置和结束位置之间距离的百分比
-3.pathRelative
最后一个坐标系被定义为相对于开始和结束状态之间的直线路径
parentRelative .png
deltaRelative.png
pathRelative.png
3: pathMotionArc 圆弧运动轨迹
ConstraintLayout 2.0.0 alpha 2 中，我们引入了一种实现完美弧线运动的新方法——而且它更易于使用。你只需要添加 motion:pathMotionArc 属性到起始 ConstraintSet, 从默认的直线运动切换到圆弧运动
<KeyPosition
motion:keyPositionType="parentRelative"
motion:pathMotionArc="flip"
motion:percentY="0.5"
motion:framePosition="50"
motion:target="@id/button"/>
1.圆弧轨迹类型
<attr format="enum" name="pathMotionArc">
<enum name="none" value="0"/>
<enum name="startVertical" value="1"/>
<enum name="startHorizontal" value="2"/>
<enum name="flip" value="3"/>
</attr>
a.startHorizontal 水平启动(横向): motion:pathMotionArc=”startHorizontal”
startHorizontal.gif
b.startVertical:垂直启动(纵向)
motion:pathMotionArc=”startVertical”
startVertical.gif
motion:pathMotionArc通过设置属性，该场景中的位置关键帧也可用于更改圆弧的方向。该属性可以是flip（翻转当前弧线方向）、none（恢复为直线运动）或明确地startHorizontal或startVertical。
c.flip 具有翻转方向的中间关键帧
motion:pathMotionArc="flip"
flip.gif
4.transitionEasing 缓动曲线(类似插值器)
<attr format="string|enum" name="transitionEasing">
<enum name="standard" value="0"/>
<enum name="accelerate" value="1"/>
<enum name="decelerate" value="2"/>
<enum name="linear" value="3"/>
</attr>
-
standard 标准模式
通常用于将角色添加到非触摸驱动的动画中。它最适用于以静止开始和结束的元素
[站外图片上传中...(image-c6adb-1643778430377)]
标准模式.gif
-
accelerate:加速模式
将元素移出场景时通常使用加速。
加速模式.gif
3.decelerate :减速模式
将元素移动到场景中时通常使用减速。
减速模式.gif
-
cubic(float, float , float, float), 其中参数是 x1,y1,x2,y2 表示
image.png
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 元素中声明自定义属性<CustomAttribute>。该元素需要一个名称 ( attributeName)，它是 getter/setter 的名称（减去 set/get 前缀），以及要插入或应用的值，使用以下属性之一指定：
customColorValue: 应用颜色值
customColorDrawableValue：应用颜色值，包装为可绘制对象
customIntegerValue: 应用一个整数值
customFloatValue: 应用浮点值
customStringValue: 应用一个字符串值
customDimension: 应用维度值
customBoolean: 应用一个布尔值
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button" ...>
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#D81B60"/>
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/button" ...>
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#9999FF"/>
</Constraint>
</ConstraintSet>
总结
根据谷歌开发者文章总结加上子理解写下的这篇博客,英文好的可以看原版.在这里简单的结束了下 位置关键帧以及属性关键帧,其他的几种暂时没学习回头补上.
网友评论