在javascript中增加动画中的FPS

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

一些建议:

1. 不要依赖setTimeout,setInterval或用于调度函数调用以提供高精确度或精度的任何其他内置的工具,尤其是当您正在执行定制的渲染代码.

2. 解开思想frame和time思想.是的,动画在内部是一系列帧,但最终的结果是应该看起来随着时间流畅地移动.因此,不是绘制框架'n',而是安排超时1000/FPS,然后假设"现在是绘制帧'n + 1'的时间",尝试绘制帧'n',在一段非常短的时间间隔内调度超时(如10 ms) ),然后(当超时触发时)测量动画开始和当前时间点之间经过的实际时间量.然后使用您的经过时间来确定在这个确切的时刻应该显示哪个帧(如果您的渲染代码需要很长时间,那么它可能仍然是'n',或'n + 1',或者甚至可能是'n + 3'执行),并渲染该帧.相信我,你会得到更顺畅,更一致的结果.

在一个合理设置的渲染循环后,如何提高帧速率和/或渲染质量,这就是//Do a new frame尽可能多地优化代码.