JavaScript Animations, Part II: Introduction - Doc JavaScript

JavaScript Animations, Part II

In Column 18, JavaScript Animations, Part I, we discussed basic animation routines. In this column we'll introduce a new and improved animation engine. Our "older" engine has several disadvantages:

• It computes the animation path before it starts animating the element. So if you want to move an element in a circular path 1000 times, with 100 steps per circle, our script must compute the coordinates of 100,000 points -- a definite crash. For longer animations, it's best to perform real-time calculations.
• If you tried to implement the script, you probably noticed that it is very difficult to define many consecutive animations. It requires strings within strings -- a real mess.

Not only will we show you how to overcome these problems, but we'll also discuss several additional enhancements, such as nested animations. In general, you'll learn:

1. How to create real-time animations.
2. How to execute consecutive animations.
3. How to create nested animations.
4. How to overcome the resize/reload bug.

We'll develop three new versions of our animate.js library, with various enhancements for your benefit.