CODEWITHSUNDEEP
javascripthtml5-canvaskineticjs
tenfour
tenfour

Reputation: 36906

Limit FPS in kinetic animation

Is there a good method to limit the frame rate of a kinetic animation? My webpage has a continuous animation. It only needs to be about 12fps, but I am getting about 55fps with high CPU usage.

In raw canvas, I am used to doing something like this:

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

This works well; is there a similar idiom for kineticJS animations?

Upvotes: 0

Views: 150

Answers (2)

markE
markE

Reputation: 105035

Each Kinetic animation loop feeds you the time since the animation began.

You can throttle the animation to 12fps like this:

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

Demo: http://jsfiddle.net/m1erickson/Q283X/

Upvotes: 1

CaffeineAddiction
CaffeineAddiction

Reputation: 823

I believe you are looking for the batchDraw() function.

ref:

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

kineticjs.com/docs/Kinetic.Layer.html

This wont let you specify a fps, but will only draw a frame when the computer is ready ... which makes it smoother drawing with less flicker.

alternatively if you are not having issues w/ frame lag, and need to limit animation due to over-performance, you could build a game clock. I used a game clock object while doing one of my projects in raphael recently. 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);

While this is not KineticJS code ... this may accomplish what you are going for.

Hope it helps

Upvotes: 1

Related Questions