Слишком много обратных вызовов в Tweenmax JS

Question

Есть ли лучший способ написать этот тип кода в Tweenmax?

TweenMax.to("#second-scene .layer-one", 0.5, {delay:0.2, top:0, onComplete: function() { 

                    TweenMax.to("#second-scene .layer-two", 0.5, {top:0, onComplete: function() {

                        TweenMax.to("#second-scene .layer-three", 0.5, {left:0, onComplete: function() {

                            TweenMax.to("#second-scene .layer-four", 0.5, {left:0, onComplete: function() {

                                TweenMax.to("#second-scene .layer-five", 0.5, {left:0, onComplete: function() {

                                    TweenMax.to("#second-scene .layer-six", 0.5, {top:0} );

                                }} );
                            }} );
                        }} );
                    }} );
                }} );

И я хотел бы знать, повлияет ли на это на производительность.

заранее спасибо

Answer 1

Вы должны использовать TimelineLite / Max:

var tl = new TimelineLite();

tl.to("#second-scene .layer-one", 0.5, {delay:0.2, top:0});
tl.to("#second-scene .layer-two", 0.5, {top:0});
//and so on

Временная шкала выполняет анимацию в последовательности, поэтому нет необходимости в обратных вызовах

Answer 2

Вы можете использовать метод Staggered Animation для похожих объектов анимации. Позволяет определить массив объектов, время между каждым пошаговым выполнением, обратные вызовы и т. Д.

var objects = [obj1, obj2, obj3];
TweenMax.staggerFromTo(objects, 3, {top:100}, {top:0}, 0);

TweenMax.staggerFromTo ()

Производительность мудрая, я не думаю, что это будет иначе. Просто делает для более читабельного и редактируемого кода.