9

我正在尝试为针对 iPad 2 的 HTML5 网站/应用程序创建带有轨迹的移动灯。我想知道最好的方法是什么，以及使用 HTML5 是否可行。我选择 HTML5 是因为它比使用 Objective C 的原生 iOS 应用程序更容易、更便宜地开发和部署。当然，如果结果证明 HTML5 根本无法提供足够的性能，我可能不得不吞下苦果。

无论如何，为了给你一个印象，我在说什么，这就是我到目前为止得到的：

截图 http://devdali.no-ip.org/mathias/test-lights/screenshots/1.jpg

或者你可以在这里看到它的实际效果（仅适用于基于 webkit 的浏览器）。

起初，我尝试使用 HTML5 画布并以与您在上面看到的类似方式将径向渐变绘制为粒子。它有效，但即使在我的台式电脑上，帧速率也很糟糕！

因此，经过一番阅读，我发现 CSS3 转换可能是硬件加速的，所以我构建了您在上面看到的版本。每个“粒子”都是 64x64 png 图像。对于每盏灯，都有一个“头”灯（一个 img），后面跟着一个由 115 个 img 元素组成的轨迹。每个 img 元素都使用“translate3d”（以及缩放和旋转）进行转换。每个元素的不透明度也是动态调整的。

这样做可以在我的计算机上提供更好的帧速率，但我怀疑 iPad 2 会处理它。

如果有人能给我一些关于如何提高总体性能并考虑目标平台的提示，我将不胜感激。

提前感谢您的帮助！

4

3 回答 3

1

如果您接受对效果的微小更改，则其他一些过程可能会很快起作用：

  • 无需通过许多粒子来绘制灯光的轨迹，只需在 Canvas 元素中的当前位置绘制灯光即可。

  • 然后，您可以通过在顶部填充一个不透明度非常低的黑色矩形来使整个图像在帧的开头变暗。这样，小径会逐渐变暗，但不会像现在这样改变它们的颜色。

  • 然而，绘图操作的数量将大大减少。最昂贵的操作是为每一帧填充渐变矩形。

于 2012-08-14T19:50:07.907 回答
0

这应该在画布中构建。查看 EaselJS 和这个演示。

http://easeljs.com/ http://easeljs.com/demos/MusicVisualizer/index.html

于 2012-03-28T14:13:34.117 回答
0

您可以通过使用 WebGL（在 iPad2 上受支持）来优化性能……正如 Nison Maël 所说，ios safari 上的基本 html 页面不支持它……

暂时你只有画布作为解决方案。这仍然会给你更好的表现......

（您可以查看此博客以获取更多信息： http: //learningwebgl.com/blog/

有一点信心和时间，你会感到惊讶！）

于 2012-08-09T10:25:22.970 回答