mirror of https://gitee.com/coder-xiaomo/algorithm-visualization synced 2025-01-10 03:38:20 +08:00

算法可视化（项目还在编写中，尚未完成）项目还在编写中，尚未完成

Go to file

程序员小墨 7c62e215c5 !1 实现快速排序算法 Merge pull request !1 from 程序员小墨/feature-random-quicksort		2022-08-08 07:47:41 +00:00
.vscode	添加水印	2022-05-21 22:43:03 +08:00
src	实现快速排序算法	2022-08-08 15:46:13 +08:00
.gitignore	简化加载失败逻辑；logo图片压缩；删除index.html中部分无用代码	2022-05-22 18:54:45 +08:00
LICENSE	add LICENSE.	2022-05-18 09:25:53 +00:00
package-lock.json	import webpack	2022-05-18 15:27:44 +08:00
package.json	import webpack	2022-05-18 15:27:44 +08:00
README.md	排序状态下添加停止按钮；样式小调整	2022-06-19 18:54:03 +08:00
webpack.config.js	bug fixed.	2022-05-18 16:47:17 +08:00

算法可视化

webpack框架真难调教，调了好久才弄得勉强能用了，不过应该还是有哪里没有调整对，所以暂时先不鼓捣webpack开发了，后面有心情再来研究

SVG 过渡动画

时间轴

基本思路

用户输入排序序列，然后首先js生成排序步骤。界面上显示排序顺序，同时生成每一帧中每个元素的详细位置（引入帧的概念）。

因为有帧的概念，所以可以实现进度条，进度条可以调整到任意一帧，css动画缓动到对应的位置。

基本方法

创建画布

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

元素缓动

安装webpack

npm i webpack webpack-cli -D
npm i webpack webpack-cli -g

安装loader

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

安装plugins

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

devServer（开发用）：

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	Markdown	50	0	41	91
src/assets/css/index.css	CSS	41	2	8	51
src/assets/css/svg.css	CSS	7	1	2	10
src/assets/js/algorithm/sort.js	JavaScript	291	153	58	502
src/assets/js/algorithm/test.js	JavaScript	53	15	5	73
src/assets/js/class.js	JavaScript	328	73	66	467
src/assets/js/index.js	JavaScript	161	76	29	266
src/index.html	HTML	104	44	20	168
src/webpack-script.js	JavaScript	2	10	4	16
src/webpack-style.js	JavaScript	2	1	0	3
webpack.config.js	JavaScript	55	50	5	110