在标签页隐藏时强制GSAP更新

大多数浏览器在标签页不可见时会暂停 requestAnimationFrame() 的调用，以减少CPU和电池的消耗，但如果你希望GSAP继续更新（以较低的速度，通常大约为2帧/秒，这是由于浏览器对 setInterval()/setTimeout() 的节流控制），你可以使用此函数：

function tickGSAPWhileHidden(value) {
  if (value === false) {
    document.removeEventListener("visibilitychange", tickGSAPWhileHidden.fn);
    return clearInterval(tickGSAPWhileHidden.id);
  }
  const onChange = () => {
    clearInterval(tickGSAPWhileHidden.id);
    if (document.hidden) {
      gsap.ticker.lagSmoothing(0); // keep the time moving forward (don't adjust for lag)
      tickGSAPWhileHidden.id = setInterval(gsap.ticker.tick, 500);
    } else {
      gsap.ticker.lagSmoothing(500, 33); // restore lag smoothing
    }
  };
  document.addEventListener("visibilitychange", onChange);
  tickGSAPWhileHidden.fn = onChange;
  onChange(); // in case the document is currently hidden.
}

tickGSAPWhileHidden(true);

通知

消息

在标签页隐藏时强制GSAP更新