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

對於類似的補間對象，您可以使用交錯動畫方法。允許您定義對象的數組，每個時間交錯之間，回調等

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

TweenMax.staggerFromTo()

在性能方面，我不認爲這會有什麼不同。只是讓更多可讀和可編輯的代碼。