Javascript 在不同的场景中重复使用tweens
我是scrollmagic新手,我想在不同的触发器上使用相同的tween,以避免代码重复。例如:Javascript 在不同的场景中重复使用tweens,javascript,animation,gsap,scrollmagic,Javascript,Animation,Gsap,Scrollmagic,我是scrollmagic新手,我想在不同的触发器上使用相同的tween,以避免代码重复。例如: var controller, firstTween, secondTween; controller = new ScrollMagic; firstTween = TweenMax.to($('body'), .1, { backgroundCoror: "#ff0000" }); secondTween = TweenMax.to($('body'), .1, { backgro
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)
]);
但只适用于最后两个场景。为了使它起作用,我必须在每个场景中重复tweens。可以制作可重复使用的tween吗?简短回答:否-tween对象只能指定给一个场景,反之亦然 为避免代码重复,请在循环中创建场景,如下所示:
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);
});
还请注意,如果触发器是短时间连续的,那么两个触发器之间可能会出现相互覆盖的问题。
要了解更多发生这种情况的原因以及解决方法,请阅读此处: