使用 GSAP 和 ScrollMagic 的性能问题答案

【问题标题】：Performance issue using GSAP and ScrollMagic使用 GSAP 和 ScrollMagic 的性能问题
【发布时间】：2016-08-31 14:31:20
【问题描述】：

我目前正在使用 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"）上的动画抖动，但在我的第二个更宽的屏幕上很好，这太奇怪了。

【问题讨论】：

收听鼠标滚轮或滚动时使用油门。
感谢您的回答。油门不会改变我的帧率，但我知道是什么导致了下降。当我的 svg 变形时，我正在应用比例更改。没有它会更好，但这并不能解释屏幕之间的区别。

标签： javascript svg gsap scrollmagic

【解决方案1】：

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

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

【讨论】：