如何讓這個Javascript/jQuery動畫更好？

Question

網頁是 - http://schnell.dreamhosters.com/spriteanimate.html

只要進入頁面和'查看源代碼'，你就會看到所有的代碼。

現在它很簡單。右箭頭鍵使X右移，左箭頭鍵使他左移。他在正確的方向上執行一個正在運行的動畫，並且實際的圖像元素以相同的方向移動。

我現在所面對的主要問題是優化。如果你稍微玩一下，你會發現運行的動畫並不總是平滑的，並且在頭幾秒感覺非常遲緩，就像它仍在加載某些東西。左轉的動畫對此特別有罪。另一個問題是來自jQuery的.animate（）。它做了一種停步走動，你可以告訴。圖像元素的運動不穩定並且不太平滑。

來自jQuery的.animate（）可以使用緩動等進行調整，但我不完全確定這是否是答案，這仍然使我偶爾會遇到運行滯後或其他問題。那麼有沒有人有任何建議？

Answer 1

使用圖像預加載的精靈圖像，或更好地，使用一個圖像作爲精靈，而不是交換圖像文件，移動圖像文件的位置。您需要將圖像設置爲背景圖像並移動背景位置以實現此目的。

另外，使用線性緩動，否則默認爲擺動，緩慢進出。

Answer 2

你有沒有考慮過使用CSS3過渡而不是標準的jQuery動畫。這樣做會顯着提高性能，但會失去一些跨瀏覽器兼容性。下面是其只適用於Chrome，但顯示了電源

http://girliemac.com/sandbox/matrix.html

，更多的是CSS3動畫

http://css3.bradshawenterprises.com/