Как использовать временную шкалу в tweenjs

Документ говорит:

Шкала времени Класс шкалы времени синхронизирует несколько анимаций и позволяет управлять ими как группой.

но нет примера, как его использовать. Если я создаю временную шкалу с

var tl = createjs.Timeline();

ни одна из фигур больше не отображается.

Временная шкала - отличная функция в TweenMax, и мне нравится использовать ее и на холсте.

Источник

2 ответа

Решение

Создание Timeline не должно влиять на рендеринг Shapes - не могли бы вы предоставить больше кода или объяснить, что вы пытаетесь сделать?

Использование 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 - они прекрасно работают вместе.

Источник

У меня есть пример:

//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 затухает за 400 миллисекунд

Источник
Другие вопросы по тегам