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

MotionLayout 关键帧

MotionLayout 运动布局继承于ConstraintLayout(约束布局) 它的的大体实现是静态处理放在ConstraintSet(约束集合)上,用ConstraintSet控制布局适应不通的屏幕尺寸

在一些特殊的情况下我们需要一个特殊的过度状态,用于处理一些过渡变化,如下图.中间点就是个开始点到结束点的关键点,用于处理开始点到结束点的动画变化以及路径变化

关键帧作用:

可以应用于位置或属性值;它们基本上允许您在过渡期间的某个时间点指定更改。

关键点过度.gif

代码:





    
        
        
        
        
        
        
        
        
        
        
            

            
            
            
            
            







        
    

    
        
            
        
    

    
        
            
        
    


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

关键帧包含在一个属性中,该属性本身包含在MotionScene 文件中。位置关键帧通过 tag 表示,至少需要包含:

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
    最后一个坐标系被定义为相对于开始和结束状态之间的直线路径
parentRelative .png
deltaRelative.png
pathRelative.png

3: pathMotionArc 圆弧运动轨迹

ConstraintLayout 2.0.0 alpha 2 中,我们引入了一种实现完美弧线运动的新方法——而且它更易于使用。你只需要添加 motion:pathMotionArc 属性到起始 ConstraintSet, 从默认的直线运动切换到圆弧运动


1.圆弧轨迹类型

  
   
        
        
        
        
    

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 缓动曲线(类似插值器)

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


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


    加速模式.gif

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


减速模式.gif
  1. 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" /> 

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 元素中声明自定义属性。该元素需要一个名称 ( attributeName),它是 getter/setter 的名称(减去 set/get 前缀),以及要插入或应用的值,使用以下属性之一指定:
customColorValue: 应用颜色值
customColorDrawableValue:应用颜色值,包装为可绘制对象
customIntegerValue: 应用一个整数值
customFloatValue: 应用浮点值
customStringValue: 应用一个字符串值
customDimension: 应用维度值
customBoolean: 应用一个布尔值

 
     
        
      

 
     
        
      

总结

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

参考文献

1.Google的MotionLayout介绍说明

2.MotionLayout的文档简介

3.MotionLayout 源码地址

4. 英文原版地址

你可能感兴趣的:(Android新控件之MotionLayout 关键帧深入学习<九>)