我想在頁面上有一個動畫角色，爲不同的行爲提供不同的動畫。我目前有兩個想法，它可以如何工作：JavaScript來控制圖像動畫？
IDEA 1：將每個行爲都視爲動畫GIF，並在切換行爲時使用JavaScript切換GIF文件。上行：動畫在圖像本身中，爲JS留下更少的工作。下滑：JavaScript沒有辦法（我知道）告訴GIF在什麼幀，當動畫結束/循環等。
IDEA 2：將每個動畫的每個幀作爲PNG圖像並使用JS在幀之間切換，使用一些預加載器以確保在動畫開始之前所有圖像都準備就緒。上行：更多地控制動畫序列。下行：很多幀...
這兩個想法哪個更好？ （我想避免使用Flash這個，順便說一句）
我傾向於想法2我自己，爲了更好的控制它提供。由於該網站已經有一個計時器每50ms運行一次，因此將該動畫添加到該計時器系統並不多。
我知道這是舊的，但我會給選項3，這是類似的選項2有一個轉折。
不是加載框架，你必須加載一個大的spritemap與所有幀和可能的所有動畫+座標的地圖。您將精靈作爲使用正確維度的div的背景。您必須將背景圖像移動到正確的框架。
您可以將不同行上的所有事件和不同列上的每個動畫幀組合在一起。這將使您可以輕鬆控制的網格。
加
減
想法1將無法工作，因爲JavaScript無法控制動畫GIF的當前幀 - 既不跨瀏覽器，也不使用我所知的某些特定（ActiveX/Mozilla特定）擴展名。
我認爲你只剩下Idea 2了。但我不知道你用這種方法能達到的結果有多平滑 - 但你必須測試。
好吧 - 我主要是在尋找確認沒有辦法控制GIF。謝謝:) – 2010-11-26 16:30:22
對於想法1，您可以使用setTimeOut()方法在GIF進行循環的時間長度後觸發事件。但是，問題在於GIF可能會在與JavaScript不同的時間啓動。
就我個人而言，我會去做主意2;只要幀相對較小，客戶端就會很快下載所有圖像（一個16x16像素的PNG是〜500字節）。客戶端計算機在移動幀時沒有問題。
另一個想法是將所有幀放在一個長的圖像中，並使用CSS和jQuery（或vanilla JavaScript）每50ms更改CSS background-position屬性。這意味着更小的圖像和更少的編碼。
你可能想看看freezeframe.js處理所有的動畫。它使用畫布元素從GIF中提取第一幀以便暫停它。
你剛剛回答了你自己的問題。 – galambalazs 2010-11-26 16:23:18
我在問哪個_actually_好些，我在問我的意見是對的還是錯的，以及是什麼原因。 – 2010-11-26 16:24:45
另請參見[你可以用Javascript控制GIF動畫？]（https://stackoverflow.com/questions/2385203/can-you-control-gif-animation-with-javascript） – user 2016-11-01 02:52:50