在不同的ScrollMagic場景中重用補間

Question

我是scrollmagic的新手，我想在不同的觸發器上使用相同的補間來避免代碼重複。例如：

var controller, firstTween, secondTween; 

controller = new ScrollMagic; 

firstTween = TweenMax.to($('body'), .1, { 
    backgroundCoror: "#ff0000" 
}); 

secondTween = TweenMax.to($('body'), .1, { 
    backgroundCoror: "#ffffff" 
}); 

controller.addScene([ 
    new ScrollScene({ 
    triggerElement: '#triggerOne' 
    }).setTween(firstTween), new ScrollScene({ 
    triggerElement: '#triggerTwo' 
    }).setTween(secondTween), new ScrollScene({ 
    triggerElement: '#triggerThree' 
    }).setTween(firstTween), new ScrollScene({ 
    triggerElement: '#triggerFour' 
    }).setTween(secondTween) 
]); 

但是隻有兩個最後的場景。爲了使它工作，我必須在每個場景中重複補間。有可能製作可重複使用的補間？

Answer 1

簡答：否 - 補間對象只能分配給一個場景，反之亦然。

爲了避免重複的代碼，在一個循環中創建的場景，就像這樣：

var var controller, firstTween, secondTween, 
triggers = ["triggerOne", "triggerTwo", "triggerThree", "triggerFour"]; 

controller = new ScrollMagic(); 

triggers.forEach(function (trigger, index) { 
    // make tween 
    var thistween = TweenMax.to($('body'), .1, { 
     backgroundColor: (index % 2) ? "#ffffff" : "#ff0000" 
    }); 
    // make scene 
    new ScrollScene({ 
     triggerElement: '#' + trigger; 
    }) 
    .setTween(thistween) 
    .addTo(controller); 
}); 

也請記住，如果觸發器是在短時間內連續你可能會得到與充斥着互相覆蓋的問題。 要了解更多爲什麼會發生這種情況以及如何解決它，請閱讀此處：
https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another