间隔动画和requestAnimationFrame之间的区别

Question

What is the difference between those two? requestAnimationFrame should be "intervaled" or invoked cca every 60milisecond on 60fps (depending on screen) and with setInterval you can set delay interval of invokation of function. Yet i have made simple drawning animation with both , interval and requestAnimationFrame and it seems that interval function is smoother and work properly, while requestAnimation function broke browser (tested on mozilla/chrome and on 2 Pcs).

interval function:

function animate(x) {
    var start = new Date();
    var id = setInterval(function () {
        var timepassed = new Date() - start;
        var progress = timepassed / x.duration;
        if (progress > 1) {
            progress = 1;
        }
        var delta = x.delta(progress);
        x.step(delta);
        if (progress == 1) {
            clearInterval(id);
        }
    }, x.delay);


}

requestAnimationFrame function:

function animate(x) {
    var start = new Date();
    var id = function () {

        var timepassed = new Date() - start;
        var progress = timepassed / x.duration;
        if (progress > 1) {
            progress = 1;
        }
        var delta = x.delta(progress);

        x.step(delta);
        requestAnimationFrame(id);
        if (progress < 1) {
            requestAnimationFrame(id);
        }
    }
    requestAnimationFrame(id)


}

function to do drawning

function move(delta) {
    var c = document.getElementById("myCanvas");


var ctx = c.getContext("2d");

    animate({
        delay:10,
        duration: 4000,
        delta: delta,
        step: function (delta) {
            ctx.clearRect(0, 0, c.width, c.height);
            ctx.beginPath();

            ctx.strokeStyle="red";
             ctx.lineWidth = 15;
ctx.arc(150, 150, 70, 0*Math.PI, delta*(2 * Math.PI));
            ctx.font="40px Georgia";
ctx.fillText((delta*100).toFixed(0)+"%",95,150);

ctx.stroke(); ;
        }


    });
}
move(function(p){return p});

demo for interval : http://jsfiddle.net/Trolstover/5tmu4j6z/ demo for requestAnimationFrame : http://jsfiddle.net/Trolstover/5tmu4j6z/1

Answer 1

just comment out

 //requestAnimationFrame(id);
        var timepassed = new Date() - start

see this: http://jsfiddle.net/5tmu4j6z/2/

Answer 2

After you call animate setInterval will run starting at the first interval, while requestAnimation will run before the next repaint of your canvas. The reason requestAnimation runs again is because it's recursive.