Radar scanning effect of twaver animation

UI and functionality are two important factors for a good product, and many products tend to focus only on functional design and ignore the UI. In this "look-face" era, even if the product is very powerful, if the UI can not keep up with the pace, your products will be greatly discounted in the customer's mind.

The security and monitoring of the project is often scanned, usually using a GIF image to indicate that the software is scanning, but if you want to change the style of the icon, you need to re-do the artwork. Twaver provides animation effect, if the animation style of the icon is not satisfied, can be achieved through a simple change program, to avoid the art of two rework, improve efficiency. Cut to the chase, see how we implement an animated radar scan, first register a picture, with HTML5 canvas to draw a static radar chart, if you are familiar with Twaver, the code below should not be difficult. If you are unfamiliar, you can refer to the product documentation custom drawing (Draw) section.

Twaver. Util.registerimage (' Radar ', {V: [{shape:' Draw ', Draw:function (CTX, data, view) {var canvas= This. Canvas, G= This. G, Gradient= This. Gradient, diameter= Math.floor (Data.getwidth () *View.getzoom ()), Radius= DIAMETER/2, Huestart= 120, Hueend= 170, Huediff= Math.Abs (Hueend-huestart), Width=diameter, height=diameter; if(!canvas) {               This. Canvas = Canvas = document.createelement (' Canvas '); }             if(Width!== canvas.width | | height!==canvas.height) {canvas.width=diameter; Canvas.height=diameter;  This. G = g = Canvas.getcontext (' 2d ');  This. Gradient = Gradient = g.createlineargradient (radius, 0, 0, 0); Gradient.addcolorstop (0, ' Hsla (' + Huestart + ', ' + 50 + '%, ' + 40 + '%, 1) '); Gradient.addcolorstop (1, ' Hsla (' + hueend + ', ' + 50 + '%, ' + 40 + '%, 0.1) '); } g.globalcompositeoperation= ' Destination-out '; G.fillstyle= ' Hsla (0, 0%, 0%, 0.1) '; G.fillrect (0, 0, width, height); G.globalcompositeoperation= ' lighter ';            var i;  for(i = 0; i < 4; i++) {G.beginpath (); G.arc (RADIUS, radius, (RADIUS-1)/4) * (i + 1), 0, Math.PI * 2,false); G.strokestyle= ' Hsla (' + (Hueend-(i * (HUEDIFF/4)) + ', ' + 50 + '%, ' + 40 + '%, 0.1) '; G.linewidth= 3;            G.stroke ();             };            G.beginpath (); G.moveto (RADIUS-1, 2); G.lineto (RADIUS-1, Height-2); G.moveto (2, Radius-1); G.lineto (Width-2, Radius-1); G.strokestyle= ' Hsla (' + (Huestart + hueend)/2 + ', ' + 50 + '%, ' + 40 + '%,. 03) ';                         G.stroke ();            G.save ();            G.translate (radius, radius); G.rotate (Data.getclient (' Angle '));            G.beginpath (); G.moveto (0, 0); G.arc (0, 0, radius,-0.0349, 0.0349,false);            G.closepath (); G.fillstyle=gradient;              G.fill ();             G.restore (); Ctx.scale (1/view.getzoom (), 1/view.getzoom ()); Ctx.drawimage (Canvas,-WIDTH/2,-HEIGHT/2); }        }      ]    });

Next, set a dynamic effect on the radar chart, allowing radar to scan continuously. This code below sets the scanning angle of the radar pointer, duration:

New Twaver. Animate ({    source:node,    ' [email protected] ',    0,    * 2,    4000 ,    Repeat:Number.POSITIVE_INFINITY,    false  }). Play ();

Such a simple radar animation effect is out, is not very simple answer, if the effect of interest, you can send email request source code, attached email: [Email protected]

Radar scanning effect of twaver animation