GSAP時間軸不同補間上的各種onComplete功能

Question

首先我是GSAP和ScrollMagic的新手，所以請原諒我，如果我可能在這裏問一個愚蠢的問題。我一直在尋找互聯網，但沒有找到正確的答案來解決我的問題。

無論如何，我試圖創建一個時間線，其中每個'to'函數的完成對外部函數的調用將使用特定的參數。

var controller = new ScrollMagic.Controller(); 
var timeline = new TimelineLite(); 
var div = $('div'); 

timeline.to(div, 0.5, { 
    opacity: 0, 
    onComplete: toggleOverlay(0) 
}, "part-1") 

.to(div, 0.5, { 
    opacity: 1, 
    onComplete: toggleOverlay(1) 
}, "part-2") 

.to(div, 0.5, { 
    opacity: 0, 
    onComplete: toggleOverlay(2) 
}, "part-3"); 

var scene = new ScrollMagic.Scene({ 
    triggerElement: "#trigger-event", 
    duration: 500 
}) 
.setTween(timeline) 
.addTo(controller); 

function toggleOverlay(i){ 
    console.log(i); 
} 

這裏發生了什麼：滾動位置到達'＃trigger-event'時將調用時間軸。隨後，將根據觸發事件之後和結束（持續時間）之前的滾動位置調用'.to'函數。

我在這裏面臨的問題是onComplete函數直接在頁面加載時調用。這可能與'.setTween（timeline）'有關，因爲我可以想象它會在整個時間軸中加載。

什麼是解決我的問題或什麼將是一個很好的替代方法？

編輯：這裏有一個的jsfiddle：https://jsfiddle.net/04db5ja5/

感謝的問候， Enzio

Answer 1

您已經使用括號()立即調用的功能。閱讀this答案可以更好地理解將函數分配給變量並實際執行它們之間的區別。

在GSAP，去它的方法是有一個分配給onComplete沒有括號像這樣triggerOverlay功能：

... 
onComplete: toggleOverlay 
... 

，並接收你有一些所謂onCompleteParams將它們傳遞給其他參數，作爲一個數組，像這樣：

... 
onCompleteParams: [0] 
... 

所以，你的整個代碼應該是這樣的：

... 
timeline.to(div, 0.5, { 
    opacity: 0, 
    onComplete: toggleOverlay, 
    onCompleteParams: [0] 
}, "part-1") 

.to(div, 0.5, { 
    opacity: 1, 
    onComplete: toggleOverlay, 
    onCompleteParams: [1] 
}, "part-2") 

.to(div, 0.5, { 
    opacity: 0, 
    onComplete: toggleOverlay, 
    onCompleteParams: [2] 
}, "part-3"); 
...