javascript - 使用 GSAP 和 ScrollMagic 的性能问题

Question

我目前正在使用 GSAP 的 TimelineMax、MorphSVG 插件和 ScrollMagic 构建一个网站。

我有时会遇到抖动效果，并出现此警告:

由于主线程繁忙，“鼠标滚轮”输入事件的处理延迟了 163 毫秒。考虑将事件处理程序标记为“被动”以使页面更具响应性。

我有 1 个 ScrollMagic Controller 和 4 个附加场景。

我的主要性能问题似乎与 ScrollMagic 无关，因为它是在鼠标轮 svg 变形上，而我在没有它的情况下这样做:

// GSAP Morph tween
self.tl.to(".chapter1 #assembled .logo", 2, {morphSVG:"#exploded .logo", fill: '#18c5a3'})
.from(".chapter1 #assembled .logo", 1, {opacity: 1})
.to(".chapter1 #assembled .logo", 1, {opacity: 0})

// Progress the tween on mousewheel
function handleUnbuild () {
    self.tl.progress(window.pageYOffset/500).pause()
}
window.addEventListener('mousewheel', handleUnbuild, {passive: true})

如果没有 ScrollMagic，我尝试将此补间附加到 SM 场景，但我不知道该怎么做。

请注意，我的主屏幕(Macbook pro 13")上的动画抖动，但在我的第二个更宽的屏幕上却很好，这太奇怪了。

Answer 1

查看 lodash throttle documentation ，该示例正是您所需要的(下划线相同)。它将防止事件触发太多次。我想您也可以在 handleUnbuild() 中使用 RAF。

事实上，它只发生在你的 MBP 上，这可能与性能有关(因为我猜你的第二个屏幕不是 Retina)。