利用屬性動畫實現優酷菜單

利用屬性動畫實現優酷菜單

佈局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<RelativeLayout
    android:layout_width="280dip"
    android:layout_height="140dip"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/level3"
    android:background="@drawable/level3" >

    <ImageButton
        android:id="@+id/c1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="6dip"
        android:layout_marginLeft="12dip"
        android:background="@drawable/channel1" />

    <ImageButton
        android:id="@+id/c2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/c1"
        android:layout_marginBottom="12dip"
        android:layout_marginLeft="28dip"
        android:background="@drawable/channel2" />

    <ImageButton
        android:id="@+id/c3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/c2"
        android:layout_marginBottom="6dip"
        android:layout_marginLeft="8dip"
        android:layout_toRightOf="@id/c2"
        android:background="@drawable/channel3" />

    <ImageButton
        android:id="@+id/c4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_margin="6dip"
        android:background="@drawable/channel4" />

    <ImageButton
        android:id="@+id/c5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/c6"
        android:layout_marginBottom="6dip"
        android:layout_marginRight="8dip"
        android:layout_toLeftOf="@+id/c6"
        android:background="@drawable/channel5" />

    <ImageButton
        android:id="@+id/c6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/c7"
        android:layout_marginBottom="12dip"
        android:layout_marginRight="28dip"
        android:layout_alignParentRight="true"
        android:background="@drawable/channel6" />


    <ImageButton
        android:id="@+id/c7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="6dip"
        android:layout_marginRight="12dip"
        android:layout_alignParentRight="true"
        android:background="@drawable/channel7" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="180dip"
    android:layout_height="90dip"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/level2"
    android:background="@drawable/level2" >

    <ImageButton
        android:id="@+id/search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="10dip"
        android:background="@drawable/icon_search" />

    <ImageButton
        android:id="@+id/menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_margin="6dip"
        android:background="@drawable/icon_menu" />

    <ImageButton
        android:id="@+id/myyouku"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="10dip"
        android:background="@drawable/icon_myyouku" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="100dip"
    android:layout_height="50dip"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:background="@drawable/level1" >

    <ImageButton
        android:id="@+id/home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/icon_home" />
</RelativeLayout>

</RelativeLayout>

核心代碼

package com.example.uumusic.menu;

import android.content.Context;
import android.view.View;
import android.widget.ImageButton;
import android.widget.RelativeLayout;
import android.widget.Toast;

import com.example.uumusic.R;
import com.example.uumusic.fragment.base.BasePager;
import com.example.uumusic.utils.Tools;

import butterknife.ButterKnife;
import butterknife.InjectView;

/**
 * Created by Administrator on 2017.06.07.0007.
 */

public class YoukuMenu extends BasePager {

@InjectView(R.id.c1)
ImageButton c1;
@InjectView(R.id.c2)
ImageButton c2;
@InjectView(R.id.c3)
ImageButton c3;
@InjectView(R.id.c4)
ImageButton c4;
@InjectView(R.id.c5)
ImageButton c5;
@InjectView(R.id.c6)
ImageButton c6;
@InjectView(R.id.c7)
ImageButton c7;
@InjectView(R.id.level3)
RelativeLayout level3;
@InjectView(R.id.search)
ImageButton search;
@InjectView(R.id.menu)
ImageButton menu;
@InjectView(R.id.myyouku)
ImageButton myyouku;
@InjectView(R.id.level2)
RelativeLayout level2;
@InjectView(R.id.home)
ImageButton home;
private boolean isLeve12 = true;
private boolean isLeve13 = true;

public YoukuMenu(Context context) {
    super(context);
}

@Override
public View initView() {
    View view = View.inflate(mContext, R.layout.fragment_youku, null);
    ButterKnife.inject(this,view);
    return view;
}

@Override
public void initData() {
    //爲按鈕設置點擊事件
    home.setOnClickListener(new MyOnClickLisetner());
    menu.setOnClickListener(new MyOnClickLisetner());

}

class MyOnClickLisetner implements View.OnClickListener{

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.home:
                //當點擊home按鈕時,開始進行動畫的效果
                if (isLeve12){
                    isLeve12 = false;
                    Tools.hide(level2);
                    if (isLeve13){
                        isLeve13 = false;
                        Tools.hide(level3,200);
                    }
                }else {
                    isLeve12 = true;
                    Tools.show(level2);
                }
                break;
            case R.id.menu:

                if (isLeve13){
                    isLeve13 = false;
                    Tools.hide(level3);
                }else {
                    isLeve13 = true;
                    Tools.show(level3);
                }
                break;
        }
    }
}
}

動畫工具類

package com.example.uumusic.utils;

import android.animation.ObjectAnimator;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;

/**
 * Created by Administrator on 2017.06.07.0007.
 */
public class Tools {

//隱藏佈局
public static void hide(ViewGroup view) {
    hide(view, 0);
}

//顯示佈局
public static void show(ViewGroup view) {

    //使用屬性動畫實現菜單的旋轉
    ObjectAnimator animator = ObjectAnimator.ofFloat(view,"rotation",180,360);
    //設置動畫時長
    animator.setDuration(300);
    animator.start();
    view.setPivotX(view.getWidth()/2);
    view.setPivotY(view.getHeight());
}

//延遲隱藏
public static void hide(ViewGroup view, int i) {
    ObjectAnimator animator = ObjectAnimator.ofFloat(view,"rotation",0,180);
    //設置動畫時長
    animator.setDuration(300);
    //設置延遲
    animator.setStartDelay(i);
    animator.start();
    view.setPivotX(view.getWidth()/2);
    view.setPivotY(view.getHeight());
}
}

源碼:http://download.csdn.net/detail/qq_32890771/9864303