使用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的理由！