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下载；