前端开发——让算法"动"起来
正文
当然在我们不清楚具体操作细节前我们可以先假设一下,我们能够用什么来实现。按照以前看过的排序动画我将其分为
1.Js操作Dom,再搭配简单的css
2.Canvas动画
之后在查资料的时候发现还有人用d3
这个库来完成。
作为一个有(被)梦(坑)想(多)的前端,一开始就得考虑到如何实现套入多个算法,如果实现单步运行(可能的话还得有往回走的功能),如何实现动画速度的控制等等。
当然幻想那么多一下子实现是不现实的,我们得先找一个简单的例子来看看再一步步深入。
先来看下效果图
之后我们分析源码:
css:
#field {width:500px;height:510px;background:black;position:relative}
.bar {position:absolute;bottom:0;background:orange;border:1px solid brown;width:24px}
html:
<div id="field">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
javascript:
!function(d){
var bars = [].slice.call(d.querySelectorAll('.bar'));
var arr = [8, 10, 3, 5, 6, 9, 2, 4, 7, 1];
var state = [];
var draw = function(){
var bar, s;
s = state.shift() || [];
for(bar in bars){
bars[bar].style.height = 25 * s[bar] + 'px';
bars[bar].style.left = 25 * bar + 'px';
}
}
var sort = function(arr){
for(var i = 0; i < arr.length; i++){
for(var j = 0; j < arr.length - i - 1; j++){
if(arr[j] > arr[j+1]){
arr[j] = arr[j] + arr[j+1];
arr[j+1] = arr[j] - arr[j+1];
arr[j] = arr[j] - arr[j+1];
state.push(JSON.parse(JSON.stringify(arr)));
}
}
}
}
sort(arr);
setInterval(draw, 500);
}(document)
整个流程其实很清晰,但是其中部分代码让我疑惑了一段时间,经过google和问群里的朋友,终于解惑。我们先来理清这段代码的思路
首先这个动画是将大小宽度都定死了。以及排序数组的数量需要和html结构里bar的数量一致。
1.html的bar是长方体,它的宽是24px然后有个1px的border,因此在代码中动态改变left的时候需要设定为25.
2.js代码中用一个匿名立即函数包裹代码。
bars = [].slice.call(d.querySelectorAll('.bar'));
这段将获取的nodelist转为成一个对象数组,这样方便对其中每个bar进行单独修改样式
3.设定一个state空数组来保存每一个状态,记住这才是动画的关键。
4.state.shift()临时像将数组模拟成队列,draw函数根据其第一个出列的内容来重新排列列表,在
setInterval(draw, 400)的配合下,就能形成一个动画排序。
5 sort函数和我们之前介绍的冒泡排序是一样的,只不过这里有一句
state.push(JSON.parse(JSON.stringify(arr)));
这句是核心,一看是乍看是不是很奇怪,为什么要JSON.stringify然后再JSON.parse。这里需要大家认真思考一下。
想想在哪里看过它?
深拷贝?
对,就是深拷贝。对于深拷贝不理解的我这里给出它的含义:
深拷贝是复制变量值,对于非基本类型的变量,则递归至基本类型变量后,再复制。
我这两天也整理过深拷贝,但是我还是一下子没理解为什么这里要这么写。
一开始我想偏差了,我一开始认为arr作为一个数字数组,对它进行深拷贝和用一个中间变量进行操作不是一样么,于是我加了这么几行代码
var temp = arr
state.push(temp);
然后 动画消失了,页面变成最后排好序的样子。
这时候群里有人提醒了我一句浅复制会修改原数组。我这才根据state.push反应过来。
在sort内部,每一个push都是为了保存交换后排序数组的状态,如果我用temp来代替它,那么state里面将全放着相同的最后排完序的状态。而JSON.parse(JSON.stringify(arr))对arr进行深复制,不会改动arr原数组,因此它就类似快照一样把每次排序的状态给push到state.然后配合setInterval一张一张的放映形成动画。
一个简单的排序动画其实里面也包含了不少有价值的内容。
回过头这么一看,这不是很容易套公(算)式(法)么
把我们之前学的插入排序拿来改改:
function exchange(array, i, j) {
var t = array[i];
array[i] = array[j];
array[j] = t;
}
var sort2 = function(numbers){
for (var i = 0; i < numbers.length; i++) {
/*
* 当已排序部分的当前元素大于value,
* 就将当前元素向后移一位,再将前一位与value比较
*/
for (var j = i; j > 0 && numbers[j] < numbers[j - 1]; j--) {
// If the array is already sorted, we never enter this inner loop!
exchange(numbers, j, j - 1);
state.push(JSON.parse(JSON.stringify(numbers)));
console.log("此时数组:" + numbers)
}
}
}
分分钟改变动画效果。
这样我们就完成目标中的一小步了。
然后之前考虑的单步运行和动画速度控制我们都可以改变相应参数来完成。
不过在继续深入之前我们先来看看如何用canvans
来实现。
先来看效果
代码如下:
html:
<div id="restart">重新生成数据并排序</div>
<canvas id="canvas"><canvas>
css:
body {
background-color: black;
text-align: center;
}
#restart {
color: white;
font-family: monospace;
}
javascript:
!function(){
var canvas = document.getElementById('canvas');
var data = [];
canvas.width = window.innerWidth-30;
canvas.height = window.innerHeight-35;
CreateData(IntRandom(300, 100));
Render();
function Restart() {
data = [];
CreateData(IntRandom(300, 100));
}
function CreateData(val) {
for(var i = 0; i <= val; i++)
data[i] = IntRandom(500, 10);
}
function BubbleSort() {
var temp;
for(var i = 0; i <= data.length-1; i++) {
if(data[i] > data[i+1]) {
temp = data[i];
data[i] = data[i+1];
data[i+1] = temp;
}
}
}
function Draw() {
var posX = 0,
posY = canvas.height;
for(var i = 0; i <= data.length-1; i++) {
c.fillStyle = RandomColor(i);
c.fillRect(posX, canvas.height, 5, -data[i]);
posY--;
posX+=6;
}
}
document.onclick = function() {
Clear();
Restart();
};
function Render() {
requestAnimationFrame(Render);
Clear();
BubbleSort();
Draw();
}
function Clear() {
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);
}
function RandomColor(i) {
var n = Math.random() * 360;
return "hsl("+parseInt(i)+", 100%, 50%)"
}
function IntRandom(max, min) {
return Math.floor(Math.random() * max + min);
}
}()
这份代码其实是有缺陷的,不过没关系,在下面的分析中我们可以边看边改
1.首先是常规canvas操作,如果对canvas不上很熟悉的同学建议把高程相关部分刷一遍。
具体操作就是,获取整个浏览器屏幕长款,减去一部分作为画布的长宽,这是为了让生成的序列不会跟浏览器边缘贴合。
CreateData()这个方法就是随机生成一堆随机高度的长方形。
BubbleSort()就是常见的冒泡排序,但是在这里我们看到这只是一个冒泡算法,并没有像之前做一系列快照。(这里就涉及到了我们提到的缺陷)
draw()方法 从屏幕左侧坐标为0的点开始,这个posY其实毫无用处,因为我们的高度是根据之前随机生成一堆随机高度的长方形数组data来生成的。posX自加是为了保持间隔。
RandomColor() 这个方法根据高度来改变颜色。
之后是本代码的核心render()
之前我们看到操作dom的版本,动画效果是通过setInterval(draw, 500)来实现的,那么这里的动画效果哪里来?
我们可以看到这里用到了HTML5的API:
requestAnimationFrame
它的优势在于保证跟浏览器的绘制走,如果浏览设备绘制间隔是16.7ms,那就这个间隔绘制;如果浏览设备绘制间隔是10ms, 就10ms绘制。不会存在过度绘制的问题,动画不会掉帧。
这个从我们的效果图里也能看出动画的确很流畅。然而,这段代码是有问题的。问题在于它没有设置中止的标识,也就是它会不停刷新浏览器,时间久了将会卡住。而且细心的会发现之前我们看到的冒泡排序它只有一层循环。render()方法靠着循环调用硬生生把这些无序数组给堆成有序了。。。
而且太流畅的动画一气呵成,让我们无法仔细观察排序的经过,因此我们需要对其进行修改。
这里我们停下来思考一下,该如何改?
想想之前js操作dom版是怎么做的?我们同样可以套进去。
只需要把排序算法换成之前一样的。然后把render改成如下:
var fps = 1; //每秒几帧
var lastExecution = new Date().getTime();
function Render() {
if (state.length > 0) { //动画播放,没播完继续
var now = new Date().getTime();
if ((now - lastExecution) > (1000 / fps)) {
Clear();
Draw();
lastExecution = new Date().getTime();
}
requestAnimationFrame(Render);
}
}
不过需要注意的是当你想重置requestAnimationFrame的时候,需要一开始就注明var stopId = requestAnimationFrame(Render);
然后配合cancelAnimationFrame(stopId)即可暂停继续。
最终效果如下:
有了以上基础你完全可以自己开始构建一个属于自己的排序动画。这篇就到这里。
结尾
所有代码和别的补充已经放在github
而且会不断更新。有兴趣的可以去看看并动手敲一遍。
资料
前端开发——让算法"动"起来的更多相关文章
- 前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法
前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http: ...
- Front End Developer Questions 前端开发人员问题(二)
问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 二.CSS 1.介绍一下标准的CSS的盒子模型?与低版本IE的盒子模 ...
- 淘宝前端工程师:国内WEB前端开发十日谈
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
- Web前端开发十日谈
=========================================================================== 原文章: http://kb.cnblogs.c ...
- 绝对精品推荐做前端的看下:Web前端开发体会十日谈
20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对W ...
- 2022年Web前端开发流程和学习路线(详尽版)
前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...
- 3. web前端开发分享-css,js提高篇
一. css基础知识掌握之后(个人的标准是:弄清块元素与内联元素的区别,弄清float的应用场景,弄清position[pə'zɪʃən] 下五个属性static['stætɪk],relative[ ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- Web前端开发工程师养成计划【转载】
Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...
随机推荐
- DataX操作指南
1.DataX介绍 DataX DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.Oracle.SqlServer.Postgre.HDFS.Hive.ADS.HB ...
- shiro配置学习
一.shiro的配置 1.shiro的web过滤 实例化ShiroFilterFactoryBean 设置securityManager.loginUrl.unauthorizedUrl.sucess ...
- luogu P4482 [BJWC2018]Border 的四种求法
luogu 对于每个询问从大到小枚举长度,哈希判断是否合法,AC 假的(指数据) 考虑发掘border的限制条件,如果一个border的前缀部分的末尾位置位置\(x(l\le x < r)\)满 ...
- Linux下部署Kafka分布式集群,安装与测试
注意:部署Kafka之前先部署环境JAVA.Zookeeper 准备三台CentOS_6.5_x64服务器,分别是:IP: 192.168.0.249 dbTest249 Kafka IP: 192. ...
- 初识linux内核漏洞利用
0x00 简介 之前只接触过应用层的漏洞利用, 这次第一次接触到内核层次的,小结一下. 0x01 概况 这次接触到的,是吾爱破解挑战赛里的一个题,给了一个有问题的驱动程序,要求在ubuntu 14.0 ...
- 4G漏洞
4G VoLTE漏洞:可致用户地理位置和其它个人信息泄露 2017-08-05 LBS 首先要了解下,什么是VoLTE. VoLTE为英文Voice Over LTE的缩写,直译就是音频通过LTE网络 ...
- 七、Vue Cli+ApiCloud
一.api.js (参考) 顶部注释: 底部注释: 二.导入 效果: 继续使用: 运行环境:用APP打开,浏览器没有api对象,只有APP运行环境才有API对象 代码如下: <template& ...
- Linux中FTP服务器配置
1.FTP服务器的一些基本概念 (1)FTP连接方式 控制连接:标准端口为21,用于发送FTP命令信息. 数据连接:标准端口为20,用于上传.下载数据. ...
- Linux文件类型和文件相关命令
文件类型 ll后可以看到文件详情: -:常规文件(内部类型是什么,用file命令) d:directory,目录文件 b:blobk device,块设备文件,支持以“block”为单位进行随机访问 ...
- 使用SpringAOP实现事务(声明式事务管理、零配置)
前言: 声明式事务管理建立在AOP之上的.其本质是对方法前后进行拦截,然后在目标方法开始之前创建或者加入一个事务,在执行完目标方法之后根据执行情况提交或者回滚事务.声明式事务最大的优点就是不需要通过编 ...