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

Question

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

什么能提供更好的表现？ 用帆布？或者使用-webkit-transform和div？有没有人为html5制作动画？

Answer 1

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

来自Facebook工程的这篇文章也应该有助于您理解Canvas速度：

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

Answer 2

当您需要对动画进行更改时，使用Javascript和HTML5画布会比-webkit-transform和div更少头痛。

我个人推荐使用HTML5 canvas和Javascript以实现兼容性（目前），因为-webkit-transform仅适用于Webkit浏览器。

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

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