概述

最近看到支付寶咻咻的頁面就想模仿一下，話不多說，先看效果圖。（錄制的有點渣）

GIF.gif

先說說這個效果：

1.點擊中間圖標(biāo)開始搜索附近的人。
2.開始搜索后水波紋一圈圈的加速向外擴張。
3.搜索到人之后以一個圓圈顯示在水波紋上。

技術(shù)點：

1.要熟悉canvas，paint,，其中canvas的畫圓，畫圖片（主要用于中間圓形圖片的繪制，小圓圈也要用圓形圖片來繪制的，由于偷懶就用藍(lán)圓點了）。
2.水波紋一圈圈的向外擴張，圓圈擴張的半徑計算是利用ValueAnimator來獲取的，其中加速擴張還是減速擴張等等這些效果通過Interpolator插值器來實現(xiàn)的，當(dāng)然也可以自己自定義Interpolator來實現(xiàn)想要的效果。
3.小圓圈是通過自定義viewgroup的onlayout來定位的，這里實現(xiàn)的定位是通過隨機的角度加上隨機的半徑來算出小圓圈所在的坐標(biāo)，當(dāng)然你也可以通過距離的遠(yuǎn)近或者其他來算出小圓圈的坐標(biāo)。

水波紋效果WaveView

需要水波不停的一波波的向外擴張，所以需要不停的創(chuàng)建水波紋，這里利用了Runnable加上postDelayed來不停的創(chuàng)建水波紋。

private Runnable mWaveRunable = new Runnable() {
    @Override
    public void run() {
        if (mIsRuning) {
            newWaveAnimator();
            invalidate();
            postDelayed(mWaveRunable, mSpeed);
        }
    }
};

 private ValueAnimator newWaveAnimator() {
        final ValueAnimator mWaveAnimator = new ValueAnimator();
        mWaveAnimator.setFloatValues(mMiniRadius, mMaxRadius);
        mWaveAnimator.setDuration(mWaveDuration);
        mWaveAnimator.setRepeatCount(0);
        mWaveAnimator.setInterpolator(mInterpolator);
        mWaveAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
//                (Float) animation.getAnimatedValue();
            }
        });
        mAnimatorList.add(mWaveAnimator);
        mWaveAnimator.start();
        return mWaveAnimator;
    }

繪制的時候遍歷所有的水波紋，然后根據(jù)AnimatedValue來獲取透明度和半徑，當(dāng)半徑達到最大半徑的時候刪除水波紋，最后就是繪制中間的圖標(biāo)，然后每隔10ms的重新繪制水波紋（貌似10ms是屬性動畫的幀間隔時間）

@Override
protected void onDraw(Canvas canvas){
    Iterator<ValueAnimator> iterator = mAnimatorList.iterator();
    while (iterator.hasNext()){
        ValueAnimator valueAnimator = iterator.next();
        Log.e("AnimatedValue",(float)valueAnimator.getAnimatedValue() + "mMaxRadius:" + mMaxRadius);
        if (!valueAnimator.getAnimatedValue().equals(mMaxRadius)){
            //設(shè)置透明度
            mWavePaint.setAlpha(getAlpha((Float) valueAnimator.getAnimatedValue()));
            //畫水波紋
            canvas.drawCircle(getMeasuredWidth() / 2,getMeasuredHeight() / 2, (Float) valueAnimator.getAnimatedValue(),mWavePaint);
        }else{
            valueAnimator.cancel();
            iterator.remove();
        }
    }
    //繪制中間圖標(biāo)
    drawCenterBitmap(canvas);
    if (mAnimatorList.size() > 0){
        postInvalidateDelayed(10);
    }
}

點擊中間圖標(biāo)開啟水波紋，是通過onTouchEvent來判斷是否點擊了中間的圖標(biāo)，如果點擊了中間圖標(biāo)，水波紋又沒開啟的話，開啟水波紋。

//中間圖標(biāo)區(qū)域
private Rect mCenterBitmapArea = new Rect();
//是否開啟水波紋
private boolean mIsRuning = false;
//是否點擊了中間圖標(biāo)
private boolean mIsCenterClick = false;

