如何使用延遲TweenMax.to進行動畫製作？

我使用TweenMax創建了一個動畫，該動畫將div的寬度從其父元素的100％寬度變爲零。我有三個彼此相鄰的div，它們與下面的圖片重疊。現在我希望每個preload div類將在前一個觸發後幾秒鐘開始。如何使用延遲TweenMax.to進行動畫製作？

我嘗試類似setTimeout的東西，但我無法得到它的工作。我該如何達到上述目標？

CodePen：https://codepen.io/anon/pen/aWVZXL

來源

2017-05-06 Caspert

你想逐個刪除....？ –

是的。所以當第一個div完成動畫時，下一個應該開始，或者當它在動畫的中間時，另一個將開始。 @MadhuMagar – Caspert

我已經改變了腳本。如果你願意，請重構。

$(document).ready(function() { 
var toBeAnimated; 
var currentAnimat = 0; 

$('.link').click(function() { 
    toBeAnimated = $(".preloader"); 
    console.log('lets start animation'); 
    preload(toBeAnimated[currentAnimat]); 
}); 

function preload(elem) { 
    var elem = $(elem); 
    var width = elem.outerWidth(); 
    // Tween out preload div 
    TweenMax.to(elem, 1.4, { 
     width: 0, 
     right: 0, 
     onComplete: function() { 
      elem.remove(); 
      currentAnimat++; 
      if(currentAnimat >= toBeAnimated.length) { 
       console.log('Animation done'); 
      } else { 
       preload(toBeAnimated[currentAnimat]); 
      } 
     } 
    }); 
}

}）;

來源

2017-05-06 18:00:51

謝謝。這是我想要實現的。有一件事，是否也可以以相反的順序進行動畫製作。這是因爲我已經使用rtl在我的佈局中正確定位元素。 – Caspert

你可以...你必須在調用preload（toBeAnimated [currentAnimat]）之前反轉'toBeAnimated'' –

如何使用延遲TweenMax.to進行動畫製作？

回答

相關問題