在 html5 下动画多个精灵的最快方法是什么？答案

【问题标题】：What is the fastest way of animating multiple sprites under html5?在 html5 下动画多个精灵的最快方法是什么？
【发布时间】：2011-07-20 06:01:48
【问题描述】：

我正在尝试同时为 50 个左右的精灵设置动画，使用 30 毫秒的 setInterval。

什么能提供更好的性能？使用画布？还是使用 -webkit-transform 和 div？有没有人有任何关于为 html5 制作动画的技巧？

【问题讨论】：

好吧...while(true){} 应该可以解决问题。（笑话）
我发现这个类似问题的 quora 回答非常有用：http://www.quora.com/What-is-the-best-way-to-get-faster-frame-rates-with-HTML5-Canvas/answer/Miller-Medeiros

【解决方案1】：

对您的问题的简短回答是 Canvas 应该提供更好的性能。

这篇来自 Facebook 工程的帖子也应该有助于您了解 Canvas 速度：

【讨论】：

【解决方案2】：

当您需要对动画进行更改时，使用 Javascript 和 HTML5 画布将比 -webkit-transform 和 div 更轻松。

我个人推荐 HTML5 画布和 Javascript 以兼容（目前），因为 -webkit-transform 仅在 Webkit 浏览器上可用。

坚持人眼无法看到帧变化超过每秒 20 帧 (FPS) 的规则，0.05 秒（又名 50 毫秒）的 setInterval() 计时器可能是最好的。

我遵循 XNA 游戏框架的工作原理，所以我通常有 2 个 setInterval() 调用，1 个用于逻辑更新，另一个用于绘制画布。

【讨论】：