如何使用jQuery（通過滾動或觸發動畫）通過PNG動畫製作動畫

越來越多的我看到png被加載到一系列DIV（或一個div）然後逐幀排序的效果基於按鈕點擊或基於滾動。我試着偷看代碼，並且我明白JavaScript正在做繁重的工作，但我仍然有點失落，有沒有關於這種技術的任何教程？例子？動畫如何使用jQuery（通過滾動或觸發動畫）通過PNG動畫製作動畫

例如（多格）：動畫（一個DIV）的

2012-03-12 user379468

你只是想換出使用setInterval計時器的src屬性

var myAnim = setInterval(function(){ 
    $(".myImageHolder").attr('src', nextImage); 
}, 42);

關鍵是你如何產生nextImage。這在很大程度上取決於你的圖像的命名約定，或者你希望哪個方向的動畫在

更新

也許改爲運行或者使用plugin

2012-03-12 15:31:10

是的關於精巧的事情是，圖像序列實際上是一個大的圖像，即被移動到創造一個動畫。我真的不認爲這可以用於更大更復雜的圖像序列。 – user379468 2012-03-12 15:37:12

是的，文件大小將是巨大的。 – 2012-03-12 15:40:16

好吧，可能比所有的個人圖像累積更小 – 2012-03-12 15:43:17

的不同的圖像之間進行切換，使用在這個問題中描述的spriting技術：How to show animated image from PNG image using javascript? [ like gmail ]

2012-03-12 15:36:15 Zugbo

我還沒有得到代表評論其他答案，但在迴應文件大小問題：如果你必須加載所有的圖像，無論如何，你已經致力於發送這些數據 - 通過將圖像捆綁到一個sprite中，至少可以節省HTTP開銷。您還可以在圖像加載後立即啓動動畫，而不必單獨檢查所有圖像。 – Zugbo 2012-03-12 15:43:36

這可能是事實，但我認爲還有其他原因不是最佳的。圍繞10,000 x 10,000的圖像進行渲染的成本比切換可見性或交換分區中圖像的名稱要貴得多...... – user379468 2012-03-12 15:52:53

您必須權衡文件大小與HTTP請求的數量。如果你的圖像不必是完全透明的，你可以將它們渲染成一個大的JPEG文件......但是如果它們需要成爲PNG-24的話，那麼將它們組合在一起非常麻煩。 HTTP請求可能更值得。 – 2013-05-17 20:18:02

回答