Added a special article about creating path objects.

Animator with an attitude!

This is a really powerful animator script that is based on paths.

Object Oriented Programming

So what do I mean by paths? Path are Javascript objects that have the following properties:

I've also made a path object that all other paths should inherit. Inherit? What do you mean? Hopefully you know what Object Oriented Programing is and that Javascript is an OOP language. OOP is a way of hiding and reusing code. In the path hierarchy there is the Path object at the top. This includes methods of adding two paths to each other and one method of sequencing paths. the hierarchy looks like the picture below.

The nice thing is that all object that inherits the path object get the concat and the add methods for free. No need to write any code for them.

Inheritance is done in javascript using the property prototype. The following line was added after the StraightPath object:

StraightPath.prototype = new Path;

Now the following lines are valid:

p1 = p2.concat(p3);

where p1, p2 and p3 are any paths (could be StraightPath, CirclePath or any other path that you have added).

Details of the Paths

Currently I've only made two paths, actually five but three of these implement the add, concat and rotate (but you don't need to know that). The easiest is the StraightPath that you create like this:

p1 = new StraightPath(fromX, fromY, toX, toY, steps);

Nothing strange here. The steps is the amount of steps that are needed to traverse the path. The second path is the CirclePath:

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

The startAngle and endAngle describes the angle to animate between. This also influence the direction the path is traversed. If you get the wrong direction try switch places or change to the negative angle (for example 270 = -90).

concat

concat is used for sequencing paths and it is used like this (didn't I show you before?):

p1 = p2.concat(p3).concat(p4)
// same as
p1 = p2.concat(p3.concat(p4))

concat returns the concatenated path so you can nest it.

add

This just adds the first path's x to the second path's x (and the same for y). This is useful for moving another path.

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

rotate

Rotates a path around a point.

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

The Animator

All this talk about paths but what about the animator? Well now that we have defined the paths it is really easy to create the animator. Since I'm doing this in OOP I created an object called Animator. The animator has three methods, play(), pause() and stop(). Stop also resets the animation. The Animator constructor (the function that creates an object) takes three arguments. Like this:

a = new Animator(LayerId, PathObject, timeInterval)

The LayerId is a string with the id of the absolutely positioned layer. (The string thing is for cross browsers) and the timeInterval is the time between each step in the path.

The Animator object has one "event" called onanimationdone that is fired when the entire path has been traversed. This can be assign to the animator object both as a function (the standard way) or as string.

a.onanimationdone = new Function("alert('Animation Done!')");

This isn't a true event so you can't use <script for="a" event="...">

Example

The heading at the top of this page has a ball circling around it. This used the concat (and add because I misplaced it first).

Follow this link to learn how to include the animator in your page.