動畫通過改變div的背景圖像

我們試圖通過改變一個div元素的背景來通過一系列圖像來模擬一個動畫並重復這個循環。有四個533x800 8位PNG圖像，每個大小約110KB。 JavaScript函數通過setInterval運行，並且它每隔300毫秒將div背景更改爲下一個圖像。我認爲這對瀏覽器來說不是一件很繁重的事情，但事實證明，這個過程太滯後了。特別是在移動設備上。你會建議什麼更好的方式來實現這一目標？下面是改變背景的JS（jquery）函數。謝謝動畫通過改變div的背景圖像

function changeBackground() { 
    if (typeof changeBackground.counter == 'undefined') { 
     changeBackground.counter = 1; 
     changeBackground.backObject = $('#body'); 
    } 

    if (changeBackground.counter == 5) 
     changeBackground.counter = 1; 

    changeBackground.backObject.css('background-image', "url(graphics/" + changeBackground.counter + ".png)"); 
    ++changeBackground.counter; 
}

來源

2012-08-31 wirate

預加載圖像？ – karim79

請發佈您當前使用的JavaScript代碼，以便可以進行分析。 –

難道你不能只用這些圖像製作GIF動畫？這將導致只有一個圖像加載，而不需要JavaScript。 – Paul

通過將所有四個圖像相鄰放置來創建一個大的複合背景圖像。然後加載背景並每隔300毫秒更改其位置（因此它顯示四個「幀」之一），而不是每次加載新背景

來源

2012-08-31 14:49:58 Asciiom

我認爲GIF會更好：它可以部分加載並且仍然有效，而您必須等待您的加載至少四分之一的路程。 –

所以最終判決，我做了一個gif或我做一個精靈？：P – wirate

取決於我認爲圖像有多沉重。我相信蘋果使用了我建議爲應用程序商店做倒計時的方法（1.000.000.000下載計數器） – Asciiom

正如CalMlynarczyk所建議的那樣，我發佈我的評論作爲答案。

你應該從這些圖像中製作一個GIF動畫。這將導致只有一個圖像加載，並且不需要JavaScript（也就是說，它也適用於JavaScript禁用）。對於透明度，GIF支持它，但只能以布爾方式（像素是100％透明或不透明，而PNG-24支持alpha透明度和0％到100％之間的任何值）。此外，還有許多免費提供服務的在線動畫GIF發生器。不應該花費5分鐘以上從一個GIF動畫中獲取動畫。

只有很多圖像，使用GIMP（開源，免費）創建GIF也相當容易。如果保存工作文件，則可以輕鬆地重新排序圖像序列或更改幀之間的時間。

來源

2012-08-31 15:05:15 Paul

謝謝我會嘗試這兩種方式... – wirate

請多一點幫助...我有一個32位PNG序列，需要布爾透明度，但因爲我不知道該怎麼辦，所以我必須保留整個alpha通道，否則圖像甚至可以在8位顏色深度下很好。所以問題是，我希望這些圖像具有8位顏色深度和布爾透明度。如何才能做到這一點？ – wirate

將圖像載入GIMP之類的內容並保存爲GIF。這會自動創建一個8位調色板（因爲GIF只支持最多256種顏色）。 – Paul

動畫通過改變div的背景圖像

回答

相關問題