2022-05-15 23:58:18 +08:00
|
|
|
|
|
|
|
|
|
|
|
2022-05-17 00:31:19 +08:00
|
|
|
|
# 算法可视化
|
2022-05-15 23:58:18 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 基本框架
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
SVG 过渡动画
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
时间轴
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
基本思路
|
|
|
|
|
|
|
|
|
|
|
|
> 用户输入排序序列，然后首先js生成排序步骤。界面上显示排序顺序，同时生成每一帧中每个元素的详细位置（引入帧的概念）。
|
|
|
|
|
|
>
|
|
|
|
|
|
> 因为有帧的概念，所以可以实现进度条，进度条可以调整到任意一帧，css动画缓动到对应的位置。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
基本方法
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
创建画布
|
|
|
|
|
|
|
|
|
|
|
|
创建元素
|
|
|
|
|
|
改变元素位置，强调，大小，颜色，文本等
|
|
|
|
|
|
|
|
|
|
|
|
元素缓动
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2022-05-18 15:27:44 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 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
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
