Choppy result from DeltaTime function in JS

Question

I'm building an HTML5 canvas game that's using requestAnimationFrame to render each frame in the canvas. To move animations at a rate based on seconds, not framerate, I am building a deltaTime function similar to that used in Unity:

var startTime = new Date().getTime();
var lastTime = null;

function deltaTime()
{
    if (lastTime == null)
    {
        lastTime = new Date().getTime();
    }
    var dt = new Date().getTime() - lastTime;
    lastTime = new Date().getTime();
    return dt;
}

However, when I multiply this value by the animation speed, it causes a choppy result instead of a smooth animation. It appears that millisecond accuracy is not enough. How can I improve this function to produce a smooth result?

Answer 1

Check out the newer version of requestAnimationFrame that sends in an elapsed time that is accurate to the sub-millisecond

http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision

But that may not be the cause of your choppiness.

Using requestAnimationFrame (aka RAF) with a delta-time causes the object being animated to appear in an accurate location.

If you're animating the sun across the sky, then RAF+deltaTime will insure that whenever the sun is drawn, it will be drawn at the correct spot in the sky. It will insure accuracy at the cost of choppy sun movement.

RAF+deltaTime sacrifices smooth animation for positioning accuracy.

You don't give a code example, but the solution is to make sure your code is efficient enough to fully draw within the RAF timespan.

Alternatively, you can make the amount of movement smaller so a skipped frame will not be very noticeable to the user.