Browse DevX
Sign up for e-mail newsletters from DevX


Build an Animation Generator-2 : Page 2




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Path Animation
A path animation is exactly what you'd expect: an element on the page follows a path that you design. In DHTML terms, you rapidly change the top and left properties of a visible object to achieve the appearance of motion. To do that, you can store a series of values for the top and left properties in arrays, and then use the window.setTimeout function to cycle through the values in the arrays.

Here's a simple example of a path animation. Open your favorite text editor and enter the following code:

<html> <head> <title>Path Animation Example</title> <script language="JavaScript"> //Mask the DOM if(document.layers) { pre = 'document.'; post = ''; } if(document.getElementById) { pre = 'document.getElementById("'; post = '").style'; } if(document.all) { pre = 'document.all.'; post = '.style'; } //Arrays var xPos = new Array(8,8,10,12,20,28,36, 54,64,86,108,130,146,168,184,194,200,201); var yPos = new Array(17,25,33,47,65,81,99,121, 139,159,175,189,201,209,215,216,216,216); //Counters var currentX = 0; var currentY = 0; function animate() { //Return at end of arrays if(currentX > xPos.length - 1) { currentX = 0; currentY = 0; return; } //Move the bulb eval(pre + 'bulb' + post).left = parseInt(xPos[currentX]); eval(pre + 'bulb' + post).top = parseInt(yPos[currentY]); currentX++; currentY++; setTimeout('animate()',10); } </script> </head> <body bgcolor="#000000" onLoad="animate()"> <div id="bulb" style="position: absolute; top: 0; left: 0; width: 32px; height: 64px;"> <img border="0" src="images/lightbulb.gif" width="32" height="64"></div> </body> </html>

The code animates a single <div> element in the document whose id attribute value is "bulb." The <script> block is relatively straightforward. The first task is to mask the differences in the Document Object Models (DOM) of the three major browsers (see my 10-Minute solution article Essential JavaScript Routines for more information).

Next, the code creates two arrays containing a list of X and Y values for the <div> element to be animated. The xPos array corresponds to the left property of the element; the yPos array corresponds to the top property of the element. The values in the arrays represent the X and Y coordinates of the top left corner of the element. Two counter variables, currentX and currentY, keep track of which pair of coordinates is currently assigned to the <div>.

Finally, the animate() function does the work of moving the element around on the screen. The first few lines of the animate() function set the end conditions. Each time the function starts, the following code checks whether the value of the currentX counter variable is still within the bounds of the array. Arrays are zero-based; to access the last element, subtract one from the length property. In this case, the code resets the currentX, currentY counters to zero, and the function ends with the return statement. If you'd like your animation to loop continuously, you can simply omit the return statement and the animation will chug along merrily until your user leaves the page.

//Return at end of arrays if(currentX > xPos.length - 1) { currentX = 0; currentY=0; return; }

The next section of the animate() function performs the animation:

//Move the bulb eval(pre + 'bulb' + post).left = parseInt(xPos[currentX]); eval(pre + 'bulb' + post).top = parseInt(yPos[currentY]); currentX++; currentY++; setTimeout('animate()',10);

First, the code sets the left and top properties of the bulb <div> to the values from the arrays according to the currentX and currentY counters. Next, it increments the currentX and currentY variables, setting up the next frame of the animation. Finally, a call is made again to the animate() function wrapped inside a call to setTimeout() with a delay of 10 milliseconds to move the animation to the next frame. When the animation begins, currentX and currentY are zero, so the initial coordinates of the bulb are (xPos[0], yPos[0]) or (8, 17). The next time animate() executes, the coordinates are (xPos[1], yPos[1]) or (8, 25). The cycle continues until it has cycled through all the array values. Note that I could have used a single counter variable as the arrays are of equal length but I find it easier to conceptualize the process using variables that represent both the top and left properties.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date