Inside Technique : Animation Toolkit : Path Demonstration

Path Demonstration

The first step is to define the object to animate. In this example we are animated an image. We place the image inside of an absolutely positioned DIV element. This is necessary to ensure the animation works cross-browser as Netscape Navigator does not support positioning images directly.

<div id="globe" 
     style="position: absolute; top: 0; left: 0; width: 32; height: 32">
<img src="globe.gif" width=32 height=32 alt="">
</div>

Next, we need to choreograph the set of paths we want the globe to follow. Notice in the last path we set the horizontal destination based on the width of the window. To determine the width we use a simple browser test. If you are going to be manipulating the properties and methods of positioned elements, we recommend using our DHTMLLib cross-browser library. Using DHTMLLib, the browser detection to determine the width would no longer be necessary and the browser's width (and other properties) would be directly accessible.

// Start at 0,100 and animate to 250, 100
p1 = new StraightPath(0,100,250,100,12);

// Do a half ellipse
p2 = new CirclePath(250,225,255,125,90,-90,30);

// Travel in a straight line 100 pixels to the left
p3 = new StraightPath(250,350,150,350,6);

// Do a small full circle
p4 = new CirclePath(150,250,100,100,270,-90,30);

// Do a larger half circle
p5 = new CirclePath(125,225,125,125,270,90,30);

// Travel to the right edge of the screen
var nWidth = ((document.layers) ? window.innerWidth: document.body.clientWidth)-32
p6 = new StraightPath(125,100, nWidth,100,40);

p = p1.concat(p2).concat(p3).concat(p4).concat(p5).concat(p6);

// Concatenate the paths together
p = p1.concat(p2).concat(p3).concat(p4).concat(p5).concat(p6);

Now we are ready to direct the animation with the Animator object. We use the Animator's onanimationdone event to force the animation to loop:

var a = new Animator("globe", p, 50);
// Add an onanimationdone event handler
a.onanimationdone = "a.stop();a.play()"; // Loop animation
a.play() // start animation

Including the Scripts

The last step is to include the necessary scripts on your page:

<script type="text/javascript" src="path.js"></script>
<script type="text/javascript" src="circlePath.js"></script>
<script type="text/javascript" src="straightPath.js"></script>
<script type="text/javascript" src="animator.js"></script>

Each included script represent an object in the animation toolkit. The path.js script represents the base class for all path objects. The circlePath.js and straightPath.js script extends the path base class with the circle and straight path animation functions. The animator.js file contains the animator object.

You have now seen the basics for using the animation toolkit. Next we take you through the inner details of the Animation toolkit and show you how to create your own path objects.

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