Question

我试图用react组件包装画布组件，并设置requestAnimationFrame以便能够在画布上绘制动画。

我有一个简单的组件，试图简单地画一个圆：

import * as React from "react";
import { useLayoutEffect, useRef } from "react";

export interface Props {}

export const Loop: React.FC<Props> = () => {
  const cv = useRef<HTMLCanvasElement>(null);
  const oldTimestamp = useRef<number>(0);

  useLayoutEffect(() => {
    let animationID = 0;

    console.log("USEEFFECT");

    const loop = (timestamp: number) => {
      let secondsPassed = (timestamp - oldTimestamp.current) / 1000;
      secondsPassed = Math.min(secondsPassed, 0.1);

      oldTimestamp.current = timestamp;

      console.log("LOOP");

      update(secondsPassed);
      draw();

      animationID = requestAnimationFrame(loop);
    };

    animationID = requestAnimationFrame(loop);

    return cancelAnimationFrame(animationID);
  }, []);

  const update = (secondsPassed: number) => {};

  const draw = () => {
    console.log("DRAW");
    const ctx = cv && cv.current && cv.current.getContext("2d");
    if (ctx) {
      ctx.beginPath();
      ctx.arc(100, 75, 50, 0, 2 * Math.PI);
      ctx.stroke();
    }
  };

  return (
    <div>
      <canvas ref={cv}></canvas>
    </div>
  );
};

我添加了三个console.log调用以帮助确定正在发生的事情。仅记录console.log("USEEFFECT");的ATM，而没有其他记录。在我看来，animationID = requestAnimationFrame(loop);中的useLayoutEffect没有调用loop回调。

我认为requestAnimationFrame中的useLayoutEffect设置是正确的。

我做错了什么？

Answer 1

您立即取消动画帧，而应该返回函数：

return () => cancelAnimationFrame(animationID)

与React一起使用时未调用requestAnimationFrame回调

1 个答案: