在 html5 下动画多个精灵的最快方法是啥？

Posted 2023-03-05

【中文标题】在 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 速度：

http://www.facebook.com/notes/facebook-engineering/html5-games-01-speedy-sprites/491691753919

【参考方案2】：

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

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

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

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

【讨论】：

为什么一个更新位置而另一个绘制画布？有什么特别的原因吗？

主要是防止帧速慢。例如，进行逻辑更新可能需要很长时间，如果每次绘制时都必须计算这些逻辑更新，则 FPS 会变得非常低，因为您需要更多时间来绘制。

除非您以不同的速率更新它们，否则单独进行更新/渲染间隔没有什么意义。如果它们以相同的频率运行，您将不会从拆分它们中获得任何性能优势。