Android特效專輯（九）——仿微信雷達搜尋好友特效，邏輯清晰實現簡單

Android特效專輯（九）——仿雷達搜尋好友特效，邏輯清晰實現簡單
Android特效專輯（九）——仿雷達搜尋好友特效，邏輯清晰實現簡單

不知不覺這個春節也已經過完了，遺憾家裡沒網，沒能及時給大家送上祝福，今天回到深圳，明天就要上班了，小夥伴們是不是和我一樣呢？今天講的是一個大家都見過的動畫，雷達搜尋好友嘛，原理也十分的簡單，你看完我的分析，也會覺得很簡單了，國際慣例，無圖無真相，我們先看看，對了，真
測試機送人了，所講這段時間應該一直用模擬器顯示吧！

這個介面相信大家都認識，我們來說下原理，其實就三層<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjwvYmxvY2txdW90ZT4NCjxwPjxpbWcgYWx0PQ=="這裡寫圖片描述" src="http://www.bkjia.com/uploads/allimg/160216/041313F63-1.png" title="\" />

中間是一張圖片，然後畫四個圓，這個應該簡單吧，不會的可以看下Android繪圖機制（二）——自訂View繪製形, 圓形, 三角形, 扇形, 橢圓, 曲線,文字和圖片的座標講解,然後最上面就是一個漸層的圓了，這個圓我們只要讓他不停的旋轉就可以了,那我們建立一個工程——RadarSearch

layou_main.xml

我們建立一個RadarView

RadarView

package com.lgl.radarsearch;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Matrix;import android.graphics.Paint;import android.graphics.Paint.Style;import android.graphics.Shader;import android.graphics.SweepGradient;import android.os.Handler;import android.util.AttributeSet;import android.view.View;/** * 雷達搜尋 *  * @author LGL * */public class RadarView extends View {    /**     * 思路：我們首先初始化畫筆，並且擷取到控制項的寬高，在onMeasure()中設定鋪滿，然後在onDraw()方法中繪製四個靜態圓和一個漸層圓，     * 我們通過Matrix矩陣來讓他不停的旋轉就達到我們想要的效果了     */    private Paint mPaintLine, mPaintCircle;    private int w, h;    // 動畫    private Matrix matrix;    // 旋轉角度    private int start;    // Handler定時動畫    private Handler handler = new Handler();    private Runnable run = new Runnable() {        @Override        public void run() {            start = start + 1;            matrix = new Matrix();            // 參數：旋轉角度，圍繞點座標的x,y座標點            matrix.postRotate(start, w / 2, h / 2);            // 重新整理重繪            RadarView.this.invalidate();            // 繼續迴圈            handler.postDelayed(run, 60);        }    };    public RadarView(Context context, AttributeSet attrs) {        super(context, attrs);        initView();        // 擷取高寬        w = context.getResources().getDisplayMetrics().widthPixels;        h = context.getResources().getDisplayMetrics().heightPixels;        // 一致旋轉        handler.post(run);    }    private void initView() {        mPaintLine = new Paint();        mPaintLine.setColor(Color.WHITE);        mPaintLine.setAntiAlias(true);        mPaintLine.setStyle(Style.STROKE);        mPaintCircle = new Paint();        mPaintCircle.setColor(Color.RED);        mPaintCircle.setAntiAlias(true);        matrix = new Matrix();    }    /**     * 測量     *      * @author LGL     */    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        // 設定鋪滿        setMeasuredDimension(w, h);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        // 畫四個圓形        canvas.drawCircle(w / 2, h / 2, w / 2, mPaintLine);        canvas.drawCircle(w / 2, h / 2, w / 3, mPaintLine);        canvas.drawCircle(w / 2, h / 2, w * 7 / 10, mPaintLine);        canvas.drawCircle(w / 2, h / 2, w / 4, mPaintLine);        // 繪製漸層圓        Shader mShader = new SweepGradient(w / 2, h / 2, Color.TRANSPARENT,                Color.parseColor("#AAAAAAAA"));        // 繪製時漸層        mPaintCircle.setShader(mShader);        // 增加旋轉動畫，使用矩陣實現        canvas.concat(matrix); // 前置動畫        canvas.drawCircle(w / 2, h / 2, w * 7 / 10, mPaintCircle);    }}