Question

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

我有时会遇到抖动效果，这个警告出来了：

Handling of 'mousewheel' input event was delayed for 163 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responive.

我有1个ScrollMagic控制器和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）。

使用GSAP和ScrollMagic的性能问题

1 个答案: