虫虫的技术博客 技术 生活

Saturday, May 4, 2019

排序算法演示动画

        写前面两篇排序的时候,百度找图片,看到还比较不错的动图,能够展示数据在内存中的变化。然而性格使然,我会仔细的观察动图,仔细观察的话发现要么是无法较好的展示比较过程,要么是交换的过程与实际代码执行的有一些出入,心想自己做一个效果出来。这一想不要紧,4月30号-5月4号,花了几个晚上时间,终于搞定了俩算法的排序效果动图,这效率低的也是没谁了。

中间的尝试过程,以及遇到的问题,
1,开始用JavaScriptr的canvas,画出了初始化的状态,做到动效觉得会很麻烦,卡住了。
2,咨询前端同事,建议用css,于是改用div,做到动效的时候,仍然卡住,原因是延迟函数执行的效果和预期不一致,大致能猜到js的闭包特性导致。
3,于是想到用Java的canvas直接画出来,于是乎动手,写到动效,又卡住,动效过程中及时渲染没搞定,无奈对API不熟悉,暂时放弃。
4,重新思考div方案中遇到的问题的解决办法,按说,仔细处理一下延迟方法,应该可行,于是再次动手,这次把冒泡的效果做出来了,想着没问题了,接着套入插入排序,然而执行效果又与预期不一致,究其原因发现插入排序中多了break导致,break无法让事先定时的timer取消往下执行,这下又卡住了,带着问题入睡。
5,早上再继续,想到把排序过程和效果分开来写(最开始就是分开写的,过程中觉得直接一边排序一边展示效果更合理,然而后来证明,分开也有分开的好处),这下可以了。

中间遇到问题原因之一是对前端展示部分的代码熟悉程度不够,二是没有整体从开始思考可行的方案,也是因对前端代码的评估过于简单了,只在脑海中想了一下,就觉得没问题。JS的canvas,CSS的动画,Java的Canvas,应该都能实现该效果,这里暂且不深究了,本来的目的也只是想在做排序的时候,可以做出辅助理解的动画效果。


冒泡排序
https://github.com/angelala00/learn/blob/master/src/main/html/sort/bubblesort.html

插入排序
https://github.com/angelala00/learn/blob/master/src/main/html/sort/insertionsort.html



0 comments:

Post a Comment

Popular Posts

Copyright © 虫虫的成长历程 | Powered by Blogger Design by PWT | Blogger Theme by NewBloggerThemes.com