Buggy canvas animation on click with JavaScript -
i'm trying run simple animation each time when user clicks on canvas. i'm sure did wrong animation doesn't fire @ times. have never used canvas animation before , have difficulty understanding how should constructed within for loop.
fgcanvas.on('mousedown', function(e) { var cx = math.round((e.offsetx - m) / gs), cy = math.round((e.offsety - m) / gs); clickdot({x:cx,y:cy}); }); function clickdot(data) { (var = 1; < 100; i++) { fctx.clearrect(0, 0, pw, ph); fctx.beginpath(); fctx.arc(data.x * gs + m, data.y * gs + m, i/10, 0, math.pi * 2); fctx.strokestyle = 'rgba(255,255,255,' + i/10 + ')'; fctx.stroke(); } requestanimationframe(clickdot); } full code here: http://jsfiddle.net/3nk4a/
the other question how can slow downwards animation or add together easing, rings drawn slower towards end when disappear?
you can utilize requestanimationframe plus easing functions create desired effect:
a demo: http://jsfiddle.net/m1erickson/cevgf/
requestanimationframe creates animation loop itself--so there's no need utilize for-loop within requestanimationframe's animation loop.
in simplest form, requestanimationframe loop animate circle:
var counter=1; animate(); function animate(){ // stop animation after has run 100 times if(counter>100){return;} // there's more animating do, request loop requestanimationframe(animate); // calc circle radius var radius=counter/10; // draw circle } to animation speed-up or slow-down, can utilize easings. easings alter value (like radius) on time, alter value unevenly. easings speed-up , slow-down on duration of animation.
robert penner made great set of easing algorithms. dan rogers coded them in javascript:
https://github.com/danro/jquery-easing/blob/master/jquery.easing.js
you can see working examples of easing functions here:
http://easings.net/
here's annotated code using requestanimationframe plus easings animate circles.
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> #canvas{border:1px solid red;} </style> <script> $(function(){ // canvas related variables var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); var $canvas=$("#canvas"); var canvasoffset=$canvas.offset(); var offsetx=canvasoffset.left; var offsety=canvasoffset.top; var scrollx=$canvas.scrollleft(); var scrolly=$canvas.scrolltop(); // set context styles ctx.linewidth=1; ctx.strokestyle="gold"; ctx.fillstyle="#888"; // variables used draw & animate ring var pi2=math.pi*2; var ringx,ringy,ringradius,ingcounter,ringcountervelocity; // fill canvas background color ctx.fillrect(0,0,canvas.width,canvas.height); // tell handlemousedown handle mousedown events $("#canvas").mousedown(function(e){handlemousedown(e);}); // set ring variables , start animation function ring(x,y){ ringx=x; ringy=y; ringradius=0; ringcounter=0; ringcountervelocity=4; requestanimationframe(animate); } // animation loop function animate(){ // homecoming if animation finish if(ringcounter>200){return;} // otherwise request animation loop requestanimationframe(animate); // ringcounter<100 means ring expanding // ringcounter>=100 means ring shrinking if(ringcounter<100){ // expand ring using easeincubic easing ringradius=easeincubic(ringcounter,0,15,100); }else{ // shrink ring using easeoutcubic easing ringradius=easeoutcubic(ringcounter-100,15,-15,100); } // draw ring @ radius set using easing functions ctx.fillrect(0,0,canvas.width,canvas.height); ctx.beginpath(); ctx.arc(ringx,ringy,ringradius,0,pi2); ctx.closepath(); ctx.stroke(); // increment ringcounter next loop ringcounter+=ringcountervelocity; } // robert penner's easing functions coded dan rogers // // https://github.com/danro/jquery-easing/blob/master/jquery.easing.js // // now=elapsed time, // startvalue=value @ start of easing, // deltavalue=amount value alter during easing, // duration=total time easing function easeincubic(now, startvalue, deltavalue, duration) { homecoming deltavalue*(now/=duration)*now*now + startvalue; } function easeoutcubic(now, startvalue, deltavalue, duration) { homecoming deltavalue*((now=now/duration-1)*now*now + 1) + startvalue; } // handle mousedown events function handlemousedown(e){ // tell browser we'll handle event e.preventdefault(); e.stoppropagation(); // calc mouse position mousex=parseint(e.clientx-offsetx); mousey=parseint(e.clienty-offsety); // animate ring @ mouse position ring(mousex,mousey); } }); // end $(function(){}); </script> </head> <body> <h4>click in canvas draw animated circle easings.</h4> <canvas id="canvas" width=300 height=300></canvas> </body> </html> javascript animation html5-canvas
No comments:
Post a Comment