javascript - 如何控制KineticJS中的帧率？

Question

如何在KineticJS中控制渲染循环帧速率？ Kinetic.Animation的文档显示了传递给渲染回调的帧速率，而Kinetic.Tween似乎没有帧​​速率逻辑，但是无论如何我都看不到强制性，比如说可以达到60fps时为30fps。

充满好奇的上下文随即出现，但问题就这么简单。如果有人继续阅读，欢迎提供其他建议。如果您已经知道答案，请不要浪费时间阅读！

我正在开发一个音乐应用程序，它结合了一些基于DOM的GUI控件（使用jQuery Mobile的当前迭代）和基于Canvas的GUI控件（使用KineticJS）。后者涉及一些动画。因为动画元素是由音乐播放触发的，所以我使用Kinetic.Tween来避免记住给定音符已播放多长时间（Kinetic.Animation需要这样做）的复杂性。

这种方法在Chrome（在快速的计算机上）以60fps的速度运行时效果很好，但在iOS 6.1 Safari（iPad 2）上的运行速度却足够慢，以至于在动画发生时对控件进行操作变得有些混乱。我没有使用WebGL（除非KineticJS或Chrome默认情况下是针对画布执行此操作？），而且当我打包本机UIWebView时，这不是选项。

当我超越原型而想要做出更加坚定的技术决策时，我看到了以下几种选择，按照感知的优势排序：


找出如何限制帧速率。因为我的动画大量使用alpha渐变，但不涉及运动，所以我相信我可以20-30fps的速度拍摄并看起来不错。也可以在更快的设备上扩大规模。
不要立即对触摸输入做出响应，而是将它们添加到队列中，我会以固定的时间间隔对其进行轮询，并且仅将最新鲜的内容用于触摸移动。这对我的非交互式动画元素没有影响，但是从另一个方向解决了该问题，试图减轻用户交互的负担。这将需要使Kinetic控件成为静态控件并手动跟踪触摸坐标（如果有帮助，这不是费力的工作）。
将基于DOM的GUI重写为基于画布的（KineticJS）；将基于WebAudio的引擎重写为HTML5音频；利用CocoonJS或Ejecta进行GPU加速。这意味着必须手动编码诸如文件选择器和导航菜单之类的东西（不好的东西）。失去WebAudio非常严重，因为它消除了DSP效果和非常细粒度的低延迟定时（在iPad 2上也可以正常工作）的功能。
重写应用程序，以利用CocoonJS将基于DOM的GUI和WebAudio与基于Canvas的元素分开。我不确定这是否可行，但是CocoonJS在两个组件之间将JavaScript代码作为字符串传递给了我，这一事实使我非常怀疑这个想法的牢固性。这可能是可行的，但最好的情况是我与CocoonJS的发展息息相关。我不喜欢以这种方式进行架构设计，但也许听起来并不那么糟糕？
使动画少些多汁。这样做的好处不是最好，不是因为它对设计有影响，而是因为我实际上在任何时候都只能在其中心视图组件中制作约20个简单的形状的动画，但是它们包括透明性，并且覆盖的范围约为1000x300。像滑块之类的其他组件同样是准系统。换句话说，现在还不是很多汁。
克服对Objective-C的严重过敏；忘记浏览器，Android和其他移动操作系统。拥有一个本机执行的快速应用程序，并具有闪亮的Apple认可的小部件。对于这种方法，我最大的问题是，多年以来，从技能角度来看，都不想被困在Objective-C现实中。我只是不喜欢它。
购买iPad 3或更高版本。由于我已经在假装Android不存在（我没有要测试的设备），为什么不假装没有人仍然拥有iPad 2？我认为这正在推卸责任-如果我可以在iPad 2上获得令人满意的性能，那么随着我添加更多功能，我会对应用程序的性能充满信心。


我可能忽略了选择，或者对于如何解决这个问题天真。有人会说我想建立的只是愚蠢的。但是它工作得很好，只是还没有准备好在iPad 2上使用黄金时间。

Answer 1

是的，您可以控制Kinetic.Animation帧速率

Kinetic.Animation发送具有frame.time属性的框架对象。

.time是一个运行计时器，您可以使用它来限制动画速度。

这是一个限制Kinetic.Animation的示例：http://jsfiddle.net/m1erickson/Hn3cC/

var lastTime;
var frameDelay=1000;

  var loop = new Kinetic.Animation(function(frame) {

      var time = frame.time

      if(!lastTime){lastTime=time;}

      var elapsed = time-lastTime;

      if(elapsed>=frameDelay){

          // frameDelay has expired, so animate stuff now

          // set lastTime for the next loop 
          lastTime=time;

      }
  }, layer);

loop.start();