Make Tween.get multiple targets

It’s nice to have multiple targets in Tween.get to reduce the number of lines in code:

var target_a = new createjs.Shape();
var target_b = new createjs.Shape();
var targets = [target_a, target_b];

createjs.Tween.get(targets, {loop:true}, true)
    .to({x: 300, y: 300}, 3000);

// also support the following:
createjs.Tween.get(target_a, {loop:true}, true)
    .to({x: 300, y: 300}, 3000);
createjs.Tween.get(target_b, {loop:true}, true)
    .to({x: 300, y: 300}, 3000);

[gskinner]

And of course, you could use Timeline, which is specifically designed for coordinating parallel tweens.

[lannymcnie]

@zur4ik If the tweens have the same duration, you can just create two separate ones, but only add a call() to one of them (the longer). Tweens are deterministic, so they should play at the duration specified, no matter what the CPU performance is.

If you have complex tween chains, and don’t want to determine the length, you could just have them both call the same method, and ensure both have finished before moving on:

tween1 = createjs.Tween.get(obj).to({}, 1000).wait(1000).to({}, 3000).wait(1000).etc()
  .call(tweenComplete);
tween2 = createjs.Tween.get(obj2).etc()
  .call(tweenComplete);

var tweensComplete = 0;
function tweenComplete(event) {
  tweensComplete++;
  if (tweensComplete == 2) {
    // do something
  }
}

Obviously that is just an example, but those are probably your best options. There is no framework in TweenJS to manage multiple objects with a single tween, so you will have to come up with something that works for your case.

Cheers,