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
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
The nice thing is that all object that inherits the path object get 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).
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
p1 = new StraightPath(fromX, fromY, toX, toY, steps);
Nothing strange here. The steps is the amount of
p2 = new CirclePath(middleX, middleY, xRadius, yRadius, startAngle, endAngle, steps);
p1 = p2.concat(p3).concat(p4) // same as p1 = p2.concat(p3.concat(p4))
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
a = new Animator(LayerId, PathObject, timeInterval)
The Animator object has one "event" called
a.onanimationdone = new Function("alert('Animation Done!')");
This isn't a true event so you can't use
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.