Ok - now you know how to draw static shapes and we'll get back to drawing more complicated things later but now, the next step is to add some animation. This is going to be an adventure over a few lessons, so here we go.
With Raphael, once you draw a shape, it is easy to animate it:
|
Raphael.animation({cx: 200, cy: 50}, 1000) creates an animation to move the ball to the coordinates (200, 50) i.e. to the right, with a duration of 1000 miliseconds or 1 full second. And then we start the animation with c.animate(anim). Note that we had to name both the animation and the ball... well, circle.
Ok - we got a ball that moved to the right... we can also bring it back:
|
Or... can we? The ball didn't even leave, did it? Now we're getting to the crux of truly advanced programming and game design. This will be tricky, but way cool, so put your thinking caps on and absorb this...
The reality is that we asked Raphael to animate the ball but what happens is that Raphael is smart and will get to work doing that while we continue through our code. If you ever heard of multi-tasking, this is what this is... you just experienced the cutting edge of computer programming.
The point is that in a game, you have all kinds of objects going on all kinds of movements and paths and interacting with each-other and that is too much for a single program, which cannot wait for each object to reach its destination and then move it the next and so on. You really need ten programs for the ten balls you have, to all run at the same time and move the balls all at the same time! So animation is different from simply drawing stuff because you can't wait.
While Raphael was animating the ball to move it to the right (200,50), our program just continued and asked Raphael to animate it and bring it back to (50,50)! Which it did - so fast that the ball appeared to never even move.
Here is proof... instead of bringing the ball back, we'll make it move down for the second animation, so you see that the second animation simply replaces the first one, which in fact never got a chance to be executed:
|
To work through what happened: while Raphael was ever so slightly moving the ball to the right, we asked that it be moved down, which it did. The ball never moved to the right simply because we did not wait for the 2 seconds it would take Raphael to move it to the right.
Tricky, tricky, tricky... indeed. Don't worry, we'll figure it out without you having to take 5 years of computer science courses... we did, but that's another story.
Your homework for now is to go back to the first working ball animation and instead of making it move to the right, make it move:
When you're ready, continue to Web programming 9 Functions.