Android新控件之MotionLayout 关键帧深入学习<

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>    

1. standard 标准模式
   通常用于将角色添加到非触摸驱动的动画中。它最适用于以静止开始和结束的元素
   [站外图片上传中...(image-c6adb-1643778430377)]

   
   标准模式.gif

2. accelerate:加速模式
   将元素移出场景时通常使用加速。

   
   加速模式.gif

3.decelerate :减速模式
将元素移动到场景中时通常使用减速。

减速模式.gif

4. 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>

总结

根据谷歌开发者文章总结加上子理解写下的这篇博客,英文好的可以看原版.在这里简单的结束了下 位置关键帧以及属性关键帧,其他的几种暂时没学习回头补上.

参考文献

1.Google的MotionLayout介绍说明

2.MotionLayout的文档简介

3.MotionLayout 源码地址

4. 英文原版地址