Android 动画（二） 实战演示——仿网易新闻安卓端菜单栏动画

欢迎转载，转载请注明出处：
http://blog.csdn.net/u010181592
经过上一篇博客 的动画基础知识积累，这次来实战一下，模仿网易新闻 安卓客户端右上角菜单栏出现的动画，效果是这样的；

分析：点击菜单按钮后，显示一层布局，布局出现有动画效果，缩放+透明度渐变；
接着按钮出现 按钮出现动画效果 从小扩大，大于目标大小，然后缩小到正常大小；
按钮出现有时序性；最开始以为是顺序播放 A动画完成后出现B 但测试后发现 应该是 A动画开始 后一会（在完成之前）B动画开始；
效果是菜单栏，其实完全可以自己写一个标题栏，右边就爱自定义按钮就可实现；
动画代码：
背景：xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:shareInterpolator="true">
<scale
    android:duration="300"
    android:fromXScale="1"
    android:fromYScale="1.1"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1"
    android:toYScale="1" />
<alpha
    android:duration="300"
    android:fromAlpha="0.5"
    android:toAlpha="1.0" />
</set>

<scale>从110%缩小至100%，从中心位置开始，持续时间 0.3S
<alpha>从50%增加透明度至100% 持续时间0.3S
java

Animation animation = AnimationUtils.loadAnimation(this,R.anim.menu_anim);
    animation.setAnimationListener(new Animation.AnimationListener() {
        @Override
         public void onAnimationStart(Animation animation) {
         showBtn(count);
         }
        @Override
        public void onAnimationEnd(Animation animation) {`

        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
    rl_menu.startAnimation(animation);

按钮：xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:shareInterpolator="true" >
<scale
    android:duration="300"
    android:fromXScale="0"
    android:fromYScale="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1"
    android:toYScale="1" />
<alpha
    android:duration="300"
    android:fromAlpha="1.0"
    android:toAlpha="1.0" />
</set>

<scale>从0放大至100%，透明度不变 持续300S；
java

public void showBtn(final int count) {
    Animation animation = AnimationUtils.loadAnimation(this,
            R.anim.btn_anim);
    OvershootInterpolator overshootInterpolator = new OvershootInterpolator(4f);

    animation.setInterpolator(overshootInterpolator);//设置补间器 
    animation.setStartOffset(count*50);//设置动画启动延时
    animation.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
            showBtn(count + 1);
        }

        @Override
        public void onAnimationEnd(Animation animation) {

        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
    switch (count) {
        case 1:
            icon1.setVisibility(View.VISIBLE);
            icon1.startAnimation(animation);
            break;
        case 2:
            icon2.setVisibility(View.VISIBLE);
            icon2.startAnimation(animation);
            break;
        case 3:
            icon3.setVisibility(View.VISIBLE);
            icon3.startAnimation(animation);
            break;
        case 4:
            icon4.setVisibility(View.VISIBLE);
            icon4.startAnimation(animation);
            break;
        case 5:
            icon5.setVisibility(View.VISIBLE);
            icon5.startAnimation(animation);
            break;
        case 6:
            icon6.setVisibility(View.VISIBLE);
            icon6.startAnimation(animation);
            break;
    }
}

根据逻辑 当背景出现50ms（动画尚未执行完毕）时 第一个按钮开始显示动画；100ms后第二个开始…以此类推；
关于界面布局背景；

<RelativeLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
    android:id="@+id/ll_top"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#6688cc">
    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
    <ImageButton
        android:id="@+id/ibtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/list_collect_more_n"
        android:background="@null"
        android:layout_gravity="center_vertical"/>
</LinearLayout>

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:layout_below ="@+id/ll_top"/>
<RelativeLayout
    android:id="@+id/rl_menu"
    android:layout_width="match_parent"
    android:layout_height="500dp"
    android:layout_below="@+id/ll_top"
    android:background="#dddddddd"
    android:gravity="center"
    android:layout_marginTop="-10dp"
    >


    <GridLayout
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="200dp"
        android:rowCount="2"
        android:columnCount="3">

        <ImageButton
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:id="@+id/button"
            android:src="@drawable/ic_share_qq"
            android:layout_margin="10dp"/>

        <ImageButton
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_margin="10dp"
            android:src="@drawable/ic_share_qqzone"
            android:id="@+id/button2"
            />

        <ImageButton
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_margin="10dp"
            android:src="@drawable/ic_share_weibo"
            android:id="@+id/button3"
            />
        <ImageButton
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_margin="10dp"
            android:src="@drawable/ic_share_qq"
            android:id="@+id/button4"
            />
        <ImageButton
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_margin="10dp"
            android:src="@drawable/ic_share_weixin"
            android:id="@+id/button5"
            />
        <ImageButton
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_margin="10dp"
            android:src="@drawable/ic_share_email_unavailable"
            android:id="@+id/button6"
            />
    </GridLayout>
</RelativeLayout>
</RelativeLayout>

关于内个菜单的箭头效果，只需要给RelativeLayout背景设置一个有箭头的图，然后将RelativeLayout上移一定距离即可实现;
效果

DEMO下载；