javascript - 间隔动画和requestAnimationFrame的区别

Question

这两者有什么区别？ requestAnimationFrame 应该“间隔”或每 60 毫秒以 60fps 调用 cca(取决于屏幕)，并且使用 setInterval 您可以设置函数调用的延迟间隔。 然而，我已经用 、interval 和 requestAnimationFrame 制作了简单的绘图动画，看起来interval 函数更平滑并且工作正常，而 requestAnimation 函数破坏了浏览器(在 mozilla/chrome 和 2 台电脑上测试)。

区间函数:

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 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 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});

间隔演示:http://jsfiddle.net/Trolstover/5tmu4j6z/ requestAnimationFrame 演示:http://jsfiddle.net/Trolstover/5tmu4j6z/1

Answer 1

直接注释掉即可

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

看到这个:http://jsfiddle.net/5tmu4j6z/2/