Javascript 限制动力学动画中的FPS

有没有一个好的方法来限制动态动画的帧速率？我的网页有一个连续的动画。它只需要约12fps，但我得到约55fps的高CPU使用率

在原始画布中，我习惯于这样做：

function animFrame() {
    // ...
    setTimeout(function()
    {
        window.requestAnimFrame(animFrame);
    }, (1000 / targetFps));
}

var nextFrame=0;

var animation = new Kinetic.Animation(function(frame) {
  if(frame.time>nextFrame){
      nextFrame=frame.time+1000/12;
      circle1.setX(circle1.getX()+3);
  }
}, layer);

---

这很有效；kineticJS动画有类似的习惯用法吗？

我相信您正在寻找

batchDraw（）

函数

参考：

kineticjs.com/docs/Kinetic.Layer.html

这不允许您指定fps，但仅在计算机准备就绪时绘制帧。。。这使得绘制更平滑，闪烁更少

或者，如果您没有帧延迟问题，并且由于性能过高而需要限制动画，则可以构建游戏时钟。我最近在拉斐尔做一个项目时使用了一个游戏时钟对象

虽然这不是KineticJS代码。。。这可能会实现你的目标

---

希望它对您有所帮助

每个动力学动画循环提供动画开始以来的时间

可以将动画限制为12fps，如下所示：

function animFrame() {
    // ...
    setTimeout(function()
    {
        window.requestAnimFrame(animFrame);
    }, (1000 / targetFps));
}

var nextFrame=0;

var animation = new Kinetic.Animation(function(frame) {
  if(frame.time>nextFrame){
      nextFrame=frame.time+1000/12;
      circle1.setX(circle1.getX()+3);
  }
}, layer);

演示：