“命运之轮”-具有3种不同的速度-反应

Question

我正在尝试在React中构建一种命运之轮。

基本上，这个圈子有4种可能的结果...

用户将单击一个按钮，这只手（箭头）将从中心出现，以稍慢的速度指向0deg，然后将加速。几转后，它会突然突然减速并额外的45度所有这些操作都在背景中带有“垫”，以跟随手的速度。

类似： Sketch image

play = () => {
    let randomNum = Math.floor(Math.random() * 5) + 5;

    this.setState(
        {
            degreesToSpin: randomNum * 90, // will be deducted
            totalDegrees: randomNum * 90, // will always be the same
            showHand: true
        },
        () => {
            setTimeout(this.callRenderChallenge, 1000);
        }
    );
};

callRenderChallenge = () => {
    requestAnimationFrame(this.renderChallenge);
};

getSpeed = () => {
    let { degreesToSpin, totalDegrees, difference } = this.state;

    let speedVariation = null;

    let degreesDivision = totalDegrees / 12;

    if (degreesToSpin > degreesDivision) {
        speedVariation = difference * 0.25;
        console.log("fast?");
        this.setState(prevState => ({
            difference: (prevState.difference = speedVariation),
            degreeHand: prevState.degreeHand + 10
        }));
    }

    if (degreesToSpin <= degreesDivision) {
        speedVariation = difference * 7.25;
        console.log("slow?");
        this.setState(prevState => ({
            difference: (prevState.difference = speedVariation),
            degreeHand: prevState.degreeHand + 3
        }));
    }
    return;
};

renderChallenge = () => {
    const {
        last,
        difference,
        degreesToSpin,
        totalDegrees,
        degreeHand
    } = this.state;

    let position = (totalDegrees / 360) % 1;

    let now = new Date().getTime();

    if (degreesToSpin === 0) {
        cancelAnimationFrame(this.renderChallenge);

        this.setState({
            position: position,
            totalDegrees: 0,
            showChallenge: true,
            difference: 0.03
        });

        return;
    }

    if (!last || now - last > difference) {
        let positionHand = (degreeHand / 360) % 1;

        this.setState(prevState => ({
            last: now,
            showPad: true,
            showChallenge: false,
            degreesToSpin: prevState.degreesToSpin - 1
            // degreeHand: prevState.degreeHand + 1
        }));

        this.getSpeed();

        if (positionHand >= 0.8 || (positionHand >= 0 && positionHand <= 0.04)) {
            this.setState(prevState => ({
                degreePad: (prevState.degreePad = 0)
            }));
        }
        if (positionHand >= 0.05 && positionHand <= 0.29) {
            this.setState(prevState => ({
                degreePad: (prevState.degreePad = 90)
            }));
        }
        if (positionHand >= 0.3 && positionHand <= 0.54) {
            this.setState(prevState => ({
                degreePad: (prevState.degreePad = 180)
            }));
        }
        if (positionHand >= 0.55 && positionHand <= 0.79) {
            this.setState(prevState => ({
                degreePad: (prevState.degreePad = 270)
            }));
        }
    }
    requestAnimationFrame(this.renderChallenge);
};

render() {
    const { degreePad, degreeHand, position, showPad, showHand } = this.state;

    let challengeTitle = null;

    if (this.state.showChallenge) {
        challengeTitle = (
            <p
                className="challenge"
                style={{ transform: `rotate(-${degreePad}deg)` }}
            >
                {position === 0 ? (
                    <span id="pg">
                        Result 1
                    </span>
                ) : null}
                {position === 0.25 ? (
                    <span id="bny">
                        Result 2
                    </span>
                ) : null}
                {position === 0.5 ? (
                    <span id="st">
                        Result 3
                    </span>
                ) : null}
                {position === 0.75 ? (
                    <span id="sb">
                        Result 4
                    </span>
                ) : null}
            </p>
        );
    }
    return (
        <React.Fragment>
            <main className="side-wrapper">
                <div className="wheel-wrapper">
                    <div className="pad-wrapper">
                        {showPad && (
                            <div id="pad" style={{ transform: `rotate(${degreePad}deg)` }}>
                                {challengeTitle}
                            </div>
                        )}
                    </div>

                    <div className="clipper">
                        <div className="svg-spiral spin">
                            <img src={spiral} alt="spiral turning" />
                        </div>
                    </div>

                    <div className="svg-dashed">
                        <img src={dashed} alt="dashed lines" />
                    </div>

                    <div className="svg-circle">
                        <img src={circle} alt="circle" />
                    </div>

                    <div
                        className="outer-btn"
                        style={{
                            transform: `translate(-50%, -50%) rotate(${degreeHand}deg)`
                        }}
                    >
                        <span
                            className={
                                showHand ? "fade-out-trans-scale inner-btn" : "inner-btn"
                            }
                        >
                            Play
                        </span>

                        <svg
                            id="hand-clipping"
                            xmlns="http://www.w3.org/2000/svg"
                            width="275"
                            height="320"
                        >
                            <clipPath id="hand-clipping-path">
                                <path
                                    d="M0 191V0h275c.333 62.667-.333 165.333 0 228-31.667-1-58.333-1-89.984-1.977C170.648 245.579 131.591 252.708 107 239c-17.055-9.507-31.089-26.422-34-48-25.333 1.333-47.667-1.333-73 0z"
                                    fill="none"
                                    stroke="none"
                                />
                            </clipPath>
                        </svg>

                        <div id="for-clipping-hand">
                            <button id="play-btn" onClick={this.play}>
                                {showHand && (
                                    <img
                                        className="slide-in-hand hand-btn"
                                        src={handImg}
                                        alt="hand"
                                    />
                                )}
                            </button>
                        </div>
                    </div>
                </div>

目前只有2个速度，我删除了多余的45deg，因为我想一次整理出1件东西。

此时一切都变得如此混乱，以至于我什至不知道有人能理解我在这里的需要。

任何帮助/提示都很好。

欢呼