Animation along a Circle
<!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>Circle Animation </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 = new Object();
// initialize default anime object
function initAnime() {
anime = {elemID:"",
xStart:0,
yStart:0,
xCurr:0,
yCurr:0,
next:1,
pts:1,
radius:1,
interval:null
};
}
// stuff animation object with necessary explicit and calculated values
function initCircAnime(elemID, startX, startY, pts, radius) {
initAnime();
anime.elemID = elemID;
anime.xCurr = anime.xStart = startX;
anime.yCurr = anime.yStart = startY;
anime.pts = pts;
anime.radius = radius;
// set element's start position
document.getElementById(elemID).style.left = startX + "px";
document.getElementById(elemID).style.top = startY + "px";
// start the repeated invocation of the animation
anime.interval = setInterval("doCircAnimation()", 10);
}
function doCircAnimation() {
if (anime.next < anime.pts) {
var x = anime.xCurr +
Math.round(Math.cos(anime.next * (Math.PI/(anime.pts/2))) * anime.radius);
var y = anime.yCurr +
Math.round(Math.sin(anime.next * (Math.PI/(anime.pts/2))) * anime.radius);
document.getElementById(anime.elemID). style.left = x + "px";
document.getElementById(anime.elemID). style.top = y + "px";
anime.xCurr = x;
anime.yCurr = y;
anime.next++;
} else {
document.getElementById(anime.elemID).style.left = anime.xStart + "px";
document.getElementById(anime.elemID).style.top = anime.yStart + "px";
clearInterval(anime.interval);
}
}
</script>
</head>
<body style="height:400px;" onload="initAnime()">
<h1>Circular Animation</h1>
<hr />
<form>
<input type="button" value="Circle"
onclick="initCircAnime('block', 400, 200, 36, 20)">
</form>
<div id="block" style="position:absolute; top:200px; left:400px; height:200px; width:200px; background-color:orange"></div>
</body>
</html>
Related examples in the same category
