Javascript 在SpriteSheet上使用SpriteSheet渲染的动画未正确显示

我正在使用sprite sheet builder从通用MovieClip生成

SpriteSheet

类型对象。之后，我使用

SpriteSheet

创建一个Sprite类型的对象，其中包含一个时间轴，我将其添加到

SpriteStage

中，如下所示：

 var spriteStage = new createjs.SpriteStage(canvas);
 var sprite = new createjs.Sprite(spriteSheet);
 spriteStage.addChild(sprite);
 sprite.play();
 createjs.Ticker.addEventListener("tick", spriteStage);

问题是：这样做的结果是动画被破坏。看起来只显示了几帧，动画要么以非常快的速度循环这几帧，要么根本不做任何事情

使用勾号更新功能上的

console.log（sprite.currentFrame）

我可以看到所有帧都以每秒30的速度递增，但实际显示的内容与此不符

---

请注意，使用普通的

舞台

添加并播放

精灵

动画，效果良好。另外，根据

Chrome://gpu

，WebGL已启用，因此这也不是问题所在。

SpriteStatage需要SpriteContainers，它引用sprites可以使用的单个图像。

这是一种较旧的WebGL方法——因此您可能对StageGL感兴趣，这是一种新的EaselJS方法，我们正在进行测试，应该很快发布。基本上，它的工作原理与Stage相同，但可以接受更多的内容（而且速度更快！）。注意，上面的方法更符合StageGL的工作方式

GitHub中有一个分支：

---

我们仍在完善文档和演示（由于其他优先事项而延迟），但希望尽快将其标记。

谢谢，StageGL看起来非常有趣，我将很快进行研究。不过还有一件事。当我尝试将

SpriteContainer

添加到舞台的方法时，我意识到我只能向舞台添加只使用一个图像的对象，如精灵。在这种情况下，如何将动画对象添加到“SpriteTestage”中？这是SpriteContainer/SpriteTestage方法的一个限制。精灵使用精灵表，它允许您以与常规舞台相同的方式设置动画。你想做什么样的动画？我通常用普通的MovieClips作为动画对象。但由于它们大多是由形状制成的，因此渲染它们的成本可能非常高。这就是为什么到目前为止，我使用一种方法来迭代和缓存它们的子对象，并且在对象仍处于动画状态时，性能影响保持最小。但是应用程序越来越复杂，所以我一直在寻找一种更有效的方式来播放动画。Sprite表似乎是答案，但它们的实现要比导出的Flash图形复杂得多。将矢量转换为SpriteSheet可能很好，但在内存方面非常昂贵，尤其是对于大型图形。查看EaselJS SpriteSheetBuilder，了解MovieClips的运行时转换。请注意，当它们太复杂时，最好使用向量。是的，我也得出结论，在处理复杂的电影片段时，最好还是坚持使用标准向量，因为内存消耗会变得相当大。由于我总是使用

cache（）

方法处理形状和电影嘴唇，因此在桌面浏览器上没有性能问题。主要问题是，我主要为移动设备制作应用程序。我想这就是HTML5与本机环境相比的极限。