The Dynamic Duo - Path Animation



loc = "../"






document.write(toccss)
document.write(tochtml)

Path Animation [The Path Object]

Path Animation Concepts:

From a programming point of view, doing animation using a path or timeline is sort of like cheating. All you do is define a path for the layer to follow, and it just loops through each point by just moving it there rather than calculating where to move it. This has some big advantages because it takes little CPU time (so they go really fast) and you can move the layer in any way you can think of. The disadvantage though, is that you cannot easily change the path like you can a calculative animation. If you need to change it, you have to go back and change all the points in your path. However, with that said, using a path is still a decent way of making animation.

The basic technique for path animation is easy to understand. Once you have all the co-ordinates of where to move the layer, you just need a function to loop through them and move the layer to those points. For this purpose I've written a Path Object which will take care of this for you. You just have to add the object to your DynLayers and use the appropriate methods.

The only problem then is to get your coordinates for your path. There are several commercial products that will do this for you such as Macromedia Dreamweaver or mBed Interactor. These pieces of software will auto-generate all code for you and require their own gigantic library files. And if you want to edit the JavaScript code by yourself you'll have to invest quite a bit of time to fiqure out exactly what it going on. If all you want to do is make a simple path animation in a small demo, then paying a couple of hundred dollars for it seems a little extreme. This is why I've designed my own little tool, called DuoPath, which a) doesn't cost anything, b) makes it easy to get all the co-ordinates, and c) lets you do all the coding so you understand what's going on and can easily change it to your needs. The next lesson will show how to use DuoPath, so I'll just continue on assuming that we've already created our path and have all the co-ordinates ready to go.

Here's all the coordinates for a path that I made with DuoPath:


x-coords: 101,105,113,122,131,140,149,156,157,156,155,157,163,172,181,188,196,203,208,215,221,227,234,243,252,
261,270,278,287,296,303,310,315,319,321,322,322,322,322,323,328,335,345,355,368,377,385,390,392,393,
394,391,387,381,377,376,376,378,382,386,391,398,406,414,424,434,442,453,461,468,471,474,475,476,476,
475,474,473,472,472,476,481,488,498,508,515,523,529,536,539,542,542,541,539,535,529,523,517,514,513,
513,520,530,540,552,564,574,579,581,580,576,567,555,540,521,501,479,459,441,422,404,384,366,349,330,
310,291,272,254,238,222,206,188,172,157,141,128,113,102,92,82,72,63,55,48,42,36,32,29,27,29,32,39,
48,59,67,74,81,87,91,97

y-coords: 285,271,255,242,230,225,225,233,242,253,265,275,281,284,280,269,256,239,224,208,194,181,168,154,143,
135,129,126,124,125,127,130,135,140,149,161,174,192,208,229,250,269,281,286,284,277,269,259,248,237,
222,202,183,164,147,133,120,108,99,92,86,81,78,76,77,82,90,100,116,136,157,177,200,225,249,270,289,
306,323,341,354,365,371,376,376,374,368,361,351,340,324,309,295,281,269,257,245,231,218,202,185,170,
159,153,148,142,133,120,106,92,80,69,59,50,44,40,37,35,34,34,34,36,37,39,42,46,50,54,60,67,76,84,95,
105,116,128,140,153,166,176,187,200,212,224,237,250,264,279,295,310,326,341,351,357,355,350,342,331,
320,310,299


As you see there's about a million of them. But it doesn't really matter how many points there are because remember path animation takes no CPU time, so making a lot of points is no problem. Each set of co-ordinates represent one point in the path. The first x value and the first y value make up the first point and so on. By assinging these numbers to an array we will be able to access any single set by using their indexes:


path1x = new Array(101,105,113,122,131,140,149,156,157,156,155,157,163,172,181,188,196,203,208,215,221,227,234,243,
252,261,270,278,287,296,303,310,315,319,321,322,322,322,322,323,328,335,345,355,368,377,385,390,392,
393,394,391,387,381,377,376,376,378,382,386,391,398,406,414,424,434,442,453,461,468,471,474,475,476,
476,475,474,473,472,472,476,481,488,498,508,515,523,529,536,539,542,542,541,539,535,529,523,517,514,
513,513,520,530,540,552,564,574,579,581,580,576,567,555,540,521,501,479,459,441,422,404,384,366,349,
330,310,291,272,254,238,222,206,188,172,157,141,128,113,102,92,82,72,63,55,48,42,36,32,29,27,29,32,
39,48,59,67,74,81,87,91,97)

path1y = new Array(285,271,255,242,230,225,225,233,242,253,265,275,281,284,280,269,256,239,224,208,194,181,168,154,
143,135,129,126,124,125,127,130,135,140,149,161,174,192,208,229,250,269,281,286,284,277,269,259,248,
237,222,202,183,164,147,133,120,108,99,92,86,81,78,76,77,82,90,100,116,136,157,177,200,225,249,270,
289,306,323,341,354,365,371,376,376,374,368,361,351,340,324,309,295,281,269,257,245,231,218,202,185,
170,159,153,148,142,133,120,106,92,80,69,59,50,44,40,37,35,34,34,34,36,37,39,42,46,50,54,60,67,76,84,
95,105,116,128,140,153,166,176,187,200,212,224,237,250,264,279,295,310,326,341,351,357,355,350,342,
331,320,310,299)


Now if we wanted to know the 10th x value and the 10th y value, you check value of path1x[9] and path1y[9]. The index number is always 1 minus the point we check because arrays start at zero. So path1x[9]=156 and path1y[9]=253.

With this knowledge in mind, you can apply these coordinates to the Path Object which will allow you to turn your coordinates into a path animation.

The Path Object

Initialization:

The Path Object is an addon object to the DynLayer. It works similarly to the way my Geometric Objects work. It's probably best to include the code for each of the DynLayer and the Path Object as js files:


<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="path.js"></SCRIPT>


Once you've created a DynLayer, you create the Path Object on top of it. You have to pass the Path Object the name of the DynLayer, and the name of the Path Object along with the path information. This is necessary so that the Path Object can manipulate the DynLayer.


objectName.pathName = new Path(dynlayer,name,arrayX,arrayY)


Where:
dynlayer - name of the DynLayer
name - name of the path (in quotes)
arrayX - array of the x-coordinates
arrayY - array of the y-coordinates


Example:


mylayer = new DynLayer("mylayerDiv")
mylayer.path1 = new Path(mylayer,'path1',
new Array(0,10,20,30),
new Array(0,10,20,30))


Optionally you could predifine the arrays and just send their names for the arrayX and arrayY values. Once the Path Object is initialized, the parameters become properties of the DynLayer/Path Object and can be changed at any time if need be (ie. mylayer.path1.arrayX = new Array(5,10,15,20)).

The play() Method:

Begins the animation.


objectName.pathName.play(loop,speed,fn)


Where:
loop - boolean value determining whether to loop the animation
speed - speed of repetition in milliseconds
fn - function or statement to execute when complete


All the parameters of the play() method are optional, if you do not specify them it will default to play(false,30,null)

Example:


mylayer.path1.play(true,50)


The pause() and stop() Methods:

Self-explanitory:


objectName.pathName.pause()
or
objectName.pathName.stop()


Source Code

Download: path.js
View Source: path.js

View path1.html for a path animation example.


Home
Next Lesson:
Using DuoPath


copyright 1998 Dan Steinman