Question

我有很多需要预渲染的画布（大约200张）。当浏览器渲染它们时，页面的其他部分在更改期间不会重新绘制（例如进度条），因此页面上会出现很多不稳定的更新/动画。我尝试通过window.requestAnimationFrame调用画布绘图，但这没有改进它。

如何强制它更频繁地重绘？

动画帧的使用方式示例

//This is done  200 times (once for each canvas)
function draw()
{
    //Draw the image to canvas
    context.drawImage( ... );
}

requestAnimationFrame( draw );

Answer 1

rAF只能请求一个新的框架（与监视器同步） - 无法保证获得一个。

如果您的代码使用的时间超过了可用的时间预算（对于60 Hz系统大约需要16.7毫秒），这可能会更新200幅画布，那么在下一个可用时，您将无法获得一帧。

如果你的代码使用了很多时间，将来会有很多帧，动画会显得“生涩”。

在这些情况下，最好使用setInterval降低帧速率并使用f.ex.延迟时间为1000/15，因此不会在监视器同步时更新。

更新200幅画布是指更新区域也比画布的正常尺寸大200倍。此外，浏览器必须维护200个元素的重新绘制，而不仅仅是一个元素。你只能在JavaScript中做这么多..

Answer 2

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

浏览器可以将并发动画一起优化为单个重排和重绘周期，从而实现更高保真度的动画效果。例如，基于JS的动画与CSS过渡或SVG SMIL同步。另外，如果您在不可见的选项卡中运行动画循环，浏览器将无法继续运行，这意味着CPU，GPU和内存使用量会减少，从而延长电池续航时间。

Answer 3

我会这样做：

//This is done  200 times (once for each canvas)
function draw()
{
    //Draw the image to canvas
    context.drawImage( ... );
}

function loop()
{
    draw();
    requestAnimationFrame( loop );
}

loop();

通过这种方式，您可以创建无限循环，受浏览器限制为每秒最多60帧。如果浏览器或计算机速度较慢，则帧率会降低。根据我的经验，它确实提高了性能。

requestAnimationFrame的目的是什么？重绘时间没有任何区别

3 个答案: