前端开发——让算法"动"起来
正文
当然在我们不清楚具体操作细节前我们可以先假设一下,我们能够用什么来实现。按照以前看过的排序动画我将其分为
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插件,是它们在中国 ...
随机推荐
- 了解MyISAM与InnoDB的索引差异(转)
出处原文: 1分钟了解MyISAM与InnoDB的索引差异 数据库的索引分为主键索引(Primary Inkex)与普通索引(Secondary Index).InnoDB和MyISAM是怎么利用B+ ...
- Web前端开发HTML基础
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记),相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标 ...
- 动态表和C++ vector
动态表和C++ vector 最近课上刚刚学了可以根据表中元素的插入和删除动态调整表大小的动态表(dynamic table),就想看一下它有什么实际的应用,第一个想起来的就是C++的vector,直 ...
- Js阻止冒泡,Vue中如何阻止冒泡事件
js解决冒泡:event.stopPropagation() vue解决冒泡: 事件.stop,例如:@click.stop="" ,@mouseover.stop="& ...
- css样式水平居中和垂直居中的方法
水平居中(包含块中居中) 1. 定宽,左右margin为auto.(常规流块盒.弹性项目[不用定宽]) 例子:在box1盒子上设置宽,再设置margin:auto: <style> .bo ...
- 第十六篇 JS实现全选操作
JS实现全选 嗨,同学们好,老师这里是专门教同学解决一些针对性的问题,所以说综合起来,就要靠同学自己了. 这节课我们学一个很实用的东西,全选操作!比如淘宝这种商城对吧,我的购物车,我要全选购买,或 ...
- osworkflow 入门基础
OSWorkFlow入门指南目的 这篇指导资料的目的是介绍OSWorkflow的所有概念,指导你如何使用它,并且保证你逐步理解OSWorkflow的关键内容. 本指导资料假定你已经部署OSWorkfl ...
- Codeforces Round #581 (Div. 2)A BowWow and the Timetable (思维)
A. BowWow and the Timetable time limit per test1 second memory limit per test256 megabytes inputstan ...
- 牛客假日团队赛10 L 乘积最大 (dp,大数)
链接:https://ac.nowcoder.com/acm/contest/1072/L?&headNav=acm&headNav=acm 来源:牛客网 乘积最大 时间限制:C/C+ ...
- 【hdu 6071】Lazy Running
菜鸡永远都在做着变聚的梦. 题意 有 \(4\) 个点连成一个环,连接顺序依次为 \(1-2-3-4-1\).相邻两个点之间有个距离 \(d_{i,i+1}\)(特别地,当 \(i=4\) 时为 \( ...