reactjs - 如何通过 React 中的状态列表进行动画处理？

Question

我有一个状态列表，可以传递到呈现每个状态的组件中。我将如何在 React 中从这些状态创建动画？这是我目前正在做的，但我想知道是否有更好的方法。setAnimationFrame() 是更新状态的内容，而相应的状态部分是传递给组件以更新它的内容。

async function animateAlgorithm(algorithm: Algorithm) {
    const algoImplementation = algorithmToImplementation.get(algorithm);
    const animationFrames = algoImplementation(generateEmptyBoard(animationFrame.board.length));

    setRunning(true);

    for (let i = 0; i < animationFrames.length; i++) {
        setAnimationFrame(animationFrames[i]);

        await wait(delay);
    }

    setRunning(false);
}

function wait(time: number) {
    return new Promise(resolve => setTimeout(resolve, time));
}

标签： reactjsasynchronousanimation