0

我正在尝试通过在 div 上移动精灵图像来创建动画。精灵图像包含动画的每一帧。“画布”的大小为 600 像素 x 624 像素。精灵表上的每一帧每 600 像素定位一次，我一次将图像移动 600 像素。

这是我到目前为止所拥有的...... 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 中会注意到它，并且在 IE 中不会错过它。

它也总是每隔 16200 像素就会卡顿，这让我认为这与将 1 个精灵移动到屏幕上的下一个精灵有关。

想法取悦人？

提前致谢！

4

3 回答 3

1

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

http://www.spritely.net/

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

于 2013-01-10T14:43:55.773 回答
1

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

无论如何，口吃的问题是因为您正在使用几个图像，这些图像都被float编入,left和属性。每次需要显示另一张图像时，都会注意到卡顿。这可能与浏览器引擎有关，需要绘制实际图像（这很难，因为它们很大）。positionsliderright

因此，除了使用多张图片，您还可以使用一张（请注意，您可能希望将其设为 a.JPG或.GIF因为它们往往比 更紧凑）.PNG并使用带有background-position.

这是一个使用您的代码的示例，以及一张图片。祝你好运！

于 2013-01-10T15:16:48.653 回答
0

再次感谢反馈的家伙。我结合了您的提示，这些提示帮助我解决了我遇到的问题。

  1. Spritely 帮了大忙。本质上，它与@marcoK 建议的做法相同，并调整了 background-position 属性。这个插件还提供了一种简单的方法来控制精灵的每一帧，以及在到达指定帧时创建回调 - 太棒了！

  2. 另一个问题是巨大的精灵。移动 safari 不允许任何大于 3MP 的内容，因此我可以制作的图像的最大尺寸为 4800x624。我将其中的 15 个作为单独的动画，当它到达最后一帧时调用下一个。我对这个能否顺利运行持怀疑态度，但它确实如此，并且在所有浏览器中都是如此。

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

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

于 2013-01-11T11:09:05.800 回答