距离年会还有一两个月…
赵总: 我们今年的年会要搞得有点创意。
众程序猿: 什么是有点创意?
赵总: 至少那个奖项投票结果要像星光大道那样,有动画!
众程序猿: 哦…
#抽奖(老虎机)#
###requestAnimationFrame###
######requestAnimationFrame是什么?######
在浏览器动画程序中,我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次,来让它动起来。这个requestAnimationFrame()函数就是针对动画效果的API,你可以把它用在DOM上的风格变化或画布动画或WebGL中。
######使用requestAnimationFrame有什么好处?######
浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果。
参考: HTML5探秘:用requestAnimationFrame优化Web动画
###js对象封装###
|
|
######好处######
- 代码结构清晰
- 防止方法名被覆盖
###提高js运行的小经验###
- 使用for()循环替代for…in循 环。因为for…in循环在开始循环之前需要Script引擎创建一个含有所有可循环属性的 List,需要多检查一次;
- fullName += ‘John’; fullName += ‘Holdings’;执行速度快于fullName += ‘John’ + ‘Holdings’;
- 如果你需要把多个字符串连接起来,最好是把他们做成一个数组,然后调用join()方法实现这个操作。这种方式在生成HTML片段时尤其 有效。
- 对于简单的任务,最好使用基本操作方式来实现,而不是使用函数调用实现。例如val1 < val2 ? val1 : val2;执行速度快于Math.min(val1, val2);,类似的,myArr.push(newEle);慢于myArr[myArr.length] = newEle;
- 当你对对象的成员(属性或方法)进行反复操作时,先存储对它们的引用。例如var getTags = document.getElementsByTagName; getTags(‘div’);
- for(var i=0; i < someArray.length; i++) {…}的执行效率慢于for (var i=0, loopLen=someArray.length; i<loopLen; i++) {…}。
- 尽可能的使用原始JavaScript。限制JavaScript框架的使用。
- …
###动画核心(scrollTop属性)###
scrollTop
属性设置或者返回一个元素在垂直方向上的滚动像素值
|
|
参考:HTML DOM scrollTop Property
###背景音乐(HTML5 audio)###
|
|
#投票结果展示#
###D3.js###
d3.js是一个优秀的数据可视化库,可以让我们方便快捷地实现数据到图形的变换。但是:
- d3.js不是一个图形绘制库,不像echarts、highcharts等图形库,提供了各种图形的接口供用户使用。
- d3.js是一个基于集合概念的 DOM操作库。类似jQuery,依赖于选择符选中一组元素,建立一个集合,然后使用集合对象的方法操作DOM。
- d3.js的大量功能集中在
数据处理
方面。将数据映射到图形,做诸如数据范围的变换、插值的计算、布局的计算等等。 - 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 是声明性的。
#####结论
#弹幕#
###功能介绍
- 弹幕——连接手机和大屏幕,在屏幕上更大胆的表达和吐槽。
###技术实现
###局限性和想象
- 表现方式较单一
- 声音
- 动画
- 可以尝试加入@功能
- Source Code
https://github.com/CardInfoLink/danmu/tree/develop/windows