Path2.0菜单-Android属性动画

1.效果

展开前后：

效果一：

效果二：

用传统动画实现时，还要考虑控件移动后点击事件的移动，比较麻烦，用属性动画就很简单了。

2.效果一实现

1.布局，采用帧布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageButton
        android:id="@+id/a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:src="@drawable/a"/>
    <ImageButton
        android:id="@+id/b"
        android:background="#fff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/b"/>
    <ImageButton
        android:id="@+id/c"
        android:background="#fff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/c"/>
    <ImageButton
        android:id="@+id/d"
        android:background="#fff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/d"/>
    <ImageButton
        android:id="@+id/e"
        android:background="#fff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/e"/>
    <ImageButton
        android:id="@+id/menu"
        android:background="#fff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/menu"/>
</FrameLayout>

2.java代码：
由于很简单，就不解释了。

 private int[] resImg = {R.id.a,R.id.b,R.id.c,R.id.d,R.id.e,R.id.menu};
    private List<ImageButton> list;
    private boolean flag = true;//展开收拢的标志

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

        list = new ArrayList<ImageButton>();

        for (int i = 0; i < resImg.length; i++) {
            ImageButton ib = (ImageButton)findViewById(resImg[i]);
            ib.setOnClickListener(this);
            list.add(ib);
        }

    }


    @Override
    public void onClick(View v) {
        switch(v.getId()){
            case R.id.menu:
                if(flag){
                    openMenu();
                }else{
                    closeMenu();
                }
                break;
            default:
            Toast.makeText(MainActivity.this,"a",Toast.LENGTH_SHORT).show();
                break;
        }
    }

    //打开菜单
    private void openMenu() {
        for (int i = 0; i < resImg.length-1; i++) {//注意不要menu
            ObjectAnimator a = ObjectAnimator.ofFloat(list.get(i),"translationY",0f,(i+1)*150f);
            a.setDuration(500);
            a.setStartDelay(i*200);//层次感
            a.start();
        }
        flag = false;
    }

    private void closeMenu() {
        for (int i = 0; i < resImg.length-1; i++) {
            ObjectAnimator a = ObjectAnimator.ofFloat(list.get(i),"translationY",(i+1)*150f,0f);
            a.setDuration(500);
            a.setStartDelay(i*200);
            a.start();
        }
        flag = true;
    }

3.效果二实现

布局一样，主要修改动画展开和收拢，要实现效果二，只需X和Y轴同时移动就行了：

 ObjectAnimator.ofFloat(list.get(i), "translationY", 0f, i * 100f).setDuration(500).start();
            ObjectAnimator.ofFloat(list.get(i),"translationX",0f,(resImg.length-2-i)*100f).setDuration(500).start();

4.总结

有了属性动画，实现诸如此类的菜单可以大大的节省空间，前途无量。
源代码