增加FPS以JavaScript

动画我正在使用JavaScript动画：增加FPS以JavaScript

function animate(){ 
    window.setTimeout(function(){ 

     //Do a new frame and recall this function till the animation is finished 

    }, 1000/FPS);//FPS Default 15 approximately 60FPS 
} 
animate();

我不知道我怎样才能提高FPS不失品质？使用已经内置的css3不是一个选项，因为我有自定义的动画。

来源

2011-04-09 einstein

你尝试过'window.requestAnimationFrame'吗？ – 2014-07-16 17:35:07

值得了解一些事情：60以上的FPS通常毫无意义，因为浏览器比任何时候都更快地重新绘制屏幕。和setTimeout不一致。仅仅因为你告诉脚本每50ms运行一次（例如），并不意味着它会。在任一方向上通常有15ms的变化。

提高质量的体面策略将使用某种缓解计算，将FPS与浏览器重绘周期同步 - 并使用运动模糊等来平滑效果。

查看http://weblogs.mozillazine.org/roc/archives/2010/11/measuring_fps.html了解Firefox的一些具体见解。

来源

2011-04-09 11:35:26

嗨！这是一件奇怪的事情。我使用了window.webkitRequestAnimationFrame函数，我的FPS比使用普通的setTimeout函数要低。 – einstein 2011-04-09 15:04:04

一对夫妇的建议：

不要依赖setTimeout，setInterval，或任何其他内置的实用程序，用于调度函数调用以提供高准确度和精确度，特别是当你执行自定义渲染代码。
在您的想法中解耦frame和time的想法。是的，动画在内部是一系列的帧，但最终的结果是应该看起来随着时间流逝而流动的东西。因此，不是绘制帧'n'，而是为1000/FPS安排超时，然后假定“现在是绘制帧'n + 1'的时间”，尝试绘制帧'n'，将时间安排为非常短的时间间隔（如10 ms），然后（当超时触发时）测量动画开始时间和当前时间点之间经过的时间量。然后用你的经过时间来决定在这个时刻这个帧应该显示什么（如果你的渲染代码需要很长的时间，这个帧可能仍然是'n'或'n + 1'，或者甚至'n + 3'执行），并渲染该帧。相信我，你会得到更顺畅，更一致的结果。

在如何提高帧率和/或渲染质量，一旦你有一个合理的建立渲染循环而言，这是所有关于优化//Do a new frame代码就像你所能。

来源

2011-04-09 11:35:47 aroth

您能否提供示例源代码以更好地理解您关于'frame'和'time'解耦的想法？谢谢。 – 2014-03-28 19:52:50

增加FPS以JavaScript

回答

相关问题