Javascript 如何在react js中创建排序动画

我试图在react js中为一个项目创建一个排序可视化工具

至于现在，我只实现了冒泡排序，但我还计划实现快速排序、合并排序以及更多

我怎样才能添加一个好的动画，一步一步地展示排序算法的基本工作原理

我是否需要在每次进行更改时更新阵列，或者有其他方法来更新阵列

SortingVisualizer.tsx

import "./SortingVisualizer.css";
import React, { useEffect, useState } from "react";
import * as sortings from "../sortingAlgorithms";
// Change this value for the number of bars (value) in the array.
const NUMBER_OF_ARRAY_BARS = 50;
// This is the main color of the array bars.
const PRIMARY_COLOR = "turquoise";

function SortingVisualizer() {
  const [array, setArray] = useState<number[]>([]);

  const resetArray = () => {
    const randomNumbers = [];
    for (let i = 0; i < NUMBER_OF_ARRAY_BARS; i++) {
      randomNumbers.push(randomIntFromInterval(5, 730));
    }
    setArray(randomNumbers);
  };

  const bubbleSort = () => {
    setArray(sortings.bubbleSort(array.slice()));
  };

  useEffect(() => {
    resetArray();
  }, []);

  return (
    <div className="array-container">
      {array.map((value, idx) => (
        <div
          className="array-bar"
          key={idx}
          style={{
            backgroundColor: PRIMARY_COLOR,
            height: `${value}px`,
          }}
        ></div>
      ))}
      <button onClick={bubbleSort}>Bubble Sort</button>
    </div>
  );
}

export default SortingVisualizer;

function randomIntFromInterval(min: number, max: number) {
  // min and max included
  return Math.floor(Math.random() * (max - min + 1) + min);
}

排序算法

export const bubbleSort = (arr: number[]) => {
  const length = arr.length;
  for (let i = 0; i < length - 1; i++) {
    for (let j = 0; j < length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        swap(arr, j, j + 1);
      }
    }
  }
  return arr;
};

const swap = (arr: number[], i: number, j: number) => {
  const temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
};

export-const-bubbleSort=（arr:number[]）=>{
常数长度=阵列长度；
for（设i=0；iarr[j+1]）{
掉期（arr、j、j+1）；
}
}
}
返回arr；
};
常量交换=（arr:number[]，i:number，j:number）=>{
常数温度=arr[i]；
arr[i]=arr[j]；
arr[j]=温度；
};

export const bubbleSort = (arr: number[]) => {
  const length = arr.length;
  for (let i = 0; i < length - 1; i++) {
    for (let j = 0; j < length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        swap(arr, j, j + 1);
      }
    }
  }
  return arr;
};

const swap = (arr: number[], i: number, j: number) => {
  const temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
};