我们首先看一下效果图，有个整体的印象
好了，为了便于理解，这里就按照动画所见内容依次展开来说
准备
这里决定采用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开发有所帮助。
更多android动画之雷达扫描效果。