requestAnimationFrame在弱机器上运行缓慢.解决？

Question

所以,我正在做一个动画(不在网站/网页上!),使用Javascript.对于动画,我使用requestAnimationFrame而不是setInterval,因为setInterval不能很好地满足我的需要.

然而,虽然requestAnimationFrame在功能强大的设备上运行良好,但是慢速设备无法跟上标准的60 FPS,从而减慢了整个动画时间.

有没有办法让动画在一个时间范围内工作,并且FPS会根据它的保持程度而有所不同？其他想法也是受欢迎的.

(注意,我真的不想发布代码,只是听听我的意见.我只是想要想法)

Answer 1

看看这个演示:http://jsfiddle.net/q7ckebmh/

function Animate(id, useTime){
    var can = document.getElementById(id),
        ctx = can.getContext('2d'),
        wid = can.width,
        hei = can.height,
        lst = Date.now(),
        rps = 2*Math.PI,
        step = rps/60,                       // Expecting 60fps
        ang = 0;

    (function draw(){
        var dif = Date.now() - lst;          // Milliseconds since last we drew. 
        lst = Date.now();                    
        if (useTime) step = rps * dif/1000;  // Allows for variable fps

        ang += step;                         // Increment our placeholder. In the 
                                             // case where step is constant, this
                                             // ends up looking "slow" when we 
                                             // have less than 60fps. 

        ctx.clearRect(0,0,wid,hei);
        ctx.beginPath();
        ctx.arc(wid/2 + Math.cos(ang)*50,hei/2 + Math.sin(ang)*50, 
            10,0,2*Math.PI);
        ctx.fill();

        requestAnimationFrame(draw);
    })();
}

Animate('can1', false);
Animate('can2', true);

你会注意到,如果你调整帧的大小,第一个动画会因为跳过动画帧而变慢.

第二个动画似乎没有减速,因为它将圆圈的位置基于自上次调用以来的时间.它确实看起来有点不稳定,但总是这个位置是正确的.