仿新浪微博加号弹出界面动画

在使用新浪微博时，通过点击主界面底部的“+”按钮，会弹出一个包含各种按钮操作的界面。

这个界面的用户体验比较酷炫，如中华万年历等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);
    }

最后附上完整的工程代码下载链接：

http://download.csdn.net/detail/ruancoder/9572570