使用JavaScript动画/移动精灵时口吃

Question

我试图通过在div上移动精灵图像来创建动画。 精灵图像包含动画的每个帧。 “画布”的大小是600px乘624px。 精灵表上的每个帧每600px定位，我一次移动图像600px。

这是我到目前为止所做的 ... voyced.com/crownacre/www/demo/sprite.html

我正在使用以下JavaScript在屏幕上移动图像...

(function myLoop(i) {
    setTimeout(function() {
        defImg.css({
            right: '-=600'
        });
        if(--i) myLoop(i); //  decrement i and call myLoop again if i > 0
    }, 60) // delay ms
})(114); // number of frames in the sprite

我已经使用了几个漂浮在左边的精灵作为69000px的精灵表的总宽度，如果我只使用一个图像就会导致更多的问题！ 因此，为什么我现在有4个。

所以...我遇到的问题是动画暂停几次。 它似乎在Firefox（对我来说）很好，但你在Chrome中注意到它，你不能错过它在IE中。

它也总是每16200px口吃，让我觉得这与将1个精灵移动到屏幕上的下一个精灵有关。

想请人吗？

提前致谢！

Answer 1

你尝试过使用精灵动画插件吗？

http://www.spritely.net/

你想要什么，似乎在他们的演示中运行良好。

Answer 2

首先我要说的是：您尝试显示为精灵的巨大图像并不是精灵/动画的用途。 您可以更好地查看真正的 <canvas>解决方案（特别是在查看动画时），但这需要一些更复杂的JavaScript技能。

无论如何，口吃的问题是因为你使用了几个float到left ，并使用right属性position slider 。 每次需要显示另一个图像时，可以注意到口吃 。 这可能与浏览器引擎有关，需要绘制实际图像（这很难，因为它们非常大）。

因此，您可以使用一个（请注意，您可能希望将其设置为.JPG或.GIF因为它们往往比.PNG更紧凑），并使用具有background-position 实际 CSS精灵，而不是使用多个图像。

这是一个使用您的代码和一个图像的示例 。 祝好运！

Answer 3

再次感谢您的反馈。 我使用了一些提示，帮助我解决了我遇到的问题。

1. Spritely帮助极大。 基本上它与@marcoK建议的相同，并调整背景位置属性。 这个插件还提供了一种控制精灵每个帧的简单方法，以及当它到达指定帧时创建回调 - 太棒了！

2. 另一个问题是巨大的精灵。 移动野生动物园不允许任何大于3MP的东西，所以我可以拍摄的最大尺寸为4800x624。 我将其中的15个作为单独的动画，当它到达最后一帧时调用下一个动画。 我非常怀疑这种工作顺利进行，但确实如此，并且在所有浏览器中都是如此。

我对它的请求数量并不是很满意，但是在优化了png之后，如果我添加一个预加载器，文件大小也不会太糟糕。

真的很满意结果...... http://www.crownacre.voyced.com/还有一个不使用Flash的理由！