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实现强大的图形动画，包括位移、旋转、缩放及透明变化等效果，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, 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的使用也是很简单，需要停止时，调用其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开发有所帮助。