ericdrowell / KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://www.kineticjs.com
3.98k stars 754 forks source link

Animation and FRAF + use more than one instance #494

Open sendel opened 11 years ago

sendel commented 11 years ago

When Kinetic.Animation create, it set RAF function for each animtion object. If i want use FRAF hardly, it create setTimeout for each object! Its no good.

I think need create one global function, that work with all instance, for example put callback functions to array...

/* Example, not full tested. WARNING raf only FRAF (setTimeout())!!!! */

var far_cb_stack = [];
var tm_startded = false;

function FRAF() {

    tm_startded = true;

    cit = window.setTimeout(function(){
        inRaf = true;
        if(far_cb_stack.length==0){
            //nothing, stop while no need
            tm_startded = false;
            return; 
        }
        //console.log(far_cb_stack);
        var cb_stack = far_cb_stack.slice(0);
        far_cb_stack = [];
        while(cb_stack.length){
            var cb = cb_stack.shift() 
            cb.call();
        }
        FRAF();
    }, 1000 / 60);
}

Kinetic.Animation.requestAnimFrame = function(callback) {
    var raf = Kinetic.DD && Kinetic.DD.isDragging ? FRAF : RAF;
    raf = FRAF;
    far_cb_stack.push(callback);
    if(!tm_startded) raf();
};
ericdrowell commented 11 years ago

you're incorrect. take a look at this line:

https://github.com/ericdrowell/KineticJS/blob/master/src/Animation.js#L200

only one animation loop is used for all animations.

sendel commented 11 years ago

var any1 = new Animation(); ... var anyN = new Animation();

for every anyN will call this function! When its RAF (window.requestAnimationFrame ) that ok, but if set FRAF (setTimeout) for each objects will create self timer!

ericdrowell commented 11 years ago

Oh I see what you mean, you're referring to the FRAF exclusively. okay thanks, I'll take a closer look at this :)