如何在 Adob​​e Animate CC 中使用 createJS 代码创建基于时间轴的动画？

Question

我想通过使用 createJS 使用 Adob​​e AnimateCC 中的代码进行补间，但是当我尝试将它们链接在一起/按顺序动画对象时，我遇到了麻烦，因为它们都同时开始（而不是方形移动然后圆圈移动），这是打开的 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);
});