Question

首先我是GSAP和ScrollMagic的新手，所以如果我在这里问一个愚蠢的问题，请原谅我。我一直在寻找互联网，但没有成功找到问题的正确答案。

无论如何，我正在努力创建一个时间表，在每个时间线的每个地方都会发生一次＆＃39;函数调用外部函数将使用特定的参数。

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＆＃39;后，将调用时间轴。随后，＆＃39; .to＆＃39;将根据触发事件之后和结束之前的滚动位置（持续时间）调用函数。

我在这里遇到的问题是onComplete函数是直接在页面加载上调用的。这可能与＆＃39; .setTween（时间轴）＆＃39;有关，因为我可以想象它会在整个时间轴中加载。

对于我的问题或什么是一个好的替代方法，解决方案是什么？

编辑：这是一个JSFiddle：https://jsfiddle.net/04db5ja5/

谢谢， Enzio

Answer 1

您已使用括号()立即调用这些函数。阅读 this 答案，以便更好地理解将函数分配给变量并立即实际执行它之间的区别。

在GSAP中，实现它的方法是将triggerOverlay函数分配给onComplete，而不使用括号，如下所示：

...
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");
...

GSAP时间轴在不同补间上的各种onComplete函数

1 个答案: