Android仿微信雷達輻射搜索好友(邏輯清晰實現(xiàn)簡單)
不知不覺這個春節(jié)也已經(jīng)過完了,遺憾家里沒網(wǎng),沒能及時給大家送上祝福,今天回到深圳,明天就要上班了,小伙伴們是不是和我一樣呢?今天講的是一個大家都見過的動畫,雷達搜索好友嘛,原理也十分的簡單,你看完我的分析,也會覺得很簡單了,國際慣例,無圖無真相,我們先看看效果圖,對了,真
測試機送人了,所講這段時間應(yīng)該一直用模擬器顯示吧!
仿微信雷達掃描,仿安卓微信、云播雷達掃描動畫效果點擊中間的黑色圓圈開始掃描動畫,再次點擊復位,需要這種效果的朋友可以自己下載看一下。
效果圖如下所示:
這個界面相信大家都認識,我們來說下原理,其實就三層
中間是一張圖片,然后畫四個圓,這個應(yīng)該簡單吧,不會的可以看下Android繪圖機制(二)——自定義View繪制形, 圓形, 三角形, 扇形, 橢圓, 曲線,文字和圖片的坐標講解,然后最上面就是一個漸變的圓了,這個圓我們只要讓他不停的旋轉(zhuǎn)就可以了,那我們新建一個工程——RadarSearch
layou_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/photo" > <com.lgl.radarsearch.RadarView android:layout_width="match_parent" android:layout_height="match_parent" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/circle_photo" /> </RelativeLayout>
我們新建一個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()中設(shè)置鋪滿,然后在onDraw()方法中繪制四個靜態(tài)圓和一個漸變圓, * 我們通過Matrix矩陣來讓他不停的旋轉(zhuǎn)就達到我們想要的效果了 */ private Paint mPaintLine, mPaintCircle; private int w, h; // 動畫 private Matrix matrix; // 旋轉(zhuǎn)角度 private int start; // Handler定時動畫 private Handler handler = new Handler(); private Runnable run = new Runnable() { @Override public void run() { start = start + 1; matrix = new Matrix(); // 參數(shù):旋轉(zhuǎn)角度,圍繞點坐標的x,y坐標點 matrix.postRotate(start, w / 2, h / 2); // 刷新重繪 RadarView.this.invalidate(); // 繼續(xù)循環(huán) handler.postDelayed(run, 60); } }; public RadarView(Context context, AttributeSet attrs) { super(context, attrs); initView(); // 獲取高寬 w = context.getResources().getDisplayMetrics().widthPixels; h = context.getResources().getDisplayMetrics().heightPixels; // 一致旋轉(zhuǎn) 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) { // 設(shè)置鋪滿 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); // 增加旋轉(zhuǎn)動畫,使用矩陣實現(xiàn) canvas.concat(matrix); // 前置動畫 canvas.drawCircle(w / 2, h / 2, w * 7 / 10, mPaintCircle); } }
以上所述是小編給大家介紹的Android仿微信雷達輻射搜索好友(邏輯清晰實現(xiàn)簡單)的相關(guān)知識,希望對大家有所幫助。
相關(guān)文章
Android使用android-wheel實現(xiàn)省市縣三級聯(lián)動
這篇文章主要為大家詳細介紹了Android使用android-wheel實現(xiàn)省市縣三級聯(lián)動,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08RecyclerView進階:使用ItemTouchHelper實現(xiàn)拖拽和側(cè)滑刪除效果
現(xiàn)在RecyclerView的應(yīng)用越來越廣泛了,本篇文章主要介紹了RecyclerView進階:使用ItemTouchHelper實現(xiàn)拖拽和側(cè)滑刪除效果,具有一定的參考價值,有興趣的可以了解一下。2017-02-02Flutter 狀態(tài)管理scoped model源碼解讀
這篇文章主要為大家介紹了Flutter 狀態(tài)管理scoped model源碼解讀,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11