html5 canvas animation

Question

I'm looking for something like this: http://3.paulhamill.com/node/39 I want a circle (or image) to smootly go up (and fade in/out with a alpha effect).

Is there any tutorial out there? If not, I will dive in html5, but if there is a source code out there I would appreciate it if somebody can provide me withit. Thanks!

Answer 1

Searching on google I found this:
https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations
http://diveintohtml5.org/canvas.html#divingin
http://billmill.org/static/canvastutorial/

Answer 2

Well the gist of drawing an object that goes a little higher and gets a little more transparency with each frame is pretty simple.

Here's the gist of it:

//set these:
this.color = 'rgba(255, 205, 50, 1)';
this.alpha = 1;
this.x = 30;
this.y = 30;
this.size = 20;
this.frame = 0;

// ...

//in a draw loop:

context.fillStyle = this.color;

//draw a circle at x,y of size radius
context.beginPath();
context.arc(this.x, this.y, this.size, 0, Math.PI*2, true); 
context.closePath();
context.fill();

//use a frame counter for animation
this.frame += 1;

this.y -= 1; //every frame the circle will rise
this.alpha -= 0.05; //every frame the circle gets 5% more transparent
this.color = 'rgba(255, 205, 50, %a)'.replace(/%a/, this.alpha);

// do something with frame counter.
// Maybe every 100 frames it should all () reset?