Android播放器菜单的显示隐藏动画效果

平时看优酷和一些视频软件，总是很好奇他们的播放按钮的区域是如何做到那种动画的，忽然发现，原来在给View设置Visiable属性的时候可以设置相关的动画，下面是我实现的效果。

整体的思路是这样的，在给View设置好Visiable属性之后，我们可以根据当前View是将要隐藏还是将要显示来设置不同的动画，可以使用translate动画，根据上下左右的位置设置from-to的值即可，下面一张图是代表ViewGroup的进入方向，其中红色是进入，绿色是退出。

根据这个图的关系 我们可以写出如下的八个动画文件：

1.top_in.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="-100%"
    android:toYDelta="0%"
    android:duration="500">
</translate>

2.top_out.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="0%"
    android:toYDelta="-100%"
    android:duration="500">
</translate>

3.bottom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="100%"
    android:toYDelta="0%"
    android:duration="500">
</translate>

4.bottom_out.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="0%"
    android:toYDelta="100%"
    android:duration="500">
</translate>

5.left_in.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="-100%"
    android:toXDelta="0%"
    android:duration="500">
</translate>

6.left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%"
    android:toXDelta="-100%"
    android:duration="500">
</translate>

7.right_in.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="100%"
    android:toXDelta="0%"
    android:duration="500">
</translate>

8.right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%"
    android:toXDelta="100%"
    android:duration="500">
</translate

写好这几个文件之后，我们就可以根据View的状态分别去设置这几个动画就可以了，下面是我自定义的一个PlayerMenuView，分别给他的上下左右控件设置进入退出通话。首先是控件的layout文件

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/top_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentTop="true"
        android:background="#338A8A8A"
        android:visibility="gone">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:text="播放视频的title"
            android:textSize="18sp"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/left_container"
        android:layout_width="50dp"
        android:layout_height="200dp"
        android:orientation="horizontal"
        android:layout_below="@+id/top_container"
        android:layout_above="@+id/bottom_container"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:visibility="gone"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:background="#338A8A8A"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:text="左边"
            android:textSize="18sp"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/right_container"
        android:layout_width="50dp"
        android:layout_height="200dp"
        android:orientation="horizontal"
        android:layout_below="@+id/top_container"
        android:layout_above="@+id/bottom_container"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:visibility="gone"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="#338A8A8A"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:text="右边"
            android:textSize="18sp"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/bottom_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:background="#338A8A8A"
        android:visibility="gone">
        <Button
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/play"
            android:layout_margin="10dp"/>
    </LinearLayout>
</merge>

PlayerMenuView代码：

package com.humorousz.test.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import com.humorousz.test.R;
import com.humorousz.test.utils.AnimUtils;
import com.humorousz.test.utils.UIUtils;

/**
 * Created by Zhangzhiquan on 2016/12/18.
 */

public class PlayerMenuView extends RelativeLayout implements View.OnClickListener {
    private Context mContext;
    private LinearLayout mTopContainer;
    private LinearLayout mBottomContainer;
    private LinearLayout mLeftContainer;
    private LinearLayout mRightContainer;
    private int mVisiable = View.GONE;

    public PlayerMenuView(Context context) {
        this(context,null);
    }

