Inside Technique : Animation Toolkit : Manipulating Paths

By themselves, the path objects are nothing more than a very simple animation. Most of the time you are gong to want to create more complete animations by combining multiple paths together into new paths. Each Path object exposes three methods for working with and transposing path objects. All these methods return a new path.

concat Method

The concat method is used for sequencing multiple path objects together. The concat() method has one argument, the path to concatenate to the current path and returns the new path object:

var p1 = p2.concat(p3).concat(p4)

add Method

The add method is useful for moving a path. The path methods adds the specified path's x and y values to the current path:

var p1 = p2.add(p3).add(p4)

rotate Method

The rotate method makes it easy to rotate the current around a specified point. This is useful if you create an animation and just want to change its orientation on the screen.

var p1 = p2.rotate(xOrig, yOrig, angle)

Running the Animation

So far you have seen how to choreograph the path. You have not yet seen how to associate the path with a particular object nor how to actually start an animation. We call this next step directing the animation and use the Animator object to associate a path with an object on the screen. The Animator object takes the string ID of the element to animate, the path object the element will follow, and the amount of time to wait between each step:

var a = new Animator(LayerID, PathObject, TimeInterval)

The Animator object also supports an event, onanimationdone, that occurs when the entire path has been traversed.

Now you have an animation object. The animation object exposes three methods for controlling the execution of the animation: play(), pause(), and stop(). Next we take you through a simple demonstration of creating paths and using the Animator object.

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