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

Stutter when animating / moving sprite with JavaScript

本文关键字：精灵 移动 JavaScript 动画      更新时间：2023-09-26

我试图通过在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口吃，让我认为这是有关移动一个精灵到下一个在屏幕上。

创意让人高兴?

提前感谢!

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

http://www.spritely.net/

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

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

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

所以，与其使用几个图像，你也可以使用一个(注意，你可能想让它成为.JPG或.GIF，因为它们往往比.PNG更紧凑)，并使用实际的 CSS精灵与background-position。

下面是使用您的代码和单个图像的示例。好运！

再次感谢大家的反馈。我综合使用了你的建议，这些建议帮助我解决了我遇到的问题。

  1. sprely帮了大忙。从本质上讲，它是做同样的@marcoK建议，并调整背景位置属性。这个插件还提供了一种防傻瓜的方法来控制精灵的每一帧，以及在它到达指定帧时创建回调-真棒!

  2. 另一个问题是巨大的精灵。Mobile safari不允许超过300万像素的图片，所以我可以制作的图片的最大尺寸是4800x624。我有15个这样的动画，每个作为一个单独的动画，当它到达最后一帧时调用下一个。我非常怀疑它是否能顺利运行，但它确实在所有浏览器中运行。

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

对结果非常满意…http://www.crownacre.voyced.com/和另一个不使用Flash的理由!

相关文章：