一步一步实现雷达扫描效果

废话不多说，先看效果。

QQ图片20170708101103.gif

如何现实

代码里面也注释得很清楚。扫描效果就是通过SweepGradient来实现的加上变换Matrix来现实的。

实现步骤：

1.先实现圆环
2.SweepGradient现实扫描渲染
3.用Matrix旋转变换让SweepGradient旋转扫描起来

1.先实现圆环。很简单，应该不用详说。下面就贴代码。

  //圆圈大小的比例
private float[] circleProportion = {1 / 13f, 2 / 13f, 3 / 13f, 4 / 13f, 5 / 13f, 6 / 13f};

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //圆环
        drawCircle(canvas);
    }

    private void drawCircle(Canvas canvas) {
        canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[0], mPaintCircle);
        canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[1], mPaintCircle);
        canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[2], mPaintCircle);
        canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[3], mPaintCircle);
        canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[4], mPaintCircle);
        canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[5], mPaintCircle);
    }

效果是：

1.png

2.SweepGradient现实扫描渲染

不知道SweepGradient可以看一下这篇文章（后面有时间我也写一篇，绝对不是我懒。好吧。我承认我懒）
http://blog.csdn.net/t12x3456/article/details/10473225

         //初始化扫描渲染
                mSweepGradient = new SweepGradient(mWidth / 2, mHeight / 2, new int[]{Color.TRANSPARENT,
                        Color.parseColor("#84B5CA")}, null);
        
            @Override
            protected void onDraw(Canvas canvas) {
                super.onDraw(canvas);
                //画一环环的圆圈
                drawCircle(canvas);
                //画扫描
                drawScan(canvas);
            }
    
            private void drawScan(Canvas canvas) {
                //给画笔设置渲染效果
                mPaintScan.setShader(mSweepGradient);
                canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[4], mPaintScan);
            } 

效果：

2.png

3.用Matrix旋转变换让SweepGradient旋转扫描起来

不懂Matrix可以看这篇博客：
http://www.gcssloop.com/customview/Matrix_Basic

        Matrix matrix = new Matrix();
        int speed = 5;
        private Runnable run = new Runnable() {
            @Override
            public void run() {
                matrix.preRotate(speed,mWidth/2,mHeight/2);
                invalidate();
                postDelayed(run,130);
            }
        };

    private void drawScan(Canvas canvas) {
        //给画笔设置渲染效果
        mPaintScan.setShader(mSweepGradient);
        canvas.concat(matrix);
        canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[4], mPaintScan);
    }

具体代码见：
https://github.com/zsj1225/RadarView

参考：
http://blog.csdn.net/t12x3456/article/details/10473225
http://www.gcssloop.com/customview/Matrix_Basic
http://blog.csdn.net/mr_immortalz/article/details/51319354