Question

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

在原始画布中，我习惯做这样的事情：

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

效果很好; kineticJS动画有类似的成语吗？

Answer 1

我相信您正在寻找batchDraw()功能。

REF：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-batch-draw/

kineticjs.com/docs/Kinetic.Layer.html

这不会让你指定一个fps，但只会在计算机准备就绪时绘制一个框架......这样可以使绘图更平滑，闪烁更少。

或者，如果您没有帧延迟问题，并且需要通过过度性能来限制动画，则可以构建游戏时钟。我最近在raphael做了一个项目时使用了游戏时钟对象。 https://dl.dropboxusercontent.com/u/7308460/WebTest/CA.html

function objClock () {
        this.tick = 48; // 1/21 of a sec
        this.clock = null;
        this.todo = [];
        return this;
};

objClock.prototype.run = function() {
        var self = this;
        this.clock = setInterval( function(){ self.ticktock(); } , this.tick );
};

objClock.prototype.stop = function() {
        clearInterval(this.clock);
};

objClock.prototype.ticktock = function() {
        var i = this.todo.length;
        while (i--) {
                this.todo[i].doit();
        };
};



var clock = new objClock();
clock.run()

var tObject = new objCaffeine(paperAnimation);
clock.todo.push(tObject);

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

希望有所帮助

Answer 2

每个动态动画循环都会为您提供动画开始后的时间。

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

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);

演示：http://jsfiddle.net/m1erickson/Q283X/

在动态动画中限制FPS

2 个答案: