还记得圣诞节之前,为了在网络上营造下雪的气氛,谷歌和微软先后都推出了 Let It Snow 下雪花的演示,相信给大家还都有印象吧。为了让大家更加了解HTML5技术,微软IE浏览器项目经理 Bogdan Brinza 专门在IE官方博客中发布了一篇 Let It Snow 演示的设计制作原理的博文,以下为全文: 当浏览器能够高效地利用基础硬件的强大性能时,其应用前景是不可限量的。我们曾在节日期间发布了一个 HTML5 演示,向大家展示利用 Internet Explorer 10 内置的完全硬件加速、触控优先的浏览体验的强大优势。本博文揭示了 Let It Snow 演示的创建过程。该演示的实现模式属于典型的 HTML5 体验,在当今的 Web 应用和早期的 Metro 风格应用程序 中,HTML5 体验如星星之火,正在不断发展壮大。我们将重点关注该演示的功能实现,而不是演示的视觉效果。 随着低功耗的移动设备和触控优先的用户体验逐渐成为主流,用户对浏览器性能的期望值也被快速推高。现在,用户期望的浏览器性能包括:如何通过触控操作流畅地浏览网站、如果让网站快速对触控互动作出响应以及如何让浏览器有效地节约对电池电量的消耗。借助 Internet Explorer 10 和 Windows 8,我们开始着手打造适用于各种真实应用情景的世界上速度最快的浏览器。
节日明信片我们首先创建了一个主题明信片,并在其中留出一个指定区域,用于填写节日祝福。该明信片在运行时利用 HTML5 Canvas 画布生成,并使用了大量常用的绘画技术,包括绘制图像、编排过渡效果、控制透明度和倾斜度等。 | |
暴风雪动画接下来,我们添加了大量纷纷飘落的雪花来制造一场暴风雪。我们利用覆盖在明信片之上的第二层 Canvas 画布来实现此目的。每一片雪花都是 JavaScript 集合中的一个对象,JavaScript 集合存储了雪花的状态,如当前位置、飘落速度和要绘制的图像。该 Canvas 在每一帧清空一次,并从基础模型重复该场景。 | |
雪花渐渐沉积随着时间的推移,雪花将沉积到标志牌上。我们利用命中检测技术来确定雪花何时飘到标志牌上方,并随机分配雪花在标志牌上的飘落位置。当雪花接近目标位置时,我们使用 HTML5 Canvas 的合成模式在 Canvas 上绘制雪花。 | |
抚落积雪可以使用手指或鼠标抚落明信片上的积雪。我们利用新增的 MSPointer 事件来跟踪用户输入,该事件可以跨各种不同的指针模型提供一种统一的 API。这样,我们就可以在运行于 Windows 8 的 Internet Explorer 10 中提供良好的多点触控体验。我们利用捕获到的这些点来擦除 Canvas 的特定部分,从而营造出积雪被抚落的效果。 | |
完成场景将这些层组合到一起,就可以创建一个交互式的节日场景。该演示中所采用的实现???式利用了“愤怒的小鸟”(Angry Birds) 或“怪物吃糖果”(Cut The Rope) 等游戏中常用的技术,包括基于脚本的动画、复杂用户输入、基于物理对象的游戏逻辑等。 |
利用完全硬件加速并支持触控操作的 HTML5 平台,我们在 Internet Explorer 10 和 Windows 8 中营造了快速而流畅的交互式体验,我们对此感到非常自豪。使用 Windows 8 开发人员预览版,您可以抢先体验这些优势。(Windows 8中内置了IE10浏览器) —Internet Explorer 项目经理 Bogdan Brinza via:Under the Covers: Let It Snow…
标签:HTML5IE10IE WebLet It Snow设计原理