CODEWITHSUNDEEP
javascriptanimationcreatejschainingtweenjs
jerikojones
jerikojones

Reputation: 63

Chaining tweens in Tween.js for multiple objects

So I've got a big stack of easel.js objects which I'm keeping in an array.

I'd like to chain a set of tweens for each object then, when each tween chain finishes, reset the properties of the tweens and go again. This is what I've got so far:

function setObjectTween(tgt){
        createjs.Tween.get(tgt, { loop: false })
          .to({ x: randomOnStage("x", constraint[0],constraint[1]) }, randomInRange(100,1000), createjs.Ease.getPowOut(4))
          .to({ y: randomOnStage("y", constraint[0],constraint[1]) }, randomInRange(100,1000), createjs.Ease.getPowOut(4))
          .call(resetTween);

    }

    function resetTween(e){
        createjs.Tween.removeAllTweens(e.target);
        setObjectTween(e.target);
    }

Problem is that the resetTween seems to stop the tweens of all the clips at the same time. I thought that setting up each object with a tween like so:

for(i=0;i<objpool1.length;i++){setObjectTween(objpool[i]);}

would keep each object's tween independent. When it gets to the end it would then call the reset function which would remove the tween just for that object, then re-run the setup, again just for that object, kicking off the tween again with new, random values.

Any ideas why the reset seems to only affect the last object in the array instead of working independently for each object (nb, all the array objects work the first time, but the reset seems to reset all of them, and then subsequently only work on the last object in the array).

cheers, A.:

e2a: Sorted. Documentation read fail. Thanks to the answer below! :o)

Upvotes: 0

Views: 1825

Answers (1)

Lanny
Lanny

Reputation: 11294

The removeAllTweens methods does not take any parameters. What is happening is that you are killing every tween (preventing subsequent calls to resetTween by other tweens), and only the very first tween that finishes gets to restart.

Change it to removeTweens instead.

function resetTween(e){
    createjs.Tween.removeTweens(e.target);
    setObjectTween(e.target);
}

Here is a fiddle: http://jsfiddle.net/6d9bckb4/

Upvotes: 1

Related Questions