mirror of
https://gitee.com/coder-xiaomo/algorithm-visualization
synced 2025-01-10 19:58:18 +08:00
91 lines
2.2 KiB
Markdown
91 lines
2.2 KiB
Markdown
|
||
|
||
# 算法可视化
|
||
|
||
|
||
|
||
> webpack框架真难调教，调了好久才弄得勉强能用了，不过应该还是有哪里没有调整对，所以暂时先不鼓捣webpack开发了，后面有心情再来研究
|
||
|
||
### 基本框架
|
||
|
||
|
||
|
||
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
|
||
```
|
||
|
||
|
||
|
||
### 代码行数统计
|
||
|
||
Date : 2022-05-19 00:43:17
|
||
|
||
Total : 11 files, 1094 codes, 425 comments, 238 blanks, all 1757 lines
|
||
|
||
| filename | language | code | comment | blank | total |
|
||
| :--- | :--- | ---: | ---: | ---: | ---: |
|
||
| [README.md](/README.md) | Markdown | 50 | 0 | 41 | 91 |
|
||
| [src/assets/css/index.css](/src/assets/css/index.css) | CSS | 41 | 2 | 8 | 51 |
|
||
| [src/assets/css/svg.css](/src/assets/css/svg.css) | CSS | 7 | 1 | 2 | 10 |
|
||
| [src/assets/js/algorithm/sort.js](/src/assets/js/algorithm/sort.js) | JavaScript | 291 | 153 | 58 | 502 |
|
||
| [src/assets/js/algorithm/test.js](/src/assets/js/algorithm/test.js) | JavaScript | 53 | 15 | 5 | 73 |
|
||
| [src/assets/js/class.js](/src/assets/js/class.js) | JavaScript | 328 | 73 | 66 | 467 |
|
||
| [src/assets/js/index.js](/src/assets/js/index.js) | JavaScript | 161 | 76 | 29 | 266 |
|
||
| [src/index.html](/src/index.html) | HTML | 104 | 44 | 20 | 168 |
|
||
| [src/webpack-script.js](/src/webpack-script.js) | JavaScript | 2 | 10 | 4 | 16 |
|
||
| [src/webpack-style.js](/src/webpack-style.js) | JavaScript | 2 | 1 | 0 | 3 |
|
||
| [webpack.config.js](/webpack.config.js) | JavaScript | 55 | 50 | 5 | 110 |
|
||
|