Android 雷達掃描動畫效果實現

在新浪微博上有一個雷達功能，感覺類似於微信附近的人。只是多了一個類似於雷達掃描效果的動畫，某些知名安全軟件也有這樣的雷達效果，因此在這裏學習一下。

首先看一下效果圖，有個整體的印象

好了，爲了便於理解，這裏就按照動畫所見內容依次展開來說

準備

這裏決定採用canvas（畫布）和paint（畫筆）實現了這個簡單動畫控件。

由圖片可以看到有兩條交叉的十字線、幾個圓圈和一些白點，那麼首先定義一下所需的畫筆，畫布及一些數據

        setBackgroundColor(Color.TRANSPARENT);


        //寬度=5，抗鋸齒，描邊效果的白色畫筆
        mPaintLine = new Paint();
        mPaintLine.setStrokeWidth(5);
        mPaintLine.setAntiAlias(true);
        mPaintLine.setStyle(Style.STROKE);
        mPaintLine.setColor(Color.WHITE);

        //寬度=5，抗鋸齒，描邊效果的淺綠色畫筆
        mPaintCircle = new Paint();
        mPaintCircle.setStrokeWidth(5);
        mPaintCircle.setAntiAlias(true);
        mPaintCircle.setStyle(Style.FILL);
        mPaintCircle.setColor(0x99000000);

        //暗綠色的畫筆
        mPaintSector = new Paint();
        mPaintSector.setColor(0x9D00ff00);
        mPaintSector.setAntiAlias(true);
        //定義一個暗綠色的梯度渲染
        mShader = new SweepGradient(viewSize / 2, viewSize / 2, Color.TRANSPARENT, Color.GREEN);
        mPaintSector.setShader(mShader);

        //白色實心畫筆
        mPaintPoint=new Paint();
        mPaintPoint.setColor(Color.WHITE);
        mPaintPoint.setStyle(Style.FILL);

        //隨機生成一些數組點，模擬雷達掃描結果
        point_x = UtilTools.Getrandomarray(15, 300);
        point_y = UtilTools.Getrandomarray(15, 300);

這裏說一下這個SweepGradient

SweepGradient的構造函數：

public SweepGradient(float cx, float cy, int[] colors, float[] positions)

public SweepGradient(float cx, float cy, int color0, int color1)

其中cx,cy 指定圓心, color1,color0 或 colors 指定漸變的顏色 ，對於使用多於兩種顏色時，還可以通過positions 指定每種顏色的相對位置，positions 設爲NULL時表示顏色均勻分佈。

繪製基本圖形

        canvas.drawCircle(viewSize / 2, viewSize / 2, 350, mPaintCircle);
        canvas.drawCircle(viewSize / 2, viewSize / 2, 255, mPaintLine);
        canvas.drawCircle(viewSize / 2, viewSize / 2, 125, mPaintLine);
        canvas.drawCircle(viewSize / 2, viewSize / 2, 350, mPaintLine);
        //繪製兩條十字線
        canvas.drawLine(viewSize / 2, 0, viewSize / 2, viewSize, mPaintLine);
        canvas.drawLine(0, viewSize / 2, viewSize, viewSize / 2, mPaintLine);

這樣就繪製除了整個UI,接下來就上動畫，就可以實現整體的效果。

動畫實現

這裏實現動畫的時候，用到了Matrix這個東西，也就是矩陣。上學的時候，線性代數老師講各種線性變換時，腦子裏在想，這玩意是幹嘛使得，現在總算是遇上了，現在看起來也是雲裏霧裏。總的來說就是可以使用Matrix實現強大的圖形動畫，包括位移、旋轉、縮放及透明變化等效果，有着一系列的setTranslate,setRotate,setScale等方法。很方便的實現圖形各種變換。

