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

Question

我想通过使用createJS在Adobe 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)

标签： createjs

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);
});