DHTML animation with Sine Curves

A graphic designer friend of mine built a site for me with dynamic menus that moved when the user triggered a particular event like a mouseover. It was a requirement that these menus accelerated to look smooth and aesthetically pleasing. After looking through some not so good examples on line, it became apparent that I should go back to my Year 12 Mathematics text book to refresh my memory.

There are two main ways an object will accelerate in nature. Many follow the path of a projectile where the acceleration is constant (Eg: gravity) or some things follow Simple Harmonic Motion where the acceleration is proportional and opposite to the direction to the displacement of the object from it's equilibrium. A football is an example projectile and the piston in a car engine moves through Simple harmonic Motion.

I chose Simple Harmonic Motion because this can be plotted with trigonometry and these functions are native to Javascript thus avoiding writing your own equations.

The first thing to remember is you have to start with the looking at the numbers and not with the <div> tags on your web page. The latter method introduces too many factors that may hinder your progress.

If you run this you'll see an output of numbers that start from zero and approach 1.

<script type="text/javascript">

var steps = 20;

for(i = 0; i <= Math.PI/2; i=i+(Math.PI/(2*steps))){

document.write (Math.sin(i) + '');

}

</script>

You'll notice that there are more results closer to one than zero. This is the ratio of the opposite side of the triangle to the hypotenuse as you move through 0to 90 degrees. See: http://www.wku.edu/~tom.richmond/Sine.html (best viewed in Netscape 2.0!)

This is how you make your menus accelerate! All you need to do now is multiply these numbers by the final position of your <div> tag and you're in business. It would also be best to round these numbers off to whole numbers.

Here's those outputs applied to the div tag. There's no sleep function in Javascript to pause during a loop so you need to use setTimeout and get a function to call itself. A pain in the bum.

This script is covers only the basics. Once you get the hang on this you'll be able to apply this to larger applications.

Paste this into your HTML document and enjoy!

<script type="text/javascript">

var steps = 20;

var positions = new Array();

var pos = 0;

var mydiv;

function moveMe(element, start, distance){

//which element to move

mydiv = document.getElementById(element);

//build an array of the y positions

for(i = 0; i <= Math.PI/2; i=i+(Math.PI/(2*steps))){

positions.push( Math.round(start + distance * Math.sin(i)) );

}

//start the loop

doMove();

}

function doMove(){

mydiv.style.top = positions[pos]+'px';

pos++;

if(pos<positions.length){

//go again until we've plotted them all.

setTimeout("doMove()", 30);

}

}

</script>

<a href="#">Go!</a>

<div id="mydiv" style="position: absolute; top: 50px; left: 50px; width: 120px; border: 1px black solid;">

hello world

</div>

• Slashdot it!
• Digg it:
  
• Del.icio.us