對Matrix有興趣的同學可以深入研究一下，這篇博客對此講的很仔細（估計是學霸寫的）。

    protected class ScanThread extends Thread {

        private RadarView view;

        public ScanThread(RadarView view) {
            // TODO Auto-generated constructor stub
            this.view = view;
        }

        @Override
        public void run() {
            // TODO Auto-generated method stub
            while (threadRunning) {
                if (isstart) {
                    view.post(new Runnable() {
                        public void run() {
                            start = start + 1;
                            matrix = new Matrix();
                            //設定旋轉角度,制定進行轉轉操作的圓心
//                          matrix.postRotate(start, viewSize / 2, viewSize / 2);
//                          matrix.setRotate(start,viewSize/2,viewSize/2);
                            matrix.preRotate(direction*start,viewSize/2,viewSize/2);
                            view.invalidate();


                        }
                    });
                    try {
                        Thread.sleep(5);
                    } catch (InterruptedException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }
                }
            }
        }
    }

首先，這裏在一個獨立線程中不斷的對start做累加，作爲旋轉角度。然後將其和matrix關聯。這裏嘗試使用了matrix的三個方法，暫時沒有發現區別。

接下來在onDraw方法中不斷繪製圖形即可

        //根據matrix中設定角度，不斷繪製shader,呈現出一種扇形掃描效果
        canvas.concat(matrix);
        canvas.drawCircle(viewSize / 2, viewSize / 2, 350, mPaintSector);

最終實現

好了，最終整體的代碼如下：

public class RadarView extends FrameLayout {

    private Context mContext;
    private int viewSize = 800;
    private Paint mPaintLine;
    private Paint mPaintCircle;
    private Paint mPaintSector;
    public boolean isstart = false;
    private ScanThread mThread;
    private Paint mPaintPoint;
    //旋轉效果起始角度
    private int start = 0;

    private int[] point_x;
    private int[] point_y;

    private Shader mShader;

    private Matrix matrix;


    public final static int CLOCK_WISE=1;
    public final static int ANTI_CLOCK_WISE=-1;

    @IntDef({ CLOCK_WISE, ANTI_CLOCK_WISE })
    public @interface RADAR_DIRECTION {

    }
    //默認爲順時針呢
    private final static int DEFAULT_DIERCTION=CLOCK_WISE;



    //設定雷達掃描方向
    private int direction=DEFAULT_DIERCTION;

    private boolean threadRunning = true;

