Android 仿淘寶商品屬性動畫

原文鏈接：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0422/2773.html

每天在iphone上用淘寶和簡書發現他們有個共同的彈出效果，今天我們就來看看他們吧 
淘寶的效果

  

簡書的效果

好吧 我不知道怎麼錄屏ios手機動態gif 
沒關係，看我們實現後的效果就可以大概明白了。 
 
ok 看完了效果圖 我們還是老規矩，首先來簡單分析下。

• 首先有2個視圖，一個是主內容視圖，第二個視圖有點類似popopWindow,它默認是不顯示的

• 第一個動畫，popopWindow 從下面彈出的時候，window的動畫很簡單，就是從下面移動出來顯示。主視圖的動畫也不難，包含x,y比例縮小，半透明，還有一個傾斜的效果

• 第二個動畫就很明瞭，和第一個相反就ok了

注意這裏的popopWindow其實不是popopWindow，只是一個LinearLayout。

分析下來發現挺簡單的，就是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="#000000">
 
    <LinearLayout
        android:id="@+id/first_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        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="#00B2EE"
        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>

接下來是第一個動畫，彈出框顯示時候的動畫,都是屬性動畫常見的動畫，沒有特別的。

    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);
            }
        });
        AnimatorSet showAnim=new AnimatorSet();
        showAnim.playTogether(fViewScaleXAnim,fViewRotationXAnim,fViewResumeAnim,fViewTransYAnim,fViewAlphaAnim,fViewScaleYAnim,sViewTransYAnim);
        showAnim.start();
    }

第二個動畫和第一個動畫相反，就不貼代碼了 滿屏的代碼看的不舒服。 
好了，大家有興趣去試試吧，有問題可以留言討論。

原文到這裏就結束了，我們把第二個動畫補全：

    private void initHiddenAnim(){
        ObjectAnimator fViewScaleXAnim=ObjectAnimator.ofFloat(firstView,"scaleX",0.8f,1.0f);
        fViewScaleXAnim.setDuration(350);
        ObjectAnimator fViewScaleYAnim=ObjectAnimator.ofFloat(firstView,"scaleY",0.8f,1.0f);
        fViewScaleYAnim.setDuration(350);
        ObjectAnimator fViewAlphaAnim=ObjectAnimator.ofFloat(firstView,"alpha",0.5f,1.0f);
        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.1f* fHeight,0);
        fViewTransYAnim.setDuration(350);
        ObjectAnimator sViewTransYAnim=ObjectAnimator.ofFloat(secondView,"translationY",0,sHeight);
        sViewTransYAnim.setDuration(350);
        sViewTransYAnim.addListener(new AnimatorListenerAdapter() {  
            @Override  
            public void onAnimationEnd(Animator animation) {  
                 super.onAnimationEnd(animation);
                 secondView.setVisibility(View.INVISIBLE);
            }              
        });
        AnimatorSet showAnim=new AnimatorSet();
        showAnim.playTogether(fViewScaleXAnim,fViewRotationXAnim,fViewResumeAnim,fViewTransYAnim,fViewAlphaAnim,fViewScaleYAnim,sViewTransYAnim);
        showAnim.start();
    }

最後我還添加了整個項目的源碼下載：http://pan.baidu.com/s/1mgN1uas 

注意這只是一個演示demo，還有個問題需要處理，就是在第二個佈局顯示的時候，被隱藏在背後的第一個佈局中的按鈕仍然可以點擊，考慮到用戶體驗，在這個時候第一個佈局的按鈕事件應該被屏蔽。