在使用新浪微博時，通過點選主介面底部的“+”按鈕，會彈出一個包含各種按鈕操作的介面。

這個介面的使用者體驗比較酷炫，如中華萬年曆等app都在使用，首先我們來看一下效果圖。

接下來，我們對該頁面的動畫效果進行分析。

在整個操作流程中，涉及到的動畫如下：

(1).當面板檢視顯示時，按鈕從螢幕底部進入並附帶彈性效果的動畫；

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
           android:duration="250"
           android:fromYDelta="100%"
           android:interpolator="@android:anim/overshoot_interpolator"
           android:toYDelta="0%"/>
 

(2).點選按鈕時，手指按下，按鈕被放大的動畫；

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
       android:duration="150"
       android:fillAfter="true"
       android:fromXScale="1.0"
       android:fromYScale="1.0"
       android:pivotX="50%"
       android:pivotY="50%"
       android:toXScale="1.2"
       android:toYScale="1.2"/>
 

(3).點選按鈕時，手指拿起，按鈕從放大狀態迴歸初始尺寸的動畫；

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
       android:duration="150"
       android:fillAfter="true"
       android:fromXScale="1.2"
       android:fromYScale="1.2"
       android:pivotX="50%"
       android:pivotY="50%"
       android:toXScale="1.0"
       android:toYScale="1.0"/>
 

(4).當面板檢視隱藏時，按鈕從螢幕底部退出的動畫；

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
           android:duration="150"
           android:fromYDelta="0%"
           android:toYDelta="500%"/>

(5).關閉按鈕旋轉的動畫。

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="100"
    android:fillAfter="true"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="90"/>

有了上述動畫xml檔案，我們將其應用到java程式碼中。

(1).初始化動畫。

// 初始化動畫
    private void initAnimation() {
        mButtonInAnimation = AnimationUtils.loadAnimation(this, R.anim.button_in);
        mButtonOutAnimation = AnimationUtils.loadAnimation(this, R.anim.button_out);
        mButtonScaleLargeAnimation = AnimationUtils.loadAnimation(this, R.anim.button_scale_to_large);
        mButtonScaleSmallAnimation = AnimationUtils.loadAnimation(this, R.anim.button_scale_to_small);
        mCloseRotateAnimation = AnimationUtils.loadAnimation(this, R.anim.close_rotate);
    }

(2).打開面板檢視時，啟動按鈕的進入動畫，並未關閉按鈕新增旋轉動畫。

// 打開面板檢視
    private void openPanelView() {
        mPanelView.setVisibility(View.VISIBLE);

        mIdeaButton.startAnimation(mButtonInAnimation);
        mPhotoButton.startAnimation(mButtonInAnimation);
        mWeiboButton.startAnimation(mButtonInAnimation);
        mLbsButton.startAnimation(mButtonInAnimation);
        mReviewButton.startAnimation(mButtonInAnimation);
        mMoreButton.startAnimation(mButtonInAnimation);

        mCloseButton.startAnimation(mCloseRotateAnimation);
    }

(3).給按鈕新增touch事件監聽，根據使用者操作執行放大和縮小的動畫。

@Override
    public boolean onTouch(final View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 手指按下，按鈕執行放大動畫
                v.startAnimation(mButtonScaleLargeAnimation);
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                // 手指移開，按鈕執行縮小動畫
                v.startAnimation(mButtonScaleSmallAnimation);
                v.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        // 縮小動畫執行完畢後，將按鈕的動畫清除。這裡的150毫秒是縮小動畫的執行時間。
                        v.clearAnimation();
                    }
                }, 150);
                break;
        }
        return true;
    }

(4).關閉面板檢視時，啟動按鈕的退出動畫。

// 關閉面板檢視
    private void closePanelView() {
        // 給6個按鈕新增退出動畫
        mIdeaButton.startAnimation(mButtonOutAnimation);
        mPhotoButton.startAnimation(mButtonOutAnimation);
        mWeiboButton.startAnimation(mButtonOutAnimation);
        mLbsButton.startAnimation(mButtonOutAnimation);
        mReviewButton.startAnimation(mButtonOutAnimation);
        mMoreButton.startAnimation(mButtonOutAnimation);
    }

最後附上完整的工程程式碼下載連結：