Inside Technique : Animation Toolkit : Creating an Animation

Creating an animation is a two step process: first you choreograph an animation by defining the path for the object, then you direct the animation to start by passing the animation object and element to animate to an animator object. We start with explaining path objects. Path objects represent how an element moves across the screen. The animator toolkit includes to simple path objects for animating in a straight line and animating in a circle. In addition, a sinus wave path is provided to demonstrate the extensible nature of the toolkit.

Path objects are designed to work together. You can link multiple paths together creating complex animations. For example, you can animation straight across the screen using the StraightPath object and then have the element animate through a circle using the CirclePath object.

Next we show you how to use the path objects to create the animation starting with the StraightPath object.

StraightPath Object

The StraightPath object is a very simple object that takes the start and destination locations and the number of steps to take to reach the point:

var p1 = new StraightPath(fromX, fromY, toX, toY)

For example, to create a path from 0,0 to 100,70 in 50 steps:

var p1 = new StraightPath(0, 0, 100, 70, 50)

CirclePath Object

The CirclePath object is like the StraightPath object but takes the center of the circle, followed by the xRadius and yRadius (allowing elliptical paths), and the startAngle and endAngle (allowing partial circles), finishing again with the number of steps:

var p2 = new CirclePath(middleX, middleY, xRadius, yRadius, startAngle, endAngle, steps)

When defining a start and end angle if your object follows the circle in the wrong direction, try swapping the start and end angles or swapping a negative angle (eg., 270 = -90).

These are the two basic path objects. Next we show you how to use the methods on all path objects to link paths together to create more complex and interesting animations.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.