# 算法可视化



### 基本框架



SVG 过渡动画



时间轴



基本思路

> 用户输入排序序列，然后首先js生成排序步骤。界面上显示排序顺序，同时生成每一帧中每个元素的详细位置（引入帧的概念）。
>
> 因为有帧的概念，所以可以实现进度条，进度条可以调整到任意一帧，css动画缓动到对应的位置。



基本方法

```
创建画布

创建元素
改变元素位置，强调，大小，颜色，文本等

元素缓动
```



### Webpack

安装webpack

```bash
npm i webpack webpack-cli -D
npm i webpack webpack-cli -g
```

安装loader

```bash
npm i style-loader css-loader url-loader file-loader html-loader -D
```

安装plugins

```bash
npm i html-webpack-plugin mini-css-extract-plugin clean-webpack-plugin -D
```

devServer（开发用）：

```bash
npm i webpack-dev-server -D
```