我试图用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
设置是正确的。
我做错了什么?
答案 0 :(得分:2)
您立即取消动画帧,而应该返回函数:
return () => cancelAnimationFrame(animationID)