来测测你的浏览器性能:Bubbles (气泡)演示

我们曾讨论过 IE10 中引入的 JavaScript 性能改进。

今天,我们发布了 Bubbles,该演示深受 Alex Gavriolov 的模拟 BubbleMark 启发,并进一步将至发扬光大。当前版本已获得了大幅扩展,可充分利用 Web 平台的新功能,并包含了 HTML5 游戏常见的特性。0841

Windows 8 Release Preview Metro 风格的 IE10 中运行的 Bubbles 演示

该演示的结构

该演示包含一系列漂浮在空中的动画气泡。其核心为相对简单的 JavaScript 物理引擎。在每个动画帧上,大约 60 次每秒,物理引擎会重新计算所有气泡的位置,通过应用重力并计算碰撞来调整每个气泡的速度。所有这些计算都会涉及大量浮点运算。屏幕上的每个气泡都会通过一个 DOM 图像元素来表示,并针对其应用 CSS 转换。该图像会首先围绕其原点转换,然后动态缩放以产生气泡膨胀的效果。在 JavaScript 中,每个气泡都将表示为一个带有访问器属性(在 ECMAScript 5 中引入)的对象。

漂浮的气泡后方是一张大幅的图像,该图像最初由一个在 <canvas> 元素中渲染的完全不透明蒙板遮罩。每当两个气泡碰撞时,一部分遮罩蒙板将通过向蒙板的透明度组件应用高斯滤波器移除,以产生扩散的透明效果。此过程还涉及许多浮点乘法,这些运算将在类型化数组的元素上执行(如果该浏览器支持)。

漂浮的气泡上带有一个触控表面,如果运行该演示的浏览器支持触控,则将对触控做出响应,如果不支持触控,则将对鼠标事件做出相应。作为对触控的响应,模拟的磁斥力将施加到浮动的气泡上,将它们弹开。

官方地址:Bubbles 演示

(来源:微软IE官方博客)

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  0   站长  0

    • 网站排行榜 1

      这个有意思~