Question

所以，我正在做一个使用Javascript的动画（不在网站/网页上！）。对于动画，我使用的是requestAnimationFrame而不是setInterval，因为setInterval无法满足我的需求。

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

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

（注意，我真的不想发布代码，只是说说这个。我只是想要想法）

Answer 1

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

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

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

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

1 个答案: