Android動畫之雷達掃描效果
更新時間：2016年08月08日 10:34:53 作者：IAM四十二
雷達掃描效果在我們?nèi)粘?jīng)常看到，比如在新浪微博上有一個雷達功能，感覺類似于微信附近的人。只是多了一個類似于雷達掃描效果的動畫，某些知名安全軟件也有這樣的雷達效果，因此今天在這里小編帶著大家學習一下。
我們首先看一下效果圖，有個整體的印象
好了，為了便于理解，這里就按照動畫所見內(nèi)容依次展開來說
準備
這里決定采用canvas（畫布）和paint（畫筆）實現(xiàn)了這個簡單動畫控件。
由圖片可以看到有兩條交叉的十字線、幾個圓圈和一些白點，那么首先定義一下所需的畫筆，畫布及一些數(shù)據(jù)
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); //隨機生成一些數(shù)組點，模擬雷達掃描結果 point_x = UtilTools.Getrandomarray(15, 300); point_y = UtilTools.Getrandomarray(15, 300);
這里說一下這個SweepGradient
SweepGradient的構造函數(shù)：
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,接下來加上動畫，就可以實現(xiàn)整體的效果。
動畫實現(xiàn)
這里實現(xiàn)動畫的時候，用到了Matrix這個東西，也就是矩陣。上學的時候，線性代數(shù)老師講各種線性變換時，腦子里在想，這玩意是干嘛使得，現(xiàn)在總算是遇上了，現(xiàn)在看起來也是云里霧里?？偟膩碚f就是可以使用Matrix實現(xiàn)強大的圖形動畫，包括位移、旋轉、縮放及透明變化等效果，matrix有著一系列的setTranslate,setRotate,setScale等方法。很方便的實現(xiàn)圖形各種變換，主要還是需要理解各種變換。
動畫實現(xiàn)線程
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關聯(lián)。這里嘗試使用了matrix的三個方法，暫時沒有發(fā)現(xiàn)區(qū)別。
動畫繪制
接下來在onDraw方法中不斷繪制圖形即可
//根據(jù)matrix中設定角度，不斷繪制shader,呈現(xiàn)出一種扇形掃描效果 canvas.concat(matrix); canvas.drawCircle(viewSize / 2, viewSize / 2, 350, mPaintSector);
最終實現(xiàn)
好了，最終整體的代碼如下：
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);
//這里在雷達掃描過制定圓周度數(shù)后，將隨機繪制一些白點，模擬搜索結果
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);
}
}
//根據(jù)matrix中設定角度，不斷繪制shader,呈現(xiàn)出一種扇形掃描效果
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();
}
}
}
}
}
}
說明
多余的部分就不再解釋，代碼里已經(jīng)注釋的很清楚。這個RadarView的使用也是很簡單，需要停止時，調用其stop方法即可。
@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，所以在布局文件中設定大小時將不起作用，正常使用時，需根據(jù)實際需求調整viewsize大小和幾個Circle的半徑，從而達到更有好的UI展示效果。
總結
以上就是Android中雷達掃描效果實現(xiàn)的全部內(nèi)容，希望本文對大家Android開發(fā)有所幫助。
相關文章
這篇文章主要介紹了Android 中Popwindow彈出菜單的兩種方法實例的相關資料,這里提供了兩種實現(xiàn)的方法，并附有實例代碼，需要的朋友可以參考下2017-03-03
Android使用ViewFlipper實現(xiàn)圖片上下自動輪播的示例代碼
這篇文章主要介紹了Android使用ViewFlipper實現(xiàn)圖片上下自動輪播的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
Android Compose衰減動畫Animatable使用詳解
這篇文章主要為大家介紹了Android Compose衰減動畫Animatable使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
Android中WebView無法后退和js注入漏洞的解決方案
這篇文章主要介紹了Android中WebView無法后退和js注入漏洞解決方案,其中js注入主要針對安卓4.2及以下版本中WebView的漏洞,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了Android Handler leak分析及解決辦法詳解的相關資料,需要的朋友可以參考下2017-03-03
Android開發(fā)Flutter?桌面應用窗口化實戰(zhàn)示例
這篇文章主要為大家介紹了Android開發(fā)Flutter?桌面應用窗口化實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家詳細介紹了Android實現(xiàn)簡單畫圖畫板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了Android課程表界面布局實現(xiàn)代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
flutter開發(fā)技巧自定頁面指示器PageIndicator詳解
這篇文章主要為大家介紹了flutter開發(fā)技巧自定頁面指示器PageIndicator詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家詳細介紹了DatePicker日期滾動選擇的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09