html - 做画布动画时的最佳 FPS 是多少？

Question

我正在使用画布制作一些动画，并且正在使用 requestAnimationFrame API

window.requestAnimFrame = (function(callback)
{
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

    //Call the function for the next animation at 60 fps        
    function(callback) {window.setTimeout(callback, 1000 / 60);};
})();

在我在网上看到的大多数示例中，setTimeout 设置为 60 FPS。显然，我可以将其设置得更高以获得更流畅的动画，但这会以用户的性能为代价。我只是想知道是否有人可以向我指出一些关于我应该将其设置多高或画布动画的最佳帧速率的好信息？这是否也因某人使用的浏览器而异？

Answer 1

60 fps 连接到最常用的屏幕刷新率 60 Hz。这就是为什么你到处都能找到这个值的原因。

要获得“最佳”是非常困难的。动画的流畅程度很大程度上取决于硬件和浏览器。一个简单的有向图（用 D3 和 SVG 可视化）在我的 Firefox 笔记本上结结巴巴。在我同事的 Mac 和 Chrome 上，动画效果很好。（硬件几乎相同。）

我认为 60 fps 是最好的配置。由于屏幕的刷新率，120 fps 可能没有用。