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

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

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

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

想法请人吗？

提前致谢！

Answer 1

您是否尝试过使用精灵动画插件？

http://www.spritely.net/

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

Answer 2

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

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

因此，您可以使用一个图片而不是使用多个图片（请注意，您可能希望将其设为.JPG或.GIF，因为它们往往比{{1}更紧凑}）并使用实际 CSS精灵与.PNG。

Here's an example that uses your code, and one single image。祝你好运！

Answer 3

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

Spritely帮助极大。基本上它与@marcoK建议的相同，并调整背景位置属性。这个插件还提供了一种控制精灵每一帧的简单方法，以及当它到达指定帧时创建回调 - 太棒了！
另一个问题是巨大的精灵。移动游猎不会允许大于3MP的任何东西，因此我可以拍摄的最大尺寸是4800x624。我将其中的15个作为单独的动画，当它到达最后一帧时调用下一个动画。我非常怀疑这种工作顺利进行，但确实如此，并且在所有浏览器中都是如此。

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

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

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

3 个答案: