Ограничение FPS в кинетической анимации

Question

Есть ли хороший способ ограничить частоту кадров кинетической анимации? Моя веб-страница имеет непрерывную анимацию. Это всего лишь около 12 кадров в секунду, но я получаю около 55 кадров в секунду при высоком потреблении процессора.

В сырой холст, я привык делать что-то вроде этого:

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

Это хорошо работает; есть ли подобная идиома для кинетических анимаций?

Answer 1

Я считаю, что вы ищете функцию batchDraw().

исх:

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

kineticjs.com/docs/Kinetic.Layer.html

Это обыкновение позвольте вам указать кадров в секунду, но будет только сделать кадр, когда компьютер готов. .., что делает его более гладким, с меньшим мерцанием.

альтернативно, если у вас нет проблем с задержкой кадра, и вам необходимо ограничить анимацию из-за чрезмерной производительности, вы можете построить игровые часы. Я использовал объект игровых часов, одновременно выполняя один из моих проектов в 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

Каждого Kinetic цикл анимации питает ваше время, так как анимация началась.

Вы можете задушить анимацию 12Гц, как это:

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/