其實實現(xiàn)動畫效果是非常簡單的，下面就使用ObjectAnimator來實現(xiàn)一個點擊按鈕向下展開菜單項的動畫蛾娶。

制作布局文件

首先我們要把我們的圖片素材全部放到到一個幀布局中灯谣，將菜單鍵放在最上面。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="match_parent">
    <ImageView
        android:id="@+id/imageView_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/b"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        />

    <ImageView
        android:id="@+id/imageView_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/c"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        />

    <ImageView
        android:id="@+id/imageView_d"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/d"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        />

    <ImageView
        android:id="@+id/imageView_e"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/e"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        />

    <ImageView
        android:id="@+id/imageView_f"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/f"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        />

    <ImageView
        android:id="@+id/imageView_g"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/g"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        />
    <ImageView
        android:id="@+id/imageView_h"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/h"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        />
    <ImageView
        android:id="@+id/imageView_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/a"
        android:paddingLeft="2dp"
        android:paddingTop="2dp"
        />
</FrameLayout>

那么接下來要做的就是把這幾個菜單項目b~h依次展開蛔琅。

制作動畫

接下來就要分別用一個int數(shù)組來保存我們的圖片id胎许，和一個list保存我們的imageview，在onCreate方法中用for循環(huán)將id與view對象依次關(guān)聯(lián)起來罗售。給觸發(fā)按鈕注冊監(jiān)聽事件辜窑。然后調(diào)用startAnim 方法。

private void startAnim()
    {
        for (int i = 1; i < resId.length ; i++)
        {
            ObjectAnimator animator=ObjectAnimator.ofFloat(imageViewList.get(i),"translationY",0F,i*150);
            animator.setDuration(500);
            animator.setStartDelay(i*300);
            animator.setInterpolator(new BounceInterpolator());
            animator.start();
        }
        flag=false;
    }

這里的flag時標志你展開還是關(guān)閉寨躁，如果為false谬擦，調(diào)用closeAnim 方法

private void closeAnim()
    {
        for (int i = resId.length-1; i >0 ; i--)
        {
            ObjectAnimator animator=ObjectAnimator.ofFloat(imageViewList.get(i),"translationY",i*150,0F);
            animator.setDuration(500);
            animator.setStartDelay(i*300);
            animator.setInterpolator(new BounceInterpolator());


            animator.start();
        }
    }

效果如下：

這里寫圖片描述

這里寫圖片描述