DHTML Lab 12
Animation Techniques
Admit it! This is why you really want to learn DHTML!! You want to animate things on your web site. Like that basketball that went bouncing by a second ago (if you want to see it again, click here). Cool eh? You know what? It's not that difficult. By the end of this lesson you'll be able to do things like that! All you need to do is change some CSS properties. The hard part is getting things to move EXACTLY like you want them to. For that, we need to use a little Mathematics. In this lesson we will not only learn how to animate objects across the screen but how to use some Math make them move efficiently and effectively.
We are going to use dom.js for this lesson so that we can make things work "cross browser" with no extra work.
(See, after you make a cross browser dom you can use it over and over again and simplify your later work!).
If you don't have a copy of dom.js in your account go back and get it from dhtml lab 11
Before we can make really cool animations, we need to know how to move a stylesheet from one place to another. We actually have done this before in earlier lessons but let's go over it again, especially now that we don't have to worry about writing for one browser or the other.
So let's begin by putting an image on the page in a stylesheet:
Type the follow code into CodeRunner below:
<head>
<script src=http://www.useractive.com/dom.js></script>
</head>
<body bgcolor=white onload=setTimeout('init()',200);>
<div id=earth style="position:absolute;" top:20; left:20;>
<img src=http://www.useractive.com/earth.gif>
</div>
</body>
|
Preview that. You should get a weird looking ball. I tried to make it look a bit like earth. Oh, well.
(Notice that I added the dom.js file. If you have done lesson 11 then you should have a copy of the dom.js file in your own account and so you should change my "http://www.useractive.com/dom.js" to just "dom.js" which should be saved in your account.
Eventually, we'll put in a sun and make the earth orbit around it, but for now we just need to know how to make it move at all. Add the red code:
<head>
<script src=http://www.useractive.com/dom.js></script>
<script>
function moveit(){
document.all["earth"].style.top = 150;
document.all["earth"].style.left = 200;
}
</script>
</head>
<body bgcolor=white onload=setTimeout('init()',200);>
<form>
<input type=button value="Move It" onclick='moveit();'>
</form>
<div id=earth style="position:absolute;" top:50; left:50;>
<img src=http://www.useractive.com/earth.gif>
</div>
</body>
|
Preview this, and click on moveit().
So you see to move things around, we simply change the top and left style properties. Now all that remains is learning some math so we can move this thing around like we want.
Parameterizing animation paths
Suppose we want our object to follow a path that depends on time, like a line or a circle. One thing you could do is figure out a bunch of coordinates and move the object in steps but that would be time consuming and be very inefficient (takes up a lot of web page space). A better way would be to have a mathematical expression that tells the object where to go. Such a mathematical expression is called a parameterization.
In this section we are going to do several "parameterizations". We'll do a line, a circle, and ellipse and an ellipse that's rotated.
A line
Add the blue stuff to your current document:
<head>
<script src=http://www.useractive.com/dom.js></script>
<script>
t=0;
function moveit(){
document.all["earth"].style.top = 3*t + 50;
document.all["earth"].style.left = 1*t + 50;
t = t + 3;
setTimeout("moveit()",100);
}
</script>
</head>
<body bgcolor=white onload=setTimeout('init()',200);>
<form>
<input type=button value='Move It' onclick='moveit();'>
</form>
<div id=earth style="position:absolute; top:50; left:50;">
<img src=http://www.useractive.com/earth.gif>
</div>
</body>
|
Preveiw that and click on the button. It should move in a line in the direction of the lower left.
Change the numbers. There are 6 numbers you can change so play around with it! Try changing the direction it goes (hint: use negative numbers). Also, try changing where it starts, and try changing it's speed.
Here is hint.
A Circle
Now we are going to add a sun, then have the earth rotate around the sun in a circular orbit.
Add the blue stuff to your current document:
<head>
<script src=http://www.useractive.com/dom.js></script>
<script>
t=0;
function moveit(){
document.all["earth"].style.top = 90*Math.cos(t) + 125;
document.all["earth"].style.left = 90*Math.sin(t) + 125;
t = t + .1;
setTimeout("moveit()",100);
}
</script>
</head>
<body bgcolor=white onload="setTimeout('init()',200);setTimeout('moveit()',200);">
<div id=earth style="position:absolute; top:50; left:50;">
<img src=http://www.useractive.com/earth.gif>
</div>
<div id=sun style="position:absolute; top:100; left:100;">
<img src=http://www.useractive.com/sun.gif>
</div>
</body>
|
Preview this one. Did the "earth" rotate in a circle around the sun?
Experiment with the numbers for this example. Try getting it to rotate counter clockwise. Get it to rotate faster. Increase the radius of the circle. Change where the circle is centered. After you have experimented for a while go read the discussion of the circle parameterization and animation.
You see, a circle is movement back and forth in two directions. The Math.sin() and Math.cos() functions simply make the earth move back and forth. In fact, try making the left property equal to 200.
Like this:
<head>
<script src=http://www.useractive.com/dom.js></script>
<script>
t=0;
function moveit(){
document.all["earth"].style.top = 90*Math.cos(t) + 125;
document.all["earth"].style.left = 200;
t = t + .1;
setTimeout("moveit()",100);
}
</script>
</head>
<body bgcolor=white onload="setTimeout('init()',200);setTimeout('moveit()',200);">
<div id=earth style="position:absolute; top:50; left:50;">
<img src=http://www.useractive.com/earth.gif>
</div>
<div id=sun style="position:absolute; top:100; left:100;">
<img src=http://www.useractive.com/sun.gif>
</div>
</body>
|
Preview this. You should see the earth moving up and down in the middle of the page. See if you can figure out how to make it move back and forth sideways. We can also make it move in a wavy pattern by setting the left property equal to something linear in t.
like this:
<head>
<script src=http://www.useractive.com/dom.js></script>
<script>
t=0;
function moveit(){
document.all["earth"].style.top = 90*Math.cos(t) + 125;
document.all["earth"].style.left = 20*t + 200;;
t = t + .1;
setTimeout("moveit()",100);
}
</script>
</head>
<body bgcolor=white onload="setTimeout('init()',200);setTimeout('moveit()',200);">
<div id=earth style="position:absolute; top:50; left:50;">
<img src=http://www.useractive.com/earth.gif>
</div>
<div id=sun style="position:absolute; top:100; left:100;">
<img src=http://www.useractive.com/sun.gif>
</div>
</body>
|
See what other patterns you can make this way.
Suppose we would like for the earth to travel only half of the circle and stop. Okay, we can do that. For this example I also want to show you how you can use degrees instead of radians. It's easier to think in terms of degrees as opposed to radians anyway. So to do half a circle, since the earth orbits the sun in 360 degrees, we need it to go between 0 and 180 degrees. Here is how you do it:
<head>
<script src=http://www.useractive.com/dom.js></script>
<script>
t=0;
function moveit(){
if(t>=0 && t< 180){
document.all["earth"].style.top = Math.cos(t*Math.PI/100) + 150;
document.all["earth"].style.left = Math.sin(t*Math.PI/100) + 150;
t = t + 3;
setTimeout("moveit(t)", 100);
}
}
</script>
</head>
<body bgcolor=white onload="setTimeout('init()',200);setTimeout('moveit()',200);">
<div id=earth style="position:absolute; top:50; left:50;">
<img src=http://www.useractive.com/earth.gif>
</div>
</body>
|
Preview this. There are several things to notice here. First, we changed the step size for t. from .1 to 3 since we are now using degrees instead of radians. Next, we changed t to t*Math.PI/100. This converts a number coming into the Math.sin() and Math.cos() into radians from degrees.
An Ellipse
Now we all know that the actual path the earth takes is an ellipse. So how do we make it take an elliptical orbit? This is really easy now that you've done a circle! Simply make the numbers in front of the Math.sin() and Math.cos() different. Like this:
<head>
<script src=http://www.useractive.com/dom.js></script>
<script>
t=0;
function moveit(){
document.all["earth"].style.top = 90*Math.cos(t) + 125;
document.all["earth"].style.left = 130*Math.sin(t) + 125;
t = t + .1;
setTimeout("moveit()",100);
}
</script>
</head>
<body bgcolor=white onload="setTimeout('init()',200);setTimeout('moveit()',200);">
<div id=earth style="position:absolute; top:50; left:50;">
<img src=http://www.useractive.com/earth.gif>
</div>
<div id=sun style="position:absolute; top:100; left:100;">
<img src=http://www.useractive.com/sun.gif>
</div>
</body>
|
Preview this. You should see the earth rotating in an ellipse with the elongated part in the horozontal direction. How do you think you can make the elongated part in the vertical direction?
What if you want the elongated part in an arbitrary direction? Well here you go, try this:
<head>
<script src=http://www.useractive.com/dom.js></script>
<script>
t=0;
function moveit(){
document.all["earth"].style.top =200*Math.cos(45*Math.PI/180)*Math.cos(t) - 70*Math.sin(45*Math.PI/180)*Math.sin(t) + 150;
document.all["earth"].style.left =200*Math.sin(45*Math.PI/180)*Math.cos(t) + 70*Math.cos(45*Math.PI/180)*Math.sin(t) + 250;
t = t + .1;
setTimeout("moveit(t)", 100);
}
</script>
</head>
<body bgcolor=white onload="setTimeout('init()',200);setTimeout('moveit()',200);">
<div id=earth style="position:absolute; top:50; left:50;">
<img src=http://www.useractive.com/earth.gif>
</div>
<div id=sun style="position:absolute; top:115; left:220;">
<img src=http://www.useractive.com/sun.gif>
</div>
</body>
|
Preview this. You should see the earth rotating in an ellipse with the elongated part at a 45 degree angle with the horozontal.
Click here for an explanation of how to control this type of ellipse.
The Bouncing Ball
Finally, as promised, I'll give you the code for the bouncing ball. The discussion of the math is beyond this lesson but let me just say it's first year calculus (newtons equations of motion).
HERE IS THE BOUNCING BALL CODE
That's enough for this lesson! See you at the next one.
|
