如何使用 createjs/easeljs 对动画进行计时？答案

【问题标题】：how do I time animations with createjs / easeljs?如何使用 createjs/easeljs 对动画进行计时？
【发布时间】：2014-05-07 21:00:30
【问题描述】：

我有四个我想出现的对象，一个接一个，中间有一秒钟。制作基于时间的动画的标准方法是什么？

我的想法是在 5 秒内不断询问 Ticker 的时间，当 Ticker 达到 1 秒、2 秒标记时，就会创建对象：

startAnimationTime = Ticker.getTime();
while (Ticker.getTime()-startTime < 5000) {
    if (Ticker.getTime() == 1000) {
        // create first object
    } else if (Ticker.getTime() == 2000) {
        // create second object
    } else if ...

有没有更优雅的方式来做到这一点？谢谢！

【问题讨论】：

标签： javascript event-listener easeljs createjs

【解决方案1】：

您可以为此使用 TweenJS。除了动画之外，它还可以制作一个膨胀的计时器，主要是因为您可以使用它进行链接。

var tween = createjs.Tween.get(this).wait(1);
for (var i=0; i<10; i++) {
    tween.wait(2000).call(createObjectFunction, [i, otherArg], this);
}
tween.call(doneFunction, null, this); // Call something when done

这将每 2 秒运行一个函数，共 10 次。

【讨论】：

【解决方案2】：

我建议使用TweenMax/GSAP 一个很棒的补间引擎和时间线引擎。你可以用各种方式做你想做的事。最简单的是：

TweenMax.delayedCall(1, function(){//create first object });
TweenMax.delayedCall(2, function(){//create second object });
etc...

...或者使用 TimelineMax 或 TimelineLite 来正确控制事物。

刚刚意识到这基本上正是@Lanny 所说的，但使用了不同的补间引擎。 Lannys 建议的优点是 tweenJS 已经存在于 createJS 中，我只是使用 TweenMax/GSAP，因为我已经习惯了；）

【讨论】：