CreateJS/TweenJS, animate multiple properties with different functions in a single Tween

Question

I would like to animate properties of an object with different effects but in a single Tween (performance issue), is it possible?

Let's say I have an object {x:0,y:0} and I want to animate it to {x:100,y:100}. I started with:

createjs.Tween.get(myObject)
    .to({x: 100, y:100}, 1000, function (v) { 
        return v; 
    });

This animates all properties linearly, I would like to do something like this:

createjs.Tween.get(myObject)
    .to({x: 100, y:100}, 1000, function (v) { 
        if( animatingX ) return v;
        else return v*v;
    });

My current solution is to animate each property with a different tween:

createjs.Tween.get(myObject)
    .to({x: 100}, 1000, function (v) { 
        return v;
    });
createjs.Tween.get(myObject)
    .to({y:100}, 1000, function (v) { 
        return v*v;
    });

but having hundreds of objects my CPU load is excessive.

Any idea?

score 0 · Answer 1 · answered Jul 10 '15 at 07:45

I don't think that using hundreds of tweenJs object is excessive. I am using three animations as you do on my particles bitmap, and I can have 50-60 particles updating at the same time. The result is not overloading my CPU, actually, I tried on a XperiaZ2, an iPhone5 and a Samsung Galaxy S4 and it was smooth enough.

In my opinion, you can keep working with this technique without being afraid of efficiency.

CreateJS/TweenJS, animate multiple properties with different functions in a single Tween

1 Answers1