Question

这两者有什么区别？ requestAnimationFrame应该＆＃34; intervaled＆＃34;或者在60fps（取决于屏幕）上每隔60毫秒调用cca，并且使用setInterval可以设置函数调用的延迟间隔。然而我使用interval和requestAnimationFrame制作了简单的绘图动画，似乎间隔函数更平滑且工作正常，而requestAnimation函数破坏了浏览器（在mozilla / chrome和2 Pcs上测试）。

间隔功能：

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/

Answer 2

致电animate后setInterval将从第一个间隔开始运行，而requestAnimation将在下一次重绘画布之前运行。 requestAnimation再次运行的原因是因为它是递归的。

区间动画和requestAnimationFrame之间的区别

2 个答案: