Как создать анимацию на временной шкале с использованием кода createJS в Adobe AnimateCC?

Question

Я хочу использовать анимацию с помощью кода внутри Adobe AnimateCC с помощью createJS, но когда я пытаюсь связать их вместе / анимировать объекты в последовательности, у меня возникают проблемы, так как они оба запускаются одновременно (а не квадратное перемещение). затем круг движется), вот открытый файл AnimateCC: http://spectrumcreative.co.nz/stackOverflow/animateWithCode.fla, а вот мой код:

var targetSquare = this.square;
var tweenSquare = createjs.Tween.get(targetSquare, {loop: false})
.to({x: 300}, 1500, createjs.Ease.bounceOut)

var targetCircle = this.circle;
var tweenCircle = createjs.Tween.get(targetCircle, {loop: false})
.to({x: 300}, 1500, createjs.Ease.bounceOut)

Answer 1

Самый простой способ - использовать wait () Я только что создал animationTime переменную для повторного использования, вы можете установить любое количество времени в wait ()

var animationTime = 1500;
var targetSquare = this.square;
var tweenSquare = createjs.Tween.get(targetSquare, {loop: false}).to({x: 300}, animationTime, createjs.Ease.bounceOut)

var targetCircle = this.circle;
var tweenCircle = createjs.Tween.get(targetCircle, {loop: false}).wait(animationTime).to({x: 300}, animationTime, createjs.Ease.bounceOut);

Это также можно сделать так, чтобы вторая анимация начиналась только после завершения первой и запускалась call () .

var animationTime = 1500;
var targetSquare = this.square;
var tweenSquare = createjs.Tween.get(targetSquare, {loop: false}).to({x: 300}, animationTime, createjs.Ease.bounceOut).call(function(){
    var targetCircle = this.circle;
    var tweenCircle = createjs.Tween.get(targetCircle, {loop: false}).to({x: 300}, animationTime, createjs.Ease.bounceOut);
});