JsGear -- JavaScript版变速齿轮

  在JS开发中经常会用到定时器,尤其是一些动画特效,小游戏等完全依靠定时器驱动。

  要让动画跑得更流畅,我们常常使用较高的刷新率,例如60fps。由于每一帧的间隔非常短,很难看清楚每一帧具体的运行情况。

  有时整体上看似乎一切良好,但如果放慢定时器的速度,却会发现其中有部分帧或因代码里的小问题,并没有按我们想象那样显示。由于播放的非常快,这些潜在的小问题都掩盖了。

  为了方便动画脚本的观察和调试,我们尝试用js模仿一个类似windows下经典的应用程序:变速齿轮,能即时修改系统时钟的运行频率!这听起来似乎很神奇吧~其实原理并不复杂。

  和传统的变速齿轮运行机制一样,我们使用钩子程序勾住默认那几个定时器相关的API —— setTimeout, setInterval, clearTimeout, clearInterval。当然,所谓的钩子程序,无非就是预先保存原来的API引用,接着用自己的程序覆盖他们。这样我们就可以拦截之后的定时器调用,然后根据虚拟时钟的速率,自己维护回调队列,于是就产生了定时器变速的效果。如果同步上再严密点,甚至还可以覆盖Date对象,让时间的流逝速度都随之而变!

  当然,有不少问题仍然难以解决的。

  时钟频率被加快后,每一帧的时间间隔被大幅缩短,甚至小于1ms。而js定时器频率众所周知,远达不到这样的精度。于是只能用“跳帧”来解决这个问题。例如,一个2ms的定时器,理论上应该每2ms触发一次,但某个浏览器最短只支持16ms的间隔,那么每次定时器触发内循环调用 16/2 = 8次回调,来弥补频率上的不足。但由于这8次回调是在同个事件里一口气执行的,所以前7次的界面操作都不会立即渲染出来,只有第8次的操作才会有所表现,所以就有了“跳”的感觉。

  但是这个方法只能解决 setInterval 的定时器,因为它的时间间隔以及回调都是固定的。对于 setTimeout 这样每次延时不确定的,甚至还无法确定下一帧是否接着运行,跳帧机制就有些无从为力了。

  不过只实现一个基本功能的还是比较容易的:

  JsGear,就是根据这个思路实现的 JavaScript 变速齿轮插件,对时间相关的API都进行了严密的封装。因为它完全是用js/css制作的,所以不依赖任何插件,引入页面就可以使用。

  为了让使用更快捷,这两天换了一个新概念的操作界面,并且支持IE6+, FireFox, Chrome, Safari, Opera浏览器,以及Quirks模式。

  测试Demo:  http://www.etherdream.com/JSGear/demo.html

 

  

  

  在自己的页面里测试很简单,把jsgear.js插入到所有的脚本之前就可以。这里上传了一份到博客附件里,复制下面代码到自己的页面内即可使用:


 

  

  当然,目前还只是演示版本,实现了基本功能,还有不少小问题。大家要是有什么好多思路和建议,欢迎探讨。

posted @ 2012-05-29 15:09 EtherDream 阅读(...) 评论(...) 编辑 收藏