    public PlayerMenuView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public PlayerMenuView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;
        initView();
    }

    private void initView(){
        View rootView = LayoutInflater.from(mContext).inflate(R.layout.layout_play_menu,this);
        mTopContainer = (LinearLayout) rootView.findViewById(R.id.top_container);
        mBottomContainer =(LinearLayout)rootView.findViewById(R.id.bottom_container);
        mLeftContainer = (LinearLayout)rootView.findViewById(R.id.left_container);
        mRightContainer = (LinearLayout)rootView.findViewById(R.id.right_container);
        this.setOnClickListener(this);
        mTopContainer.setOnClickListener(this);
        mBottomContainer.setOnClickListener(this);
        mLeftContainer.setOnClickListener(this);
        mRightContainer.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
       if(v == this){
           onClickMySelf();
           return;
       }
        switch (v.getId()){
            case R.id.top_container:{
                UIUtils.showToast(mContext,"top_container clicked");
                break;
            }
            case R.id.bottom_container:{
                UIUtils.showToast(mContext,"bottom_container clicked");
                break;
            }
            case R.id.left_container:{
                UIUtils.showToast(mContext,"left_container clicked");
                break;
            }
            case R.id.right_container:{
                UIUtils.showToast(mContext,"right_container clicked");
                break;
            }
        }
    }

    private void onClickMySelf(){
        setVisiable();
        setContainerVisiable();
        if(mVisiable == View.GONE){
           setOutAnim();
        }else{
            setInAnim();
        }
    }
    private void setVisiable(){
        mVisiable = mVisiable == View.GONE?View.VISIBLE:View.GONE;
    }
    private void setContainerVisiable(){
        mTopContainer.setVisibility(mVisiable);
        mBottomContainer.setVisibility(mVisiable);
        mLeftContainer.setVisibility(mVisiable);
        mRightContainer.setVisibility(mVisiable);
    }
    private void setOutAnim(){
        mTopContainer.setAnimation(AnimUtils.getTopOutAnim(mContext));
        mBottomContainer.setAnimation(AnimUtils.getBottomOutAnim(mContext));
        mLeftContainer.setAnimation(AnimUtils.getLeftOutAnim(mContext));
        mRightContainer.setAnimation(AnimUtils.getRightOutAnim(mContext));
    }

    private void setInAnim(){
        mTopContainer.setAnimation(AnimUtils.getTopInAnim(mContext));
        mBottomContainer.setAnimation(AnimUtils.getBottomInAnim(mContext));
        mLeftContainer.setAnimation(AnimUtils.getLeftInAnim(mContext));
        mRightContainer.setAnimation(AnimUtils.getRightInAnim(mContext));
    }
}

其中使用到的两个Utils类

package com.humorousz.test.utils;

import android.content.Context;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;

import com.humorousz.test.R;

/**
 * Created by Zhangzhiquan on 2016/12/18.
 */

public class AnimUtils {
    public static Animation getTopInAnim(Context context){
        Animation animation = AnimationUtils.loadAnimation(context, R.anim.top_in);
        return  animation;
    }
    public static Animation getTopOutAnim(Context context){
        Animation animation = AnimationUtils.loadAnimation(context, R.anim.top_out);
        return  animation;
    }
    public static Animation getBottomInAnim(Context context){
        Animation animation = AnimationUtils.loadAnimation(context, R.anim.bottom_in);
        return  animation;
    }
    public static Animation getBottomOutAnim(Context context){
        Animation animation = AnimationUtils.loadAnimation(context, R.anim.bottom_out);
        return  animation;
    }
    public static Animation getLeftInAnim(Context context){
        Animation animation = AnimationUtils.loadAnimation(context, R.anim.left_in);
        return animation;
    }
    public static Animation getLeftOutAnim(Context context){
        Animation animation = AnimationUtils.loadAnimation(context, R.anim.left_out);
        return animation;
    }
    public static Animation getRightInAnim(Context context){
        Animation animation = AnimationUtils.loadAnimation(context, R.anim.right_in);
        return animation;
    }
    public static Animation getRightOutAnim(Context context){
        Animation animation = AnimationUtils.loadAnimation(context, R.anim.right_out);
        return animation;
    }
}

package com.humorousz.test.utils;

import android.content.Context;
import android.widget.Toast;

/**
 * Created by Zhangzhiquan on 2016/12/18.
 */

public class UIUtils {
    public static void showToast(Context context, String msg){
        showToast(context,msg,false);
    }
    public static void showToast(Context context,String msg,boolean isLong){
        Toast.makeText(context,msg,isLong?Toast.LENGTH_LONG:Toast.LENGTH_SHORT).show();
    }
}

其实这个效果还是很好实现的，就是有些时候我没有思路或者不了解其中的道理，就会让我有对实现这种东西的一种恐惧感，觉得这个好难。