    public RadarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        mContext = context;
        initPaint();
    }

    public RadarView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        mContext = context;
        initPaint();

    }

    private void initPaint() {
        // TODO Auto-generated method stub
        setBackgroundColor(Color.TRANSPARENT);


        //寬度=5，抗鋸齒，描邊效果的白色畫筆
        mPaintLine = new Paint();
        mPaintLine.setStrokeWidth(5);
        mPaintLine.setAntiAlias(true);
        mPaintLine.setStyle(Style.STROKE);
        mPaintLine.setColor(Color.WHITE);

        //寬度=5，抗鋸齒，描邊效果的淺綠色畫筆
        mPaintCircle = new Paint();
        mPaintCircle.setStrokeWidth(5);
        mPaintCircle.setAntiAlias(true);
        mPaintCircle.setStyle(Style.FILL);
        mPaintCircle.setColor(0x99000000);

        //暗綠色的畫筆
        mPaintSector = new Paint();
        mPaintSector.setColor(0x9D00ff00);
        mPaintSector.setAntiAlias(true);
        mShader = new SweepGradient(viewSize / 2, viewSize / 2, Color.TRANSPARENT, Color.GREEN);
        mPaintSector.setShader(mShader);

        //白色實心畫筆
        mPaintPoint=new Paint();
        mPaintPoint.setColor(Color.WHITE);
        mPaintPoint.setStyle(Style.FILL);

        //隨機生成的點，模擬雷達掃描結果
        point_x = UtilTools.Getrandomarray(15, 300);
        point_y = UtilTools.Getrandomarray(15, 300);

    }

    public void setViewSize(int size) {
        this.viewSize = size;
        setMeasuredDimension(viewSize, viewSize);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        setMeasuredDimension(viewSize, viewSize);
    }

    public void start() {
        mThread = new ScanThread(this);
        mThread.setName("radar");
        mThread.start();
        threadRunning = true;
        isstart = true;
    }

    public void stop() {
        if (isstart) {
            threadRunning = false;
            isstart = false;
        }
    }


    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        canvas.drawCircle(viewSize / 2, viewSize / 2, 350, mPaintCircle);
        canvas.drawCircle(viewSize / 2, viewSize / 2, 255, mPaintLine);
        canvas.drawCircle(viewSize / 2, viewSize / 2, 125, mPaintLine);
        canvas.drawCircle(viewSize / 2, viewSize / 2, 350, mPaintLine);
        //繪製兩條十字線
        canvas.drawLine(viewSize / 2, 0, viewSize / 2, viewSize, mPaintLine);
        canvas.drawLine(0, viewSize / 2, viewSize, viewSize / 2, mPaintLine);




        //這裏在雷達掃描過制定圓周度數後，將隨機繪製一些白點，模擬搜索結果
        if (start > 100) {
            for (int i = 0; i < 2; i++) {
                canvas.drawCircle(viewSize / 2 + point_x[i], viewSize / 2 + point_y[i], 10, mPaintPoint);
            }
        }
        if (start > 200) {
            for (int i = 2; i < 5; i++) {
                canvas.drawCircle(viewSize / 2 + point_x[i], viewSize / 2 + point_y[i], 10, mPaintPoint);
            }
        }
        if (start > 300) {
            for (int i = 5; i < 9; i++) {
                canvas.drawCircle(viewSize / 2 + point_x[i], viewSize / 2 + point_y[i], 10, mPaintPoint);
            }
        }
        if (start > 500) {
            for (int i = 9; i < 11; i++) {
                canvas.drawCircle(viewSize / 2 + point_x[i], viewSize / 2 + point_y[i], 10, mPaintPoint);
            }
        }
        if (start > 800) {
            for (int i = 11; i < point_x.length; i++) {
                canvas.drawCircle(viewSize / 2 + point_x[i], viewSize / 2 + point_y[i], 10, mPaintPoint);
            }
        }


        //根據matrix中設定角度，不斷繪製shader,呈現出一種扇形掃描效果
        canvas.concat(matrix);
        canvas.drawCircle(viewSize / 2, viewSize / 2, 350, mPaintSector);
        super.onDraw(canvas);
    }

    public void setDirection(@RADAR_DIRECTION int direction) {
        if (direction != CLOCK_WISE && direction != ANTI_CLOCK_WISE) {
            throw new IllegalArgumentException("Use @RADAR_DIRECTION constants only!");
        }
        this.direction = direction;
    }



    protected class ScanThread extends Thread {

        private RadarView view;

        public ScanThread(RadarView view) {
            // TODO Auto-generated constructor stub
            this.view = view;
        }

        @Override
        public void run() {
            // TODO Auto-generated method stub
            while (threadRunning) {
                if (isstart) {
                    view.post(new Runnable() {
                        public void run() {
                            start = start + 1;
                            matrix = new Matrix();
                            //設定旋轉角度,制定進行轉轉操作的圓心
//                          matrix.postRotate(start, viewSize / 2, viewSize / 2);
//                          matrix.setRotate(start,viewSize/2,viewSize/2);
                            matrix.preRotate(direction*start,viewSize/2,viewSize/2);
                            view.invalidate();


                        }
                    });
                    try {
                        Thread.sleep(5);
                    } catch (InterruptedException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }
                }
            }
        }
    }
}

說明

多餘的部分就不再解釋，代碼裏已經註釋的很清楚。這個RadarView的使用也是很簡單

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RadarView radarView = (RadarView) findViewById(R.id.radar);
        //設置雷達掃描方向
        radarView.setDirection(RadarView.ANTI_CLOCK_WISE);
        radarView.start();
    }

---

這裏雷達ViewSize設置爲800，所以在佈局文件中設定大小時將不起作用，正常使用時，需根據實際需求調整viewsize大小和幾個Circle的半徑，從而達到更有好的UI.