用JavaScript動畫/移動精靈時出現口吃

Question

我正在試圖通過跨精靈移動精靈圖像來創建動畫。精靈圖像包含動畫的每個幀。 「畫布」的大小是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

再次感謝反饋傢伙。我使用了幫助我解決我遇到的問題的技巧組合。

1. Spritely幫助非常大。基本上它和@marcoK建議的一樣，並調整背景位置屬性。這個插件還提供了一種控制精靈每幀的傻瓜式方法，以及在到達指定幀時創建回調 - 非常棒！

2. 另一個問題是巨大的精靈。移動Safari不允許超過300萬像素，因此我可以製作圖像的最大尺寸爲4800x624。我將其中的15個作爲一個獨立的動畫，在到達最後一幀時調用下一個動畫。我很懷疑這個工作是否順利，但它確實，並且在所有瀏覽器中。

我不是請求它使數量，但優化的PNG文件的大小是不是太糟糕，如果我添加一個預裝載機後不太滿意。

真的很滿意的結果...... http://www.crownacre.voyced.com/和另一個理由不使用Flash！

Answer 2

您是否嘗試過使用精靈動畫插件？

http://www.spritely.net/

你想要做什麼，似乎對他們的演示運行良好。

Answer 3

讓我先說：您試圖顯示爲精靈的巨大圖像並不完全是用於精靈/動畫的。您可以更好地研究真實<canvas>解決方案（尤其是在查看動畫時），但這需要更復雜的JavaScript技能。

無論如何，與口吃的問題，是因爲你使用多個圖像是所有float版的left，並position的slider與right財產。每當需要顯示另一個圖像時，都可以注意到口吃。這可能與瀏覽器引擎有關，需要繪製實際圖像（這很難，因爲它們很大）。

因此，而不是使用多個圖像，你也可以使用一個（注意，你可能想使這個.JPG或.GIF，因爲它們往往比.PNG更緊湊），並使用實際 CSS精靈與background-position 。

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