Today I will bring you a cool HTML5 Canvas animation, which consists of several basic animations, one is particle animation and the other is spiral animation. The first is to combine the pixel particles into a spiral line on the canvas drawing board, and then use JavaScript to move the particles to visually form an animation special effect of the spiral line fluctuation.
Advertisement
body { background: #203656; margin: 0; } #target { background: #203656; }
var c = createjs, stage = new c.StageGL("target"), t=0, count=0, w, h, max, min; var dotR = 8, amp0Amt=1, amp1Amt=0.2, maxDots=2000, speed=2.5; c.Ticker.timingMode = c.Ticker.RAF; c.Ticker.on("tick", tick); stage.setClearColor("#201624"); var dotTemplate, dots=[]; while (dots.length < maxDots) { getDot(); } function tick(evt) { var d = evt.delta; var fov = min*1; for (var i=0, l=dots.length; i<l; i++) { var dot = dots[i]; var t = (dot.t += d*0.0001*speed*dot.speed); var x = t%1*w-w/2; x += Math.cos(t*dot.p1)*min*dot.a1*amp1Amt; var y = Math.sin(t*Math.PI*4+Math.PI)*min*dot.r*0.25; y += Math.sin(t*dot.p1)*min*dot.a1*amp1Amt var z = Math.cos(t*Math.PI*4+Math.PI)*min*dot.r*0.25; z += Math.cos(t*dot.p1)*min*dot.a1*amp1Amt; var s = fov/(z+fov); x *= s; y *= s; dot.x = x+w/2; dot.y = y+h/2; dot.getChildAt(1).alpha = 1-s; dot.scaleX = dot.scaleY = Math.pow(s*(1+dot.size),2)*0.3; } stage.update(); }
Advertisement