Android Ripple 按鈕水波紋效果（一）

標籤：動畫   android   按鈕   

看到android 5.0有一個按鈕點擊效果非常棒，先來看：

但是這種效果只能在5.0的系統上有效果，如何在低版本上實現呢？
這種效果網上也有人實現了，
blog 地址http://blog.csdn.net/singwhatiwanna/article/details/42614953

ok，直接進入主題，
要實現這種動畫效果也不難，原理可以用一句話概括：就是，在我們按下view的時候，從按下的位置開始繪製圓，圓的半徑一直增大，直至把View全部覆蓋掉。

通過實現原理我們可以分析出，要實現這種效果，需要重寫onDraw方法，onTouchEvent方法，如果有必要還需要通過onMeasure方法來擷取View的size

1、onDraw方法，就是不斷的繪製圓，這裡需要迴圈調用，
2、onTouchEvent方法：通過MotionEvent.ACTION_DOWN和MotionEvent.ACTION_UP做相應的操作並觸發onDraw方法
3、onMeasure計算View的size，通過size加上MotionEvent.ACTION_DOWN起始點計算出圓的最大半徑

代碼實現：
儲存view的大小，用於計算繪製 圓的最大半徑

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {   super.onMeasure(widthMeasureSpec, heightMeasureSpec);   mRect.set(0, 0, getMeasuredWidth(), getMeasuredHeight());}

手指按下view的時候，計算按下點的位置，並觸發onDraw方法

public boolean onTouchEvent(MotionEvent event) {        final int action = MotionEventCompat.getActionMasked(event);        switch (action) {            case MotionEvent.ACTION_DOWN: {                mDrawFinish = false;                int index = MotionEventCompat.getActionIndex(event);                int eventId = MotionEventCompat.getPointerId(event, index);                if (eventId != -1) {                    mInitX = (int) MotionEventCompat.getX(event, index);                    mInitY = (int) MotionEventCompat.getY(event, index);                    updateDrawData();                    ViewCompat.postInvalidateOnAnimation(this);                }                return true;            }

更新資料，重新計算圓的半徑和步長

private void updateDrawData() {        int radiusLeftTop = (int) Math.sqrt((mRect.left - mInitX) * (mRect.left - mInitX) +                (mRect.top - mInitY) * (mRect.top - mInitY));        int radiusRightTop = (int) Math.sqrt((mRect.right - mInitX) * (mRect.right - mInitX) +                (mRect.top - mInitY) * (mRect.top - mInitY));        int radiusLeftBottom = (int) Math.sqrt((mRect.left - mInitX) * (mRect.left - mInitX) +                (mRect.bottom - mInitY) * (mRect.bottom - mInitY));        int radiusRightBottom = (int) Math.sqrt((mRect.right - mInitX) * (mRect.right - mInitX) +                (mRect.bottom - mInitY) * (mRect.bottom - mInitY));        mRadius = getMax(radiusLeftTop, radiusRightTop, radiusLeftBottom, radiusRightBottom);        mStep = mRadius/mCycle;    }

手指抬起的時候需要做的操做，把步長加大2.5倍，加快圓的繪製

 @Override    public boolean onTouchEvent(MotionEvent event) {        final int action = MotionEventCompat.getActionMasked(event);        switch (action) {        //..            case MotionEvent.ACTION_CANCEL:            case MotionEvent.ACTION_UP:                mStep = (int) (2.5f * mStep);                mDrawBack = true ;                break;        }        return super.onTouchEvent(event);    }

最後就是繪製圓了，這裡需要做判斷，如果當前繪製的圓半徑沒有達到我們計算的最大半徑，需要繼續繪製

@Override    protected void onDraw(Canvas canvas) {        if (mDrawFinish) {            super.onDraw(canvas);            return;        }        canvas.drawColor(0x08000000);        super.onDraw(canvas);        if (mStep == 0) {            return;        }        mDrawRadius = mDrawRadius + mStep;        if (mDrawRadius > mRadius) {            mDrawRadius = 0;            canvas.drawCircle(mInitX, mInitY, mRadius, mRevealPaint);            mDrawFinish = true;            ViewCompat.postInvalidateOnAnimation(this);            return;        }        canvas.drawCircle(mInitX, mInitY, mDrawRadius, mRevealPaint);        ViewCompat.postInvalidateOnAnimation(this);    }

整個效果的實現，相對比較簡單，只是很無聊的一直繪圓。
最後要說明一點，如果你想對TextView做這種效果，則繼承TextView即可，LinearLayout等其他組件同理；

demo下載

Android Ripple 按鈕水波紋效果（一）