Как анимировать список состояний в React?

#reactjs #asynchronous #animation

Вопрос:

У меня есть список состояний, которые могут быть переданы в компонент, который отображает каждое из них. Как бы я создал анимацию из этих состояний в 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));
}