Question

Im trying to understand how to make a javascript animation run smoothly and I’ve been reading some answers around here and I found something I don’t understand.

Here is the link to the question Smooth javascript animation

In the answer with most votes it says “which is why generally it’s a good idea to base position/frame on the amount of time that has elapsed since the start of the animation (using new Date().getTime()) rather than moving/changing a fixed amount each frame.”

Can anyone show me a very very simple example that uses the method from this answer, and explain how you then control the speed of the animation?

Answer 1

The basic idea is the following:

• You want to move a DIV from 0,0 to 100,0 in 1 second.
• You’d like it to have 50 frames per second (using a setTimeout(fun, 20))
• However, since the callback is not guaranteed to run in exactly 20ms, your callback needs to figure out when it was actually run. For example, let’s say your animation started at time X but your first animation callback wasn’t called until X+5ms. You need to calculate the position that the div should be at 25ms of the animation, your animation callback can’t assume 50 even steps.

Here’s a very simple code sample. I don’t usually code with globals but this is the easiest way to show the technique.

http://jsfiddle.net/MWWm6/2/

var duration = 1000; // in ms
var startTime; // in ms
var startX = 0;
var endX = 500;
// 0 means try to get as many frames as possible
// > 1: Remember that this is not guaranteed to run as often as requested
var refreshInterval = 0;
var div = document.getElementById('anim');

function updatePosition() {
    var now = (new Date()).getTime();
    var msSinceStart = now - startTime;
    var percentageOfProgress = msSinceStart / duration;
    var newX = (endX - startX) * percentageOfProgress;
    div.style.left = Math.min(newX, endX) + "px";
    if (window.console) {
        console.log('Animation Frame - percentageOfProgress: ' + percentageOfProgress + ' newX = ' + newX);
    }
    if (newX < endX) {
        scheduleRepaint();
    }
}

function scheduleRepaint() {
    setTimeout(updatePosition, refreshInterval);
}

div.onclick = function() {
    startTime = (new Date()).getTime();
    scheduleRepaint();
}