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,int color0,int color1)

其中cx,cy 指定圆心,color1,color0 或 colors 指定渐变的颜色 ，对于使用多于两种颜色时，还可以通过positions 指定每种颜色的相对位置，positions 设为NulL时表示颜色均匀分布。

绘制基本图形

  canvas.drawCircle(vIEwSize / 2,350,mPaintCircle);  canvas.drawCircle(vIEwSize / 2,255,mPaintline);  canvas.drawCircle(vIEwSize / 2,125,mPaintline);  //绘制两条十字线  canvas.drawline(vIEwSize / 2,vIEwSize,mPaintline);  canvas.drawline(0,mPaintline);

这样就绘制除了整个UI,接下来加上动画，就可以实现整体的效果。

动画实现

这里实现动画的时候，用到了Matrix这个东西，也就是矩阵。上学的时候，线性代数老师讲各种线性变换时，脑子里在想，这玩意是干嘛使得，现在总算是遇上了，现在看起来也是云里雾里。总的来说就是可以使用Matrix实现强大的图形动画，包括位移、旋转、缩放及透明变化等效果，matrix有着一系列的setTranslate,setRotate,setScale等方法。很方便的实现图形各种变换，主要还是需要理解各种变换。

动画实现线程

 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);//       matrix.setRotate(start,vIEwSize/2,vIEwSize/2);       matrix.preRotate(direction*start,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,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,color.GREEN);  mPaintSector.setShader(mShader);  //白色实心画笔  mPaintPoint=new Paint();  mPaintPoint.setcolor(color.WHITE);  mPaintPoint.setStyle(Style.FILL);  //随机生成的点，模拟雷达扫描结果  point_x = 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,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],mPaintPoint);   }  }  if (start > 300) {   for (int i = 5; i < 9; i++) {    canvas.drawCircle(vIEwSize / 2 + point_x[i],mPaintPoint);   }  }  if (start > 500) {   for (int i = 9; i < 11; i++) {    canvas.drawCircle(vIEwSize / 2 + point_x[i],mPaintPoint);   }  }  if (start > 800) {   for (int i = 11; i < point_x.length; i++) {    canvas.drawCircle(vIEwSize / 2 + point_x[i],mPaintPoint);   }  }  //根据matrix中设定角度，不断绘制shader,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();       //设定旋转角度,vIEwSize/2);       vIEw.invalIDate();      }     });     try {      Thread.sleep(5);     } catch (InterruptedException e) {      // Todo auto-generated catch block      e.printstacktrace();     }    }   }  } }}

说明

多余的部分就不再解释，代码里已经注释的很清楚。这个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，所以在布局文件中设定大小时将不起作用，正常使用时，需根据实际需求调整vIEwsize大小和几个Circle的半径，从而达到更有好的UI展示效果。

总结

以上就是AndroID中雷达扫描效果实现的全部内容，希望本文对大家AndroID开发有所帮助。

总结

以上是内存溢出为你收集整理的Android动画之雷达扫描效果全部内容，希望文章能够帮你解决Android动画之雷达扫描效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。