javascript - React，在 useEffect 中使用 RequestAnimationFrame 进行动画处理

Question

我一直在通过更新 useEffect 函数中的 setInterval 内的状态变量来为 svg 弧设置动画，但这在我的前端似乎非常昂贵（一开始会滞后几秒钟）。通过一些研究，我遇到了 RequestAnimationFrame，我找到了一些示例，但似乎没有一个适用于我的情况，有人可以帮忙吗？

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
        var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

        return {
            x: centerX + (radius * Math.cos(angleInRadians)),
            y: centerY + (radius * Math.sin(angleInRadians))
        };
    }

    const describeArc = (x, y, radius, startAngle, endAngle, isSmall, time) => {

        var start = polarToCartesian(x, y, radius, endAngle);
        var end = polarToCartesian(x, y, radius, startAngle);

        var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

        var d = [
            "M", start.x, start.y,
            "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
        ].join(" ");

        if (isSmall) {
            return (
                setSmallArcPath(d)
            )
        }

        setBigArcPath(d);
        setBigArcStart(startAngle + degreeIncrement);
        setSmallArcStart(startAngle + degreeDecrement);
    }

    useEffect(() => {
        let timerId;
        const f = () => {
            describeArc(4220, 3500, 3000, bigArcStart, bigArcStart + 90, false);
            describeArc(4220, 3500, 2800, smallArcStart, smallArcStart + 60, true);
            timerId = requestAnimationFrame(f);
        };
        timerId = requestAnimationFrame(f);
        return () => cancelAnimationFrame(timerId);

    }, [bigArcPath, smallArcPath, bigArcStart, smallArcStart]);

标签： javascriptreactjsreact-hooks