Android-MotionLayout动画

参考资料

https://mp.weixin.qq.com/s/8DhoUK9YlbRGwr6ALp2CBw
话不多说,上图为敬:

motionlayout.gif

效果图分析

  • 头部用户信息区域的渐隐渐显
  • 头部用户信息区域的位置变化
  • 控件大小的变化(比如关注按钮)
  • 文字大小及颜色的变化(比如用户名称)

添加依赖

MotionLayout要求ConstraintLayout的版本在2.0.0及其以上.依赖如下:
implementation 'androidx.constraintlayout:constraintlayout:2.0.0'

创建布局

创建一个名为activity_main.xml的布局文件,根布局为ConstraintLayout,然后选择Design->Component Tree -> 选中根布局ConstratintLayout右键,选择Convert to MotionLayout,将其根布局转为MotionLayout。然后Design面板变成了如下:多了动画预览窗口.


image.png

注意:我们尽量采用右键自动转化为MotionLayout的方式,避免手动将ConstratintLayout变为MotionLayout根布局文件,有时不能正常显示的问题,可能需要重启。

创建MotionScene动画资源文件

我们返回去看一眼根布局,已经变成了MotionLayout,而且layoutDescription属性指向了自动为我们创建的MotionScene动画资源文件.


image.png

我们紧接着看一眼activity_main_scene这个文件,该文件位于res-xml文件夹下的activity_main_scene.xml.




    
       
       
    

    
    

    
    

motionscene文件的基本结构说明如下:

  • MotionScene为项目的根标签
  • Transition指定了动画要使用的ConstraintSet,及动画的触发方式等
  • ConstraintSet指定了动画开始页面和结束页面的控件状态
  • KeyFrameSet 用来描述一系列运动过程中的关键,我们稍后说

完善布局

添加背景动画

由于MotionLayout是ConstraintLayout的子类,所以我们可以像使用ConstraintLayout一样使用它.我们先来将背景添加上,代码如下:
activity_main.xml中:

    

activity_main_scene.xml中:

 
        

    

    

        
    

id为start的Constraint定义了动画开始的状态;id为end的Constraint的则定义了动画结束的状态,Constraint标签用来描述一个控件的位置和属性,但光有这些还不够,我们还需要添加一个动画的触发方式,这里有两种触发方式:

  • 标签表示点击触发动画
  • 标签表示拖拽执行动画
    这里我们选择后者:标签要放在Transition标签中,代码如下:
    
       
       

        
        
    

解释下相关的属性

  • dragDirection 拖拽的方向
  • touchAnchorId 滑动影响的控件id
  • touchAnchorSide 滑动所固定到的目标视图的一侧,可以配合dragDirection理解,二者相反

在xml布局文件和motionscene的文件中,控件的id不能少,Constraint标签中layout_打头的属性都要有,其余可以省略比如src属性,因为在xml中已经赋值了

我们现在看一下效果,可以在design面板中先预览一下:


image.png

点击1所指的start可以预览start状态,点击2所指的end预览end状态。点击上方3所指的连线,可以在下方面板点击播放键查看动画,当然也可以自己拖拽查看。

image.png

我们直接运行看效果吧:


image.gif
添加右下方收藏按钮等动画

activity_main.xml代码:

   
        
        

activity_main_scene.xml代码:

  
        
        
        
        

    

    

        

        
        
        

    

在motionlayout根布局中添加app:showPaths="true"可以在手机上看到动画的移动轨迹,我们加入一下

运行看效果:


image2.gif

但是我们看这个收藏按钮的运动轨迹有点单调,就是直线从A点到B点.我们来改进一下,这就需要用到我们上面提到的 KeyFrameSet了,KeyFrameSet包含于Transition标签中,这个标签用来描述一系列运动过程中的关键帧。我们可以利用其使动画效果变的更复杂。其子元素包含KeyPosition、KeyAttribute等,我们先使用一下其子元素KeyPosition(因为要改变的是运动轨迹),具体的用法如下:

activity_main_scene.xml代码:

     
           
           
           
           
           
           
       

运行效果如下:


image3.gif

通过设置app:showPaths="true"我们可以很明显的看到运动轨迹发生了变化.
关键属性说明如下:

  • motionTarget 受影响的控件id
  • framePosition 关键帧的位置取值为1 到 99 之间的整数。这里取值50就是指动画进行到一半的位置
  • percentX和 percentY 控件到达framePosition点时的位置,是个float值。这两个属性的具体意义需要根据keyPositionType的类型来定
  • keyPositionType 有多种取值,以我们代码中为例motion:keyPositionType="deltaRelative",取值为deltaRelative时:percentX 和 percentY 坐标系以constraintSetStart指定的位置为原点,X轴平行于父布局X轴,方向为动画开始的x点指向结束点x点,其值0为原点,1为动画整个动画X轴方向的运动距离。Y轴平行于父布局Y轴,方向为动画开始的y点指向结束点y点,其值0为原点,1为动画整个动画Y轴方向的运动距离。如下:
    image.png
关注按钮

注意:关注按钮的控件大小和字体大小的变化,运动过程中也伴随着渐变效果.这样的效果我们就需要用的KeyFrameSet中的另一个子元素KeyAttribute以及Constraint 中的CustomAttribute标签配合完成.

activity_main.xml相关代码如下:

 

activity_main_scene.xml相关代码如下:



           
          
           
           

在ConstraintSet的start状态

        
            
            

        

在ConstraintSet的end状态

       
            
            

        

效果如下:

image4

相关属性说明:
关于Constraint
Constraint:每一个Constraint元素对应一个id属性所指向的View,我们必须为控件设置宽和高即使在布局xml中已经设置过了.

  • id :用来指定布局中对应的view
  • CustomAttribute: 包含在Constraint元素中,一个 本身包含两个属性
    1.motion:attributeName 是必需属性,并且必须与控件中具有 getter 和 setter 方法的属性相对应。
    2.第二个属性我们需要基于上面填写的属性来决定。比如上面填写的backgroundColor这里我们就需要使用customColorValue。

关于KeyAttribute
指定动画序列中特定时刻的视图属性。
motionTarget 和framePosition 与KeyPosition意义相同
KeyAttribute还支持visibility、rotation、scale等控件基本属性。

最后附上所有代码
activity_main.xml




    
    

    
    

    

    


    

你可能感兴趣的:(Android-MotionLayout动画)