关于javascript：GSAP时间轴在不同补间上的各种onComplete函数


GSAP timeline various onComplete functions on different tweens

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

无论如何，我正在尝试创建一个时间轴，在每个时间轴上，将使用特定的参数完成对每个"至"功能的调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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/

谢谢你，
恩齐奥

您已经通过使用括号()立即调用了这些函数。 阅读此答案，以更好地理解为变量分配功能与立即执行该功能之间的区别。

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

1
2
3
...
onComplete: toggleOverlay
...

为了接收其他参数，您需要使用称为onCompleteParams的参数将它们作为数组传递给它，如下所示：

1
2
3
...
onCompleteParams: [0]
...

因此，您的总体代码应如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
...
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");
...

相关讨论