1

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

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

如何使用动画帧的示例

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

requestAnimationFrame( draw );
4

3 回答 3

2

rAF 只能请求一个新帧（与监视器同步） - 不能保证得到一个。

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

如果您的代码使用了很多时间，那么将来可能会有很多帧，并且动画会出现“生涩”。

在这些情况下，最好setInterval使用 f.ex来降低帧速率。1000/15 延迟，只是忍受它不会不时更新监视器同步。

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

于 2013-10-17T18:54:19.307 回答
0

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

浏览器可以将并发动画一起优化为单个回流和重绘循环，从而获得更高保真度的动画。例如，与 CSS 过渡或 SVG SMIL 同步的基于 JS 的动画。此外，如果您在不可见的选项卡中运行动画循环，浏览器将不会继续运行，这意味着 CPU、GPU 和内存使用量减少，从而延长电池寿命。

于 2013-10-17T18:47:29.550 回答
0

我会这样：

//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 帧。如果浏览器或计算机速度慢，则帧率会降低。以我的经验，它确实提高了性能。

于 2013-10-17T18:55:33.390 回答