性能动画Frame好还是onScroll好？

Question

我有一个用 React 创建的选取框元素。我希望选取框在元素不可见时停止。

这是我检查可见性的代码：

const isVisible = () => {
  const rect = marqueeRef.current.getBoundingClientRect();
  const elTop = rect.top;
  const elBottom = rect.bottom;
  const visible = elTop < wHeight && elBottom >= 0;
  return visible;
};

我想知道什么对性能更好：

一个。让动画帧运行并每次检查元素是否可见。

const animate = () => {
  if (isVisible()) {
    i = i < width ? i + step : 0;
    marqueeRef.current.style.transform = `translateX(${-i}px)`;
  }
  aF = requestAnimationFrame(animate);
};

或

b。制作一个 onScroll 处理程序来检查元素是否可见，然后启动和停止动画帧。

const onScroll = () => {
  if(isVisible()){
    animate();
  }else{
    cancelAnimationFrame(aF);
  }
}

这两种方式都会不断检查元素是否可见，所以我想知道是否有人对此有任何经验，并且可以阐明哪种方式的性能更好。

谢谢。

Answer 1

Intersection observer API 非常适合这个。它比这两个选项中的任何一个都具有更好的性能，因为它仅在元素变得可见或不可见时调用您的回调（取决于给定的阈值），并且启动相对简单 API。

性能动画Frame好还是onScroll好？

Whats better for perfomance animationFrame or onScroll?

javascript

requestanimationframe

reactjs