javascript - 动画运行速度较慢，并且如果没有在 chrome 中重新加载页面，则不会重播

Question

嗨，我正在学习使用easelJS 编写基于浏览器的游戏的教程。教程进展顺利，但我在 chrome 上播放动画时发现了一些问题。

Chrome 运行动画的速度较慢，并且一旦播放完相同的动画就不会再次播放，除非我重新加载页面。

在 Firefox 中运行它没有任何这些问题。

这是链接：（对代码使用检查元素）

我听说 chrome 中存在一些缓存问题，所以我认为这可能是问题所在。手动删除缓存实际上确实允许动画在不重新加载页面的情况下再次播放，但它仍然运行缓慢（与 firefox 相比）。

当我想为跨浏览器兼容性编写代码时，chrome 中是否有一种支持的方式来解决这些问题？例如阻止将图像存储在缓存中或其他什么？（我希望是最后的手段）

提前致谢，

共平

编辑：似乎动画的速度在 ie10 上是一样的，所以不知道你应该知道什么速度。

score 0 · Accepted Answer

我读了一篇文章 Fix your Timestep它会对你有所帮助，只需将其转换为 javascript，请仔细阅读。

score 0 · Accepted Answer

“重置”后这将不起作用的原因是您依赖图像加载事件来启动动画。这将在第一次工作，但第二次，图像已经加载，因此你永远不会从图像中获得 onload 事件（意味着没有“startGame（）”。

由于这是一个简单的示例，也许最好的方法是每次都创建新图像。只需将这些行移动到您的 init 中：

function init() {
    var imgMonsterARun = new Image();
    var imgMonsterAIdle = new Image();
    // Other stuff
}

2 回答 2