JavaScript: Easing Animation Formula
This page is an example of easing with JavaScript. Easing is slowing the transition of a moving object as it nears its intended destination. It looks much nicer than just a consistent rate of movement and a sudden and hard stop. When you put the breaks to your car as you near a red light, you slow down gradually. Imagine just going all the way to the stopline at the same speed you were driving and then just suddenly halting. Easing with JavaScript is more subtle than not slamming your breaks, but it is noticable.
The formula for easing is somewhat simple in Javascript, but you may have to tweak it a bit. With ActionScript in Flash it is much more straightforward: the speed of movement is half the distance. So if you’re 500 pixels away from your destination, you’re moving at 250 pixels per transition, at 499 you’re moving at (499/2):
rate = (distance - currentPosition)/2
currentPosition += rate
I still haven’t gotten it to look just the way I want it to, and I’m still using setTimout, and I am only experimenting, but here is my code:
distancePerInterval = Math.ceil((destination - parseInt($('mover').style.left))/32);
Not quite the same thing. It also does not move at the same speed in all browsers. In Firefox it is too fast, in IE it is too slow.
I will keep playing with it to see if I can get it to be just the way I want it.