弹幕、抽奖及投票

#前言#

距离年会还有一两个月…

赵总: 我们今年的年会要搞得有点创意。

众程序猿: 什么是有点创意?

赵总: 至少那个奖项投票结果要像星光大道那样,有动画!

众程序猿: 哦…

#抽奖(老虎机)#

###requestAnimationFrame###

######requestAnimationFrame是什么?######

在浏览器动画程序中,我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次,来让它动起来。这个requestAnimationFrame()函数就是针对动画效果的API,你可以把它用在DOM上的风格变化或画布动画或WebGL中。

######使用requestAnimationFrame有什么好处?######

浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果。

参考: HTML5探秘:用requestAnimationFrame优化Web动画

###js对象封装###

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//定义
var name = function(){
var variate1, variate2, variate3....;
var method1 = function(){
//do something
};
var method2 = function(){
//do something
};
var method3 = function(){
//do something
};
return{
publicMethod: method1,
method2: method2
}
}();
//使用
name.publicMethod();
name.method2();

######好处######

  1. 代码结构清晰
  2. 防止方法名被覆盖

###提高js运行的小经验###

  1. 使用for()循环替代for…in循 环。因为for…in循环在开始循环之前需要Script引擎创建一个含有所有可循环属性的 List,需要多检查一次;
  2. fullName += ‘John’; fullName += ‘Holdings’;执行速度快于fullName += ‘John’ + ‘Holdings’;
  3. 如果你需要把多个字符串连接起来,最好是把他们做成一个数组,然后调用join()方法实现这个操作。这种方式在生成HTML片段时尤其 有效。
  4. 对于简单的任务,最好使用基本操作方式来实现,而不是使用函数调用实现。例如val1 < val2 ? val1 : val2;执行速度快于Math.min(val1, val2);,类似的,myArr.push(newEle);慢于myArr[myArr.length] = newEle;
  5. 当你对对象的成员(属性或方法)进行反复操作时,先存储对它们的引用。例如var getTags = document.getElementsByTagName; getTags(‘div’);
  6. for(var i=0; i < someArray.length; i++) {…}的执行效率慢于for (var i=0, loopLen=someArray.length; i<loopLen; i++) {…}。
  7. 尽可能的使用原始JavaScript。限制JavaScript框架的使用。

参考: 30个提高Web程序执行效率的好经验

###动画核心(scrollTop属性)###

scrollTop属性设置或者返回一个元素在垂直方向上的滚动像素值

1
2
3
4
5
6
7
8
9
10
11
12
13
var animate = function(now) {
if (!start) start = now;
var t = now - start || 0;
//定义滚动动画,从第stepFlag开始到结束,头一个慢慢减速停止,剩下的无序滚动
for (var i = stepFlag; i < layout; ++i) {
if (i <= stepFlag) {
$reels[i].scrollTop = (speeds[i] / tMax / 2 * (tMax - t) * (tMax - t)) % (employees.length * imgHeight) + r[i] * imgHeight | 0;
} else {
$reels[i].scrollTop += (Math.random() > 0.5 ? -1 : 1) * imgHeight * Math.random() * 5;
}
}
...
};

参考:HTML DOM scrollTop Property

###背景音乐(HTML5 audio)###

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//播放背景音乐
var playSong = function() {
var song = document.getElementById('song');
song.volume = 1;
song.play();
};
//暂停背景音乐
var stopSong = function() {
//渐渐关小音量
var song = document.getElementById('song');
var fadeOut = setInterval(function() {
if (song.volume > 0) {
song.volume -= 0.1;
song.volume = parseFloat(song.volume.toFixed(1));
console.log(song.volume);
} else {
song.pause();
clearInterval(fadeOut);
}
}, 300);
};

参考:HTML audio Tag

#投票结果展示#

###D3.js###
d3.js是一个优秀的数据可视化库,可以让我们方便快捷地实现数据到图形的变换。但是:

  1. d3.js不是一个图形绘制库,不像echartshighcharts等图形库,提供了各种图形的接口供用户使用。
  2. d3.js是一个基于集合概念的 DOM操作库。类似jQuery,依赖于选择符选中一组元素,建立一个集合,然后使用集合对象的方法操作DOM。
  3. d3.js的大量功能集中在数据处理方面。将数据映射到图形,做诸如数据范围的变换、插值的计算、布局的计算等等。
  4. d3.js的核心是对数据可视化元素的匹配。d3将数据可视化抽象为数据与可视化元素的匹配,一个数据对应一个可视化元素,一个数值对应一个可视化元素的属性

###SVG和Html5 Canvas###

#####Canvas

  • 基于像素(canvas 实质上是一种带有绘图 API 的图像元素)
  • 单个 HTML 元素,其行为类似于 <img>
  • 通过脚本以编程方式创建和修改视觉呈现
  • 事件模型/用户交互是粗粒度的—仅在 canvas 元素级别;必须通过鼠标坐标对交互进行手动编程设置
  • API 不支持可访问性;除了 canvas,还必须使用基于标记的技术

#####SVG

  • 基于对象模型(SVG 元素类似于 HTML 元素)
  • 多个图形元素,是文档对象模型 (DOM) 的一部分
  • 使用标记创建视觉呈现,并通过 CSS 或通过脚本以编程方式修改视觉呈现
  • 事件模型/用户交互是基于对象的,在最基本的图像元素级别进行——线条、矩形、路径
  • SVG 标记和对象模型直接支持可访问性

Canvas 是一种位图,采用直接模式 (immediate mode)的图形应用程序编程接口 (API) 在其上进行绘图。 Canvas 是一种“发后不理”(Fire and Forget) 模型,在这种模式下,将直接向位图呈现其图形,之后对绘制的形状并不知晓;最后只呈现生成的位图。

SVG 是一种保留模式 (retained mode)的图形模型,是一种在内存中进行持久处理的模型。类似于 HTML,SVG 构建了包含图元、属性和样式的对象模型。
在 HTML5 文档中出现 <svg> 元素时,它的作用类似于一个内联块,并且是 HTML 文档树的一部分。

可以认为 Canvas 类似于 Windows GDI API,您通过编程方式向窗口中绘制图形;而 SVG 类似于 HTML 标记,具有元素、样式、事件和基于 DOM 的编程能力。Canvas 是过程性的,而 SVG 是声明性的。

#####结论

111

#弹幕#

###功能介绍

  • 弹幕——连接手机和大屏幕,在屏幕上更大胆的表达和吐槽。

###技术实现

###局限性和想象