我正在使用一個(gè)定制的光標(biāo)，它可以正常工作。

我還使用requestanimationframe來(lái)制作滾動(dòng)屏幕的動(dòng)畫(huà)。

但是當(dāng)我使用requestanimationframe時(shí)，我的自定義光標(biāo)在css中的過(guò)渡是滯后的。

React Js代碼

function App() {
  const [cursorX, setCursorX] = useState();
  const [cursorY, setCursorY] = useState();
  const [mouseIn, setMouseIn] = useState(true);
  const scrollWrapRef = useRef(null);
  const contentRef = useRef(null);
 
  let offset = 0;
  let currentPos = 0;

  useEffect(() => {
    const mouse = (e) => {
      setCursorX(e.clientX);
      setCursorY(e.clientY);
    };

    window.addEventListener("mousemove", mouse);

    const scrollWrap = scrollWrapRef.current;
    const content = contentRef.current;

    const smoothScroll = () => {
      offset += (window.pageYOffset - offset) * 0.04;
      const scroll = `translateY(-${offset}px) translateZ(0)`;
      scrollWrap.style.transform = scroll;
      requestAnimationFrame(smoothScroll);
    };

    smoothScroll();

    const callDistort = () => {
      const newPos = window.pageYOffset;
      const diff = newPos - currentPos;
      const speed = diff * 0.6;
      content.style.transform = `skewY(${speed}deg)`;
      currentPos = newPos;
      requestAnimationFrame(callDistort);
    };

    callDistort();

    return () => {
      cancelAnimationFrame(callDistort);
      cancelAnimationFrame(smoothScroll);
      window.removeEventListener("mousemove", mouse);
    };
  }, []);

  return (
    <div className="App ">
       // custom cursor 
        <div
          className={cursor}
          style={{
            left: cursorX,
            top: cursorY,
          }}
        ></div>

      <div ref={scrollWrapRef}>
        <div ref={contentRef} className="section">
              <Intro />
              <About />
              <Projects />
              <Work />
              <Contact />
        </div>
      </div>
    </div>
  );
}

使用的css

//custom cursor
.cursor {
  width: 20px;
  height: 20px;
  background: rgb(255, 255, 255);
  position: fixed;
  border-radius: 50%;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -50%);

  // it works only if I don't use requestanimationframe
  transition: 0.15s linear, transform 0.8s ease-in-out;

//Scroll animation
.section {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 0% 0%;
  transition: transform 0.25s;
  will-change: transform;
}

您可以檢查輸出

僅自定義光標(biāo)

僅自定義光標(biāo)屏幕錄制

https://noanimation.netlify.app/

滾動(dòng)動(dòng)畫(huà)和自定義光標(biāo)

滾動(dòng)動(dòng)畫(huà)和自定義光標(biāo)屏幕錄制

使用requestanimationframe https://requestanimationframereact.netlify.app/

如果我使用requestanimationframe，自定義光標(biāo)轉(zhuǎn)換不流暢

請(qǐng)幫助我。