Question

我正在使用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不是一个选项，因为我已经定制了一个动画。

Answer 1

一些建议：

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

在有合理设置渲染循环后如何提高帧率和/或渲染质量方面，这就是尽可能多地优化//Do a new frame代码。

Answer 2

值得了解的一些事情：60以上的FPS通常毫无意义，因为浏览器很难重新绘制屏幕。并且setTimeout不一致。仅仅因为你告诉脚本每50ms运行一次（例如），并不意味着它会。在任何一个方向上通常都有高达15ms的差异。

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

查看http://weblogs.mozillazine.org/roc/archives/2010/11/measuring_fps.html了解某些特定于Firefox的见解。

在javascript中增加动画中的FPS

2 个答案: