Android animation radar scanning effect-java tutorial

The radar scanning effect is often seen in our daily lives. for example, if there is a radar function on Sina Weibo, it feels like someone nearby. There is only an animation similar to the radar scanning effect, and some well-known security software also has this radar effect. so I will take you to learn it here. First, let's take a look at the overall impression.

The canvas and paint are used to implement this simple animation control.

The picture shows two cross lines, several circles, and some white points. First, define the paint brush, canvas, and some data.

SetBackgroundColor (Color. TRANSPARENT); // width = 5, anti-aliasing, stroke effect of the white brush mPaintLine = new Paint (); mPaintLine. setStrokeWidth (5); mPaintLine. setAntiAlias (true); mPaintLine. setStyle (Style. STROKE); mPaintLine. setColor (Color. WHITE); // The light green brush mPaintCircle = new Paint (); mPaintCircle. setStrokeWidth (5); mPaintCircle. setAntiAlias (true); mPaintCircle. setStyle (Style. FILL); mPaintCircle. setColor (0x99000000); // dark green Paint brush mPaintSector = new Paint (); mPaintSector. setColor (0x9D00ff00); mPaintSector. setAntiAlias (true); // defines a dark green gradient rendering mShader = new SweepGradient (viewSize/2, viewSize/2, Color. TRANSPARENT, Color. GREEN); mPaintSector. setShader (mShader); // white solid Paint brush mPaintPoint = new Paint (); mPaintPoint. setColor (Color. WHITE); mPaintPoint. setStyle (Style. FILL); // randomly generate some array points and simulate the radar scan result point_x = UtilTools. getrandomarray (15,300); point_y = UtilTools. getrandomarray( 15,300 );

Let's talk about this SweepGradient.

The constructors of SweepGradient:

public SweepGradient(float cx, float cy, int[] colors, float[] positions)

public SweepGradient(float cx, float cy, int color0, int color1)

Cx, cy specify the center, color1, color0, or colors specify the gradient color. when more than two colors are used, you can also use positions to specify the relative position of each color, if positions is set to NULL, the color is evenly distributed.

Draw basic graphics

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); // draw two cross lines canvas. drawLine (viewSize/2, 0, viewSize/2, viewSize, mPaintLine); canvas. drawLine (0, viewSize/2, viewSize, viewSize/2, mPaintLine );

In this way, the entire UI can be drawn, and then the animation can be added to achieve the overall effect.

Animation implementation

The Matrix is used for animation. At school, when the linear algebra teacher talked about various linear transformations, he was thinking about what this stuff was doing. now it's finally met, and now it looks like it's in the dark. In general, Matrix can be used to implement powerful graphic animation, including displacement, rotation, scaling, and transparent changes. matrix has a series of setTranslate, setRotate, setScale and other methods. It is very convenient to implement various graphical transformations, mainly to understand various transformations.

Animation implementation thread

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 (); // sets the rotation angle, define the center of the circle/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 ();}}}}}

First, start is continuously accumulated in an independent thread as the rotation angle. Then associate it with matrix. Here we try to use the three methods of matrix, and no difference is found.

Animation rendering

Next, draw images continuously in the onDraw method.

// Based on the angle set in the matrix, the shader is constantly drawn, showing a sector scanning effect canvas. concat (matrix); canvas. drawCircle (viewSize/2, viewSize/2,350, mPaintSector );

Final Implementation

Well, the overall code is as follows:

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; // rotation effect start angle: 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 {} // The default value is clockwise. private final static int DEFAULT_DIERCTION = CLOCK_WISE; // Set the radar scan direction to private int direction = DEFAULT_DIERCTION; private boolean threadRunning = true; public RadarView (Context context, AttributeSet attrs) {super (context, attrs); // TODO Aut O-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); // width = 5, anti-aliasing, stroke effect of the white brush mPaintLine = new Paint (); mPaintLine. setStrokeWidth (5); mPaintLine. setAntiAlias (true ); MPaintLine. setStyle (Style. STROKE); mPaintLine. setColor (Color. WHITE); // The light green brush mPaintCircle = new Paint (); mPaintCircle. setStrokeWidth (5); mPaintCircle. setAntiAlias (true); mPaintCircle. setStyle (Style. FILL); mPaintCircle. setColor (0x99000000); // dark green Paint brush mPaintSector = new Paint (); mPaintSector. setColor (0x9D00ff00); mPaintSector. setAntiAlias (true); mShader = new SweepGradient (viewSize/2, ViewSize/2, Color. TRANSPARENT, Color. GREEN); mPaintSector. setShader (mShader); // white solid Paint brush mPaintPoint = new Paint (); mPaintPoint. setColor (Color. WHITE); mPaintPoint. setStyle (Style. FILL); // randomly generated point, simulated radar scan result point_x = UtilTools. getrandomarray (15,300); point_y = UtilTools. getrandomarray (15,300);} public void setViewSize (int size) {this. viewSize = size; setMeasuredDimension (viewSize, viewSize) ;}@ Ove Rride 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 o NDraw (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); // draw two cross lines canvas. drawLine (viewSize/2, 0, viewSize/2, viewSize, mPaintLine); canv As. drawLine (0, viewSize/2, viewSize, viewSize/2, mPaintLine); // some white points will be randomly drawn after the radar scans the circumference degree, simulate the search result 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> 3 00) {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 + poi Nt_y [I], 10, mPaintPoint) ;}// based on the angle set in the matrix, the shader is constantly drawn to present a fan-shaped scanning effect 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 (); // sets the rotation angle, define the center of the circle/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 ();}}}}}}

Description

The extra parts are not explained, and the comments in the code are clear. The use of this RadarView is also very simple, you need to call its stop method when you need to stop.

@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); RadarView radarView = (RadarView) findViewById (R. id. radar); // sets the radar scanning direction to radarView. setDirection (RadarView. ANTI_CLOCK_WISE); radarView. start ();}

Here, the radar ViewSize is set to 800, so setting the size in the layout file does not take effect. during normal use, you need to adjust the viewsize and the radius of several Circle as needed, to achieve better UI display.

Summary

The above is all about the implementation of radar scanning in Android. I hope this article will be helpful for Android development.

For more Android animation-related articles on radar scanning effect, please follow the PHP Chinese website!