玩玩微信雷达扫描布局

先来看下效果图吧：

代码如下:
public class MyRadar extends View {
Paint mEmptyFCirclePaint;//圆圆
Paint mGradientCirclepaint;//渐变的圆圆
int w, h;//屏幕宽和高
float degree = 0;//角度
Matrix matrix;
Handler mHandler = new Handler();
private Runnable run = new Runnable() {
@Override
public void run() {
matrix.setRotate(++degree, w / 2, h / 2);
MyRadar.this.invalidate();
mHandler.postDelayed(run, 30);
}
};

public MyRadar(Context context, AttributeSet attrs) {
    super(context, attrs);
    setBackgroundResource(R.drawable.star);
    initPaint();
    //获取当前屏幕的宽和高
    w = context.getResources().getDisplayMetrics().widthPixels;
    h = context.getResources().getDisplayMetrics().heightPixels;
    matrix = new Matrix();
    mHandler.post(run);
    // Log.i("1111111",String.valueOf(w));   720
    // Log.i("1111111",String.valueOf(h));   1280
}

private void initPaint() {

    mEmptyFCirclePaint = new Paint();
    mEmptyFCirclePaint.setAntiAlias(true);
    mEmptyFCirclePaint.setColor(Color.parseColor("#A1A1A1"));
    mEmptyFCirclePaint.setStyle(Paint.Style.STROKE);
    mEmptyFCirclePaint.setStrokeWidth(3);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //画四个圆，一共有四个参数，前二个分别为圆心的横纵坐标，第三个是半径，第四个是画笔
    canvas.drawCircle(w / 2, h / 2, w / 6, mEmptyFCirclePaint);
    canvas.drawCircle(w / 2, h / 2, w / 3, mEmptyFCirclePaint);
    canvas.drawCircle(w / 2, h / 2, w / 20 * 11, mEmptyFCirclePaint);
    canvas.drawCircle(w / 2, h / 2, 7 * h / 16, mEmptyFCirclePaint);

    //渐变效果的圆圆
    SweepGradient gradient = new SweepGradient(w / 2, h / 2, Color.TRANSPARENT, Color.parseColor("#AAAAAAAA"));

    mGradientCirclepaint = new Paint();
    mGradientCirclepaint.setAntiAlias(true);
    mGradientCirclepaint.setColor(Color.parseColor("#A1A1A1"));
    mGradientCirclepaint.setStyle(Paint.Style.FILL);
    mGradientCirclepaint.setShader(gradient);
   //concat()必须先调用于drawCircle(),否则效果不会出来
    canvas.concat(matrix);
    canvas.drawCircle(w / 2, h / 2, 7 * h / 16, mGradientCirclepaint);
    //reset()可以重新设置matrix的值，否则速度回越转越快
    matrix.reset();

 //当按下屏幕时实现波浪效果
    if (waves != null && waves.keySet().size() > 0) {
        for (String n : waves.keySet()) {
            if (waves.get(n) != null) {
                canvas.drawCircle(waves.get(n).cx, waves.get(n).cy, waves.get(n).currentRadius, waves.get(n).mPaint);
            }
        }

    }

}
//触摸

@Override
public boolean onTouchEvent(MotionEvent event) {

    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        //波浪效果
        launchingWave();
    }
    return super.onTouchEvent(event);
}

private Map<String, Wave> waves;

private void launchingWave() {
    if (waves == null) {
        waves = new HashMap<>();
        final Wave temp = new Wave(w / 2, h / 2, 0, 0, 7 * h / 16, Color.parseColor("#22ffffff"));
        final String tag = String.valueOf(System.currentTimeMillis());
        waves.put(tag, temp);
        Runnable mRun = new Runnable() {
            @Override
            public void run() {
                if (temp.currentRadius < temp.maxRadius) {
                    temp.currentRadius += 10;
                    int diff = temp.maxRadius - temp.startRadius;
                    temp.mPaint.setAlpha((temp.maxRadius - temp.currentRadius) * 60 / diff);
                    mHandler.postDelayed(this, 3);
                } else {
                    waves.put(tag, null);
                }
            }
        };
        mRun.run();
    }
}

}

Wave的代码如下:

public class Wave {

    public Wave(int cx, int cy, int currentRadius, int startRadius, int maxRadius,int currentColor) {
        this.cx = cx;
        this.cy = cy;
        this.currentRadius = currentRadius;
        this.startRadius = startRadius;
        this.maxRadius = maxRadius;
        this.currentColor  = currentColor;
        mPaint= new Paint();

        mPaint.setAntiAlias(true);
        mPaint.setColor(currentColor);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(3);
    }

   public int cx,cy;
    public int currentRadius;
    public int startRadius,maxRadius;
    public Paint mPaint  ;
    public int currentColor;
}

经过测试，点一下屏幕波浪会出现，点第二次就没有了，看了几遍代码实在没找出Bug在哪。还望读者给予指导。对了。CSDN博客怎么上传Gif效果图呢。谢谢！