Android UI效果篇-（3）用属性动画实现收缩菜单

前言

~
这篇文章主要记录下属性动画的简单使用，通过属性动画来实现一个常见的收缩菜单的功能。效果如下：

收缩菜单动画效果

---

1.属性动画简单使用

~
下面通过第一种收缩的样式代码来详细介绍下属性动画的属性:

private boolean isOpen = true;//开关标志位
LinearLayout ll= (LinearLayout) findViewById(R.id.llbottom);//模拟的底部菜单栏
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {    
  @Override    
  public void onClick(View view) {        
    if (isOpen) {            
    isOpen = false;            
    ObjectAnimator animator = ObjectAnimator.ofFloat(ll, View.TRANSLATION_X,ll.getWidth());            
    animator.start();        
    } else {            
    isOpen = true;            
    ObjectAnimator animator = ObjectAnimator.ofFloat(ll, View.TRANSLATION_X, 0);            
    animator.start();        
    }    
}});

这里使用ObjectAnimator类对底部菜单栏ll的X轴方向进行了平移动画处理，平移的距离是底部菜单栏ll的整个宽度。

ObjectAnimator animator = ObjectAnimator.ofFloat(ll, View.TRANSLATION_X,ll.getWidth());  

• 第一个参数：被操控的View
• 第二个参数：需要被改变的View的属性
• 第三个参数：改变的大小

其实还可以有更多的参数：

ObjectAnimator animator = ObjectAnimator.ofFloat(ll, View.TRANSLATION_X,0,ll.getWidth(),0,llll.getWidth(),0);  

这样实现的就是一个来回拉伸的效果。

---

2.属性动画属性值

~

属性值名称	对应View属性值名称	属性效果
"translationX"	View.TRANSLATION_X	在X轴上平移
"translationY"	View.TRANSLATION_Y	在Y轴上平移
"translationZ"	View.TRANSLATION_Z	在Z轴上平移
"x"	View.X	View的x坐标
"y"	View.Y	View的y坐标
"alpha"	View.ALPHA	改变View的透明度
"rotation"	View.ROTATION	围绕支点进行2D旋转
"rotationX"	View.ROTATION_X	围绕X轴进行3D旋转
"rotationY"	View.ROTATION_Y	围绕Y轴进行3D旋转
"scaleX"	View.SCALE_X	缩放X轴
"scaleY"	View.SCALE_Y	缩放Y轴

以上就是全部的属性动画属性值，部分会有api版本的限制，比如“z”，“translationZ”等，不建议使用。

---

3.改变属性动画的缩放点

~
属性动画并没有像补间动画一样提供了“pivotX”的方法来改变缩放动画的点，所以我们需要手动来设置缩放点。我们知道属性动画是直接改变的控件的属性，所以我们直接改变控件的"PivotX"或者"PivotY"即可。

DisplayMetrics metric = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metric);
int width = metric.widthPixels; 
ll.setPivotX(width);
ll.setPivotY(0);

通过上面的代码我们就将缩放点改变到了控件的右上角，默认是控件左上角。

---

4.其他效果的核心代码

• 效果二：平移Y轴

if (isOpen2) {   
 isOpen2 = false;   
 ObjectAnimator animator = ObjectAnimator.ofFloat(ll2, View.TRANSLATION_Y, ll.getHeight());    
 animator.start();
 } else {    
 isOpen2 = true;    
 ObjectAnimator animator = ObjectAnimator.ofFloat(ll2, View.TRANSLATION_Y, 0);      
 animator.start();
 }

• 效果三：缩放Y轴

if (isOpen3) {   
  isOpen3 = false;    
  ObjectAnimator animator = ObjectAnimator.ofFloat(ll3, View.SCALE_Y, 1);    
  animator.start();
 } else {    
 isOpen3 = true;    
 ObjectAnimator animator = ObjectAnimator.ofFloat(ll3, View.SCALE_Y, 0);    
 animator.start();
 }

• 效果四：缩放X轴

if (isOpen4) {    
  isOpen4 = false;    
  ObjectAnimator animator = ObjectAnimator.ofFloat(ll4, View.SCALE_X, 1);    
  animator.start();
 } else {    
  isOpen4 = true;    
  ObjectAnimator animator = ObjectAnimator.ofFloat(ll4, View.SCALE_X, 0);    
  animator.start();
 }

• 效果五：同时缩放X轴和Y轴

if (isOpen5) {    
  isOpen5 = false;    
  ObjectAnimator animator = ObjectAnimator.ofFloat(ll5, View.SCALE_X, 1);    
  ObjectAnimator animator1 = ObjectAnimator.ofFloat(ll5, View.SCALE_Y, 1);    
  AnimatorSet animatorSet = new AnimatorSet();    
  animatorSet.playTogether(animator, animator1);    
  animatorSet.start();
 } else {   
   isOpen5 = true;    
  ObjectAnimator animator = ObjectAnimator.ofFloat(ll5, View.SCALE_X, 0);    
  ObjectAnimator animator1 = ObjectAnimator.ofFloat(ll5, View.SCALE_Y, 0);    
  AnimatorSet animatorSet = new AnimatorSet();    
  animatorSet.playTogether(animator, animator1);    
  animatorSet.start();
 }

• 效果六：在效果五的基础是改变了缩放的位置

略

---

后记

属性动画相关知识参考《Android群英传》-徐宜生，最近徐医生又出了一本新书《Android群英传：神兵利器》，准备下月着手入坑了。