如何在 tweenjs 中使用时间轴

Question

文档说：

Timeline The Timeline class synchronizes multiple tweens and allows them to be controlled as a group.

但是没有示例如何使用它。如果我用

创建时间轴

var tl = createjs.Timeline();

none 个形状已渲染。

时间轴是 TweenMax 中的一个很棒的功能，我也喜欢在 canvas 中使用它。

Answer 1

创建 Timeline 应该不会影响形状的呈现 - 您能否提供更多代码或进一步解释您想要做什么？

Timeline的用法非常简单：

    var timeline = new createjs.Timeline(); //create the Timeline
    timeline.addTween(tween, tween2); // add some tweens
    timeline.setPaused(true); // pause all tweens 
    timeline.setPosition(300); // set position on all tweens ...

但是，如果您更习惯于 GSAP，则可以将 GSAP 与 EaselJS/CreateJS 结合使用 - 它们可以很好地协同工作。

Answer 2

我有一个例子：

//First Tween on rav4 object

var ravScaleTween = new createjs.Tween.get(rav4)
        .wait(350)
        .to({scaleX:1, scaleY:1, x:ravEndPoint.x, y:ravEndPoint.y}, 1500, createjs.Ease.quadOut);

//Second Tween on rav4 object

var ravAlphaTween = new createjs.Tween.get(rav4)
        .wait(350)
        .to({alpha:1}, 400);

//Create Timeline class

var ravTimeLine = new createjs.Timeline();
ravTimeLine.addTween(ravScaleTween,ravAlphaTween);

rav4 对象开始缩放并移动到 x 和 y 位置（1500 毫秒），因为 rav4 对象的 alpha 在 400 毫秒处逐渐消失

如何在 tweenjs 中使用时间轴

How to use the Timeline in tweenjs

timeline

createjs

tweenjs