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