2

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

然而，虽然requestAnimationFrame在动力充足的设备上运行良好，但慢速设备无法跟上标准的 60 FPS，从而减慢了整个动画时间。

有没有一种方法可以让动画在一个时间范围内工作，并让 FPS 根据它跟得上的程度而变化？也欢迎其他想法。

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

4

1 回答 1

7

看看这个演示：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);

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

第二个动画似乎并没有放慢速度，因为它将圆的位置基于自上次调用以来的时间。它看起来确实有点波涛汹涌，但位置总是正确的。

于 2013-01-24T18:37:44.237 回答