CODEWITHSUNDEEP
htmlcanvashtml5-canvas
HyperX
HyperX

Reputation: 39

Circle Animation

Can someone help me a little bit with thath canvas, i am learning it and cant manage to make a circle which when r comes to 100 it goes back to 0 animation. So its some kind of a zooming image.

I draw a circle like this:

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#003300';
  context.stroke();
</script>

Now how i can animate this now with canvas thath when it radius reaches 100 it goes instantly back to 0 and then it goes again to 100.

Thanks

Upvotes: 0

Views: 586

Answers (1)

rezoner
rezoner

Reputation: 1967

Look at math sinus function http://www.digitalmedia.cz/shared/clanky/438/graf.gif

Lets take advantage on that its value is going to 1 and then goes back to 0 for angles between 0 and PI

var period = 500; // [miliseconds]
var linearMod = Date.now() % period / period; // this goes from 0 to 1
var mod = Math.sin(linearMod * Math.PI); // and here with simple easing we create 
                                         // bouncing
var r = someRadius * mod;                // voila

With this approach you are additionally gaining simple sinusoidal easing which feels much more dynamic.

Here is a little fiddle for you http://jsfiddle.net/rezoner/6acF9/

You dont have to base linearMod upon time - you can assign it to a slider control or whatever you wish.

Upvotes: 2

Related Questions