需要使用javascript（模仿gif）和jpg創建動畫

Question

我有很多來自舊的Flash動畫的jpeg。 它們的命名順序是從1000.jpg到1092.jpg。 我試圖用這些圖片創建一個.gif動畫，但是gif太大了，質量太差了。

這就是為什么我嘗試使用jQuery動畫那些jpeg來模仿此gif動畫的原因。

這是我在stackoverflow上找到的代碼

$("#logo").click(function() {
var $logo = $(this), src = $logo.attr("src");
var index = src.indexOf('.jpg');
var step = +src.slice(index-4, index);

function frame() {
    step++;
    if(step < 93) {
        var newSrc = src.slice(0, index-4) + step + ".jpg";
        console.log(newSrc);
        $logo.attr('src', newSrc);
        setTimeout(frame, 50);
    }
}

frame();
});

但這是行不通的……每個動畫時間為0,03秒，我的圖片為“ img id =” logo“ src =” images / 1000.jpg“ /”（肯定使用<>），但是無法正常工作或更改src。

有什么幫助嗎？ 謝謝

編輯：請再次幫助，因為這使我發瘋。 我嘗試了精靈的東西，但是它不起作用，因為您可以看到褪色背景的移動方式。

我真的只需要模仿該gif，那只是一個由93張圖片組成的簡單gif。 只是一張動畫，一張臉變成另一張臉...

Answer 1

/*
You are trying to set the `src` of a `div`. Set the `src` of an `img` instead:

<div>
  <img id="logo" src="mypath/mylittlepony.jpg">
</div>
*/
this doesn't apply anymore since the question was edited...

現在， 此JSFiddle至少可以在我的瀏覽器（Firefox 4.0.1）中按需運行。

編輯
加載后開始：看看這個JSFiddle
在加載和無窮循環之后開始：看一下最后的JSFiddle
額外的mm頭： 來回

您仍然有緩存問題。 僅當所有圖像都已緩存時，動畫才是流暢的。 您可以通過將其作為1-px-imgs放在頁面上來預加載它們。

<img src="http://iflorian.com/test/image/1000.jpg" height="1" width="1" alt="" />
<img src="http://iflorian.com/test/image/1001.jpg" height="1" width="1" alt="" />
<img src="http://iflorian.com/test/image/1002.jpg" height="1" width="1" alt="" />
...
<img src="http://iflorian.com/test/image/1050.jpg" height="1" width="1" alt="" />

當然，您可以通過JQuery來執行此操作，但是隨后您可以簡單地保存一個圖像對象數組，這些對象將替換計時器函數中的原始圖像。

Answer 2

只需在Web瀏覽器的錯誤控制台上檢查Javascript是否引發任何錯誤...，因為如果JS的任何部分引發異常並且無法運行，那么效果也可能會失敗。 偶爾發生在我身上。