之前的文章都写上csdn上,主要觉得简书是分享文字的地方，最近发现关注我的开发专题人挺多的，就打算把这篇技术文章也发下简书上吧，希望对一些朋友有帮助。
前2篇的地址 http://blog.csdn.net/tiankong1206/article/details/44901601
http://blog.csdn.net/tiankong1206/article/details/44947495
有兴趣也可以去看看。
这篇文章我们来实现个稍微简单点的动画效果
每天在iphone上用淘宝和简书发现他们有个共同的弹出效果(ios自带的？)，今天我们就来看看他们吧
这里写图片描述
这里写图片描述
好吧 我不知道怎么录屏ios手机动态gif
没关系，看我们实现后的效果就可以大概明白了。
这里写图片描述
ok 看完了效果图 我们还是老规矩，首先来简单分析下。
- 首先有2个视图，一个是主内容视图，第二个视图有点类似popopWindow,它默认是不显示的
- 第一个动画，popopWindow从下面弹出的时候，window的动画很简单，就是从下面移动出来显示。主视图的动画也不难，包含x,y比例缩小，半透明，还有一个倾斜的效果
- 第二个动画就很明了，和第一个相反就ok了
分析下来发现挺简单的，就是scale,alpha,translation几个普通动画组合
好了，开始码代码了
首先是布局文件，很简单，里面就2个LinerLayout，各自包含一个按钮。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="@color/black">
//主视图
<LinearLayout
android:id="@+id/first_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">
<Button
android:id="@+id/btn_anim3_show"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="show"/>
</LinearLayout>
//弹出框，默认不显示
<LinearLayout
android:id="@+id/second_view"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@color/blue"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:visibility="invisible">
<Button
android:id="@+id/btn_anim3_hidden"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="hidden"/>
</LinearLayout>
</RelativeLayout>
接下来是第一个动画，弹出框显示时候的动画,都是属性动画常见的动画，没有特别的。
//firstView是主视图,secondView是popopWindow
private void initShowAnim(){
ObjectAnimator fViewScaleXAnim=ObjectAnimator.ofFloat(firstView,"scaleX",1.0f,0.8f);
fViewScaleXAnim.setDuration(350);
ObjectAnimator fViewScaleYAnim=ObjectAnimator.ofFloat(firstView,"scaleY",1.0f,0.8f);
fViewScaleYAnim.setDuration(350);
ObjectAnimator fViewAlphaAnim=ObjectAnimator.ofFloat(firstView,"alpha",1.0f,0.5f);
fViewAlphaAnim.setDuration(350);
ObjectAnimator fViewRotationXAnim = ObjectAnimator.ofFloat(firstView, "rotationX", 0f, 10f);
fViewRotationXAnim.setDuration(200);
ObjectAnimator fViewResumeAnim = ObjectAnimator.ofFloat(firstView, "rotationX", 10f, 0f);
fViewResumeAnim.setDuration(150);
fViewResumeAnim.setStartDelay(200);
ObjectAnimator fViewTransYAnim=ObjectAnimator.ofFloat(firstView,"translationY",0,-0.1f* fHeight);
fViewTransYAnim.setDuration(350);
ObjectAnimator sViewTransYAnim=ObjectAnimator.ofFloat(secondView,"translationY",sHeight,0);
sViewTransYAnim.setDuration(350);
sViewTransYAnim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
secondView.setVisibility(View.VISIBLE);
}
});
showAnim=new AnimatorSet();
showAnim.playTogether(fViewScaleXAnim,fViewRotationXAnim,fViewResumeAnim,fViewTransYAnim,fViewAlphaAnim,fViewScaleYAnim,sViewTransYAnim);
}
第二个动画和第一个动画相反，就不贴代码了 满屏的代码看的不舒服。
好了，大家有兴趣去试试吧。
