requestAnimationFrame 在较弱的机器上运行缓慢。解决办法吗？

所以，我正在制作一个动画（不是在网站/网页上！），它使用Javascript。对于动画，我使用requestAnimationFrame代替setInterval, as setInterval不能很好地满足我的需要。

然而，尽管requestAnimationFrame在性能良好的设备上运行良好，慢速设备无法跟上标准 60 FPS，从而减慢整个动画时间。

有没有办法让动画在一个时间范围内工作，并且让 FPS 根据其跟上的情况而变化？也欢迎其他想法。

（注意，我真的不想发布代码，只是相信我的话。我只是想要想法）

看看这个演示：http://jsfiddle.net/q7ckebmh/ 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);

您会注意到，如果调整帧大小，第一个动画会减慢，因为它跳过动画帧。

第二个动画似乎并没有减慢速度，因为它以自上次调用以来的时间为基础来确定圆圈的位置。它看起来确实有点不稳定，但位置总是正确的。