(001218) Fixed issues with Opera 5 and Mozilla 5
(990121) Added a Mozilla (Gecko, Netscape 5 alpha) support.
(981027) Added a special article about creating path objects.
This is a really powerful animator script that is based on paths.
This returns the current x coordinate. Setting this has no effect.
This returns the current y coordinate. Setting this has no effect.
Updates the coordinates to the next value. This returns true if the update was successful and false otherwise.
Resets the position to the start position.
I've also made a path object that all other paths should inherit. Inherit? What do you mean?
is a way of hiding and reusing code. In the path hierarchy there is the
at the top. This includes methods of adding two paths to each other and one method of sequencing
paths and also a method to rotate the path around a point. The hierarchy looks like the picture below.
The nice thing is that all object that inherits the path object get the
rotate methods for free. No need to write any code for them.
prototype. The following line
was added after the
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).
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
p2 = new CirclePath(middleX, middleY, xRadius, yRadius, startAngle, endAngle, steps);
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 is used for sequencing paths and it is used like this (didn't I show you
p1 = p2.concat(p3).concat(p4) // same as p1 = p2.concat(p3.concat(p4))
concat returns the concatenated path so you can nest it.
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)
Rotates a path around a point.
p1 = p2.rotate(xOrig,yOrig,angle)
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,
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)
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="...">
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.