@Override
public boolean onTouchEvent(MotionEvent event){
    switch (event.getActionMasked()){
        case MotionEvent.ACTION_DOWN:
            //當(dāng)按鈕只有在圖片即按鈕區(qū)域內(nèi)則認(rèn)定為點擊，其他不作點擊
            mIsCenterClick = false;
            if (mCenterBitmapArea.contains((int)event.getX(),(int)event.getY())){
                mIsCenterClick = true;
            }
            break;
        case MotionEvent.ACTION_CANCEL:
            break;
        case MotionEvent.ACTION_MOVE:
            break;
        case MotionEvent.ACTION_UP:
            if (mIsCenterClick && !mIsRuning){
                //當(dāng)點擊了按鈕，啟動水波紋
               start();
            }
            break;
    }
    return true;
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    mMaxRadius = Math.min(w, h) / 2;
    //計算中間圖標(biāo)區(qū)域
    mCenterBitmapArea.set((w - mCenterBitmap.getWidth()) / 2,(h - mCenterBitmap.getHeight()) / 2
            ,(w + mCenterBitmap.getWidth()) / 2,(h + mCenterBitmap.getHeight()) / 2);
}

小圓圈WaveCircleView

小圓圈主要是記錄x，y的坐標(biāo)和畫一個藍(lán)色的圓圈。

public class WaveCircleView extends View {
    //圓圈畫筆
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    //圓圈顏色
    private int mColor = Color.BLUE;
    //圓圈半徑
    private float radius = DisplayUtils.dp2px(getContext(),10);
    //在wavelayout的角度
    private int layoutX;
    //在wavelayout的半徑
    private int layoutY;

    public WaveCircleView(Context context) {
        this(context,null);
    }

    public WaveCircleView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public WaveCircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint.setColor(mColor);
        mPaint.setDither(true);
        mPaint.setStyle(Paint.Style.FILL);
    }

    public int getLayoutX() {
        return layoutX;
    }

    public void setLayoutX(int layoutX) {
        this.layoutX = layoutX;
    }

    public int getLayoutY() {
        return layoutY;
    }

    public void setLayoutY(int layoutY) {
        this.layoutY = layoutY;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(measureSize(widthMeasureSpec), measureSize(heightMeasureSpec));
    }

    //測量圓圈寬高
    private int measureSize(int measureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = DisplayUtils.dp2px(getContext(),radius * 2);
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawCircle(radius, radius, radius, mPaint);
    }
}

WaveLayout

通過onlayout方法來定位水波紋和小圓圈的位置，首先吧水波紋全屏顯示，然后根據(jù)隨機角度和隨機半徑一個一個的定位小圓圈的位置。

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    float miniCircleRadius = 0;
    //設(shè)置水波紋位置
    waveView.layout(0, 0, getMeasuredWidth(), getMeasuredHeight());
    miniCircleRadius = waveView.getMiniRadius();
    int childCount = getChildCount();
    //設(shè)置circleview
    for (int i = 0; i < childCount; i++) {
        final View child = getChildAt(i);
        //如果不是Circleview跳過
        if (!(child instanceof WaveCircleView)) {
            continue;
        }
        WaveCircleView waveCircleView = (WaveCircleView) child;
        if (waveCircleView.getLayoutX() == 0 && waveCircleView.getLayoutY() == 0) {
            //隨機獲取角度
            double angle = Math.random() * 360;
            //隨機獲取半徑，最小半徑不能小于WaveView的最小波紋半徑
            double radians = miniCircleRadius + waveCircleView.getMeasuredWidth() / 2 +
 Math.random() * (mWidth / 2 - miniCircleRadius - waveCircleView.getMeasuredWidth() / 2);
            //獲取WaveCircleView的x坐標(biāo)
            double x = getMeasuredWidth() / 2 + Math.sin(Math.toRadians(angle)) * radians;
            //獲取WaveCircleView的y坐標(biāo)
            double y = getMeasuredHeight() / 2 + Math.cos(Math.toRadians(angle)) * radians;
            waveCircleView.setLayoutX((int) x);
            waveCircleView.setLayoutY((int) y);
        }
        waveCircleView.layout(waveCircleView.getLayoutX(),waveCircleView.getLayoutY(),waveCircleView.getLayoutX() + waveCircleView.getMeasuredWidth(),waveCircleView.getLayoutY() + waveCircleView.getMeasuredHeight());
    }
}

github下載地址：https://github.com/PeachBlossom/jiujiuwave