Animation along Straight Line
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O'Reilly & Associates
Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Recipe 13.9</title>
<style rel="stylesheet" id="mainStyle" type="text/css">
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}
</style>
<script language="JavaScript" type="text/javascript">
// animation object holds numerous properties related to motion
var anime;
// initialize default anime object
function initAnime() {
anime = {elemID:"",
xCurr:0,
yCurr:0,
xTarg:0,
yTarg:0,
xStep:0,
yStep:0,
xDelta:0,
yDelta:0,
xTravel:0,
yTravel:0,
vel:1,
pathLen:1,
interval:null
};
}
// stuff animation object with necessary explicit and calculated values
function initSLAnime(elemID, startX, startY, endX, endY, speed) {
initAnime();
anime.elemID = elemID;
anime.xCurr = startX;
anime.yCurr = startY;
anime.xTarg = endX;
anime.yTarg = endY;
anime.xDelta = Math.abs(endX - startX);
anime.yDelta = Math.abs(endY - startY);
anime.vel = (speed) ? speed : 1;
// set element's start position
document.getElementById(elemID).style.left = startX + "px";
document.getElementById(elemID).style.top = startY + "px";
// the length of the line between start and end points
anime.pathLen = Math.sqrt((Math.pow((startX - endX), 2)) +
(Math.pow((startY - endY), 2)));
// how big the pixel steps are along each axis
anime.xStep = parseInt(((anime.xTarg - anime.xCurr) / anime.pathLen) * anime.vel);
anime.yStep = parseInt(((anime.yTarg - anime.yCurr) / anime.pathLen) * anime.vel);
// start the repeated invocation of the animation
anime.interval = setInterval("doSLAnimation()", 10);
}
// calculate next steps and assign to style properties
function doSLAnimation() {
if ((anime.xTravel + anime.xStep) <= anime.xDelta &&
(anime.yTravel + anime.yStep) <= anime.yDelta) {
var x = anime.xCurr + anime.xStep;
var y = anime.yCurr + anime.yStep;
document.getElementById(anime.elemID).style.left = x + "px";
document.getElementById(anime.elemID).style.top = y + "px";
anime.xTravel += Math.abs(anime.xStep);
anime.yTravel += Math.abs(anime.yStep);
anime.xCurr = x;
anime.yCurr = y;
} else {
document.getElementById(anime.elemID).style.left = anime.xTarg + "px";
document.getElementById(anime.elemID).style.top = anime.yTarg + "px";
clearInterval(anime.interval);
}
}
</script>
</head>
<body style="height:400px;" onload="initAnime()">
<h1>Straight-Line Animation</h1>
<hr />
<form>
<input type="button" value="Left-to-Right"
onclick="initSLAnime('block', 100, 200, 500, 200, 5)">
<input type="button" value="Diagonal"
onclick="initSLAnime('block', 100, 200, 500, 500, 20)">
</form>
<div id="block" style="position:absolute; top:200px; left:100px; height:200px; width:200px; background-color:orange"></div>
</body>
</html>
<!--
function animatePolygon(elemID) {
// prepare anime object for next leg
initAnime();
// create array of coordinate points
var coords = new Array()
coords[0] = [200, 200, 100, 400];
coords[1] = [100, 400, 300, 400];
coords[2] = [300, 400, 200, 200];
// pass next coordinate group in sequence based on anime.next value
if (anime.next < coords.length) {
initSLAnime(elemID, coords[anime.next][0], coords[anime.next][1],
coords[anime.next][2], coords[anime.next][3], 10);
// increment for next leg
anime.next++;
} else {
// reset 'next' counter after all legs complete
anime.next = 0;
}
}
-->
Related examples in the same category
