Android属性动画应用——菜单以散开的方式弹出

一、前言
Google推出的新方法——android属性动画，让很多大牛和热爱技术的人高兴不已，纷纷发表自己的学习心得、认识以及教程。这里，我是通过在慕课网的相关视频学习中，获得的启发，于是整理了一下，希望与大家分享。
OK，废话不多说，赶快进入主题。
下面先展示一下界面效果：
![点击橘红色的按个按钮之后，会弹出五个小按钮，形成一直角三角形。如果想让它展示扇形或者其他形状的效果的话，我还没有尝试。大家如果有做的话，记得@我哈。]

然后，明确一下我们的目的：
我们的目的，是想让菜单里的子按钮依次散布在菜单按钮的周围，形成直角。因此，各个子按钮的Y值应该是依次减小的，而它们的X值则是依次增加，并且这个动画变化过程是同时进行的。
二、代码
首先，我们先来看XML文件。文件名是activity_main.

    <FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

   <ImageView
       android:id="@+id/img_b"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:padding="20dp"
       android:src="@drawable/presence_away"/>

    <ImageView
        android:id="@+id/img_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:src="@drawable/presence_audio_online"/>
    <ImageView
        android:id="@+id/img_d"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:src="@drawable/presence_busy"/>
    <ImageView
        android:id="@+id/img_e"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:src="@drawable/presence_online"/>
    <ImageView
        android:id="@+id/img_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:src="@drawable/ic_menu_add"/>
</FrameLayout>

内容很简单，一个framlayout布局，然后，将所有的子按钮和菜单按钮叠放在一起。需要注意的是，要将最后显示的图片（也就是所谓的菜单按钮）放在最上面。
然后，咱们再来看一下MainActivity.java。（后面会做解释）

   package com.example.myapplication;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity implements View.OnClickListener{
//数组存放图片ID，通过list进行图片遍历
    private int[] res = {R.id.img_a,R.id.img_b,
                    R.id.img_c,R.id.img_d,R.id.img_e};
    private List<ImageView> list_img = 
                       new ArrayList<ImageView>();
/*
 1.  flag为true，当点击按钮的时候，弹出菜单
 2.  flag为false，当点击按钮的时候，收回菜单
*/                       
    private boolean flag = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        for(int i=0;i<res.length;i++){
            ImageView img = (ImageView)  
                                   findViewById(res[i]);
            img.setOnClickListener(this);
            list_img.add(img);
        }
    }
    @Override
    public void onClick(View view){
        switch (view.getId()){
            case R.id.img_a:
                if(flag){
                    startAnim();  //弹出菜单动画
                }else{
                    closeAnim();  //收回菜单动画
                }
                break;
            default:
//这里只是简单的对弹出按钮的点击响应进行了处理，具体应用时可以进行完善 
  Toast.makeText(MainActivity.this,"click"+view.getId(),
                              Toast.LENGTH_SHORT).show();
                break;
        }
    }

    private void closeAnim(){
        for(int i =1;i<res.length;i++){
//给出一个沿Y轴移动的动画
    ObjectAnimator animator = ObjectAnimator.ofFloat(
list_img.get(i),"translationY",(res.length-i-1)*50f,0f );
//给出一个沿X轴移动的动画 
    ObjectAnimator animator1 = ObjectAnimator.ofFloat(
    list_img.get(i),"translationX",(i-1)*50f,0f );
    //定义属性动画集合的对象
            AnimatorSet animSet = new AnimatorSet();
    //通过with方法，让两个动画同时进行
            animSet.play(animator).with(animator1);
    //设置延迟时间,让菜单内容相继弹出
            animSet.setStartDelay(500);
            animSet.start();
    //然后，设置flag为true，当再次点击的时候，收回菜单
            flag = true;
        }
    }
 //两种方法的内容大体相同，只是动画属性的参数相反
    private void startAnim() {
        for(int i =1;i<res.length;i++){
       ObjectAnimator animator = ObjectAnimator.ofFloat(
       list_img.get(i),"translationY",  
                              0f,(res.length-i-1)*50f );
       ObjectAnimator animator1 = ObjectAnimator.ofFloat(
    list_img.get(i),"translationX", 0f , (i-1)*50f );
            AnimatorSet animSet = new AnimatorSet();
            animSet.play(animator).with(animator1);
            animSet.setStartDelay(500);
            animSet.start();
            flag = false;
        }
    }
}

三、说明
对照上面的代码，进行下面的一些解释：
1、这里解释一下ObjectAnimator对象的参数的含义：
ObjectAnimator animator = ObjectAnimator.ofFloat(
list_img.get(i),”translationY”,
0f,(res.length-i-1)*50f );
第一个是object对象，添加的是我们所要赋予动画效果的对象，
如我们的list_img.get(i)
第二个是动画属性，也就是我们想要的动画效果
之后的就是设置动画属性的参数，跟animation动画参数设置一样。

2、下面说明一下动画属性的参数设置：
再来明确一下我们的目的：我们的目的，是想让菜单里的子按钮依次散布在菜单按钮的周围，形成直角。因此，各个子按钮的Y值应该是依次减小的，而它们的X值则是依次增加，并且这个动画变化过程是同时进行的。 好，下面，我们借助list来进行参数设置。
对于”translationY”，我们让它从Y=0 的地方，依次往外弹出(res.length-i-1)*50f 的距离。50F是我们设置的各个子按钮之间Y轴的距离。i则代表我们加载的图片资源的序号。这里要注意！我们的i是从1开始的。也就是让菜单按钮保持不动，所以，为了让最后一个子按钮的Y值为零，也就是跟屏幕上端平行，我们还要再减一，即我们的乘数因子为(res.length-i-1)。当i=1的时候，第一个子按钮的Y值最大，距离屏幕上端最远，然后，随着i值的增大，子按钮的Y值逐渐减小，距离屏幕上端也越来越近。
同理，对于”translationX”，则是从X=0的地方，依次弹出(i-1)*50f的距离。

2、closeAnim()方法内容跟startAnim()大体相同，只是参数设置上略有区别。收回菜单的是，子按钮的动画轨迹跟弹出的时候是相反的，所以，我们只需要把动画属性的参数调换一下位置即可。如有疑问，请参考代码进行对比。

四、附文
1、对属性动画不熟悉的小伙伴，给大家推荐郭霖大侠的博客http://blog.youkuaiyun.com/guolin_blog/article/details/43536355
里面讲得很详细，可以收藏。我不是做广告的哦，只是资源分享下。
(^o^)/~
2、还有慕课网原版视频网址 http://www.imooc.com/learn/263
如果有说得不到位的地方，大家可以去参考。本人也算是刚刚菜鸟进阶一点点吧，所以大家如有更好的见解，我们也可以共同探讨、相互学习。同时，说明一下，我这里用的是android studio。但是不妨碍的，代码比较少，也很好理解，eclipse也比较容易实现。
3、OK，今天的内容就这些了，有不当的地方，大家多见谅、多沟通，我们共同探讨、相互学习。欢迎大家批评指教~