jQuery的圖像替換動畫（模擬動畫GIF）

我有JPG文件的形式的序列：jQuery的圖像替換動畫（模擬動畫GIF）

Logo_1001.jpg 
Logo_1002.jpg 
Logo_1003.jpg 
Logo_1004.jpg 
Logo_1005.jpg 
... 
all the way to 
Logo_1208.jpg

我試圖改變圖像的源極每一個第二（粗略地），以模仿一個動畫GIF ，使用這些JPG。這個動畫在他們點擊圖片時開始。

下面是即時通訊工作到目前爲止，雖然我確信它可以編碼更好。

而且，它不是真正的工作這麼好，現在，X

function StartAnimation() { 
    var name = $('#logo').attr('src'); 
    var index = name.indexOf(".jpg"); 

    var int = name.slice(index-4,index); 

    while(int<1208){ 
     int++; 

     var newname=name.slice(0,index-4); 
     newname=newname+int; 
     name=newname+".jpg"; 

     $('#logo').attr('src',name).delay(500); 
    } 
} 

$("#logo").click(function() { 
    StartAnimation() 
});

的思考？援助？

謝謝

來源

2011-02-18 asdf

這種用法背後的推理是什麼？ – Jakub 2011-02-18 17:28:00

在iPhone上使用實際的動畫GIF效果不佳。非常波濤洶涌，GIF質量看起來很差。我想看看如果我用JPG和jQuery進行動畫製作，情況會如何呈現。考慮一下這個實驗。如果我能在標準瀏覽器中順利運行，我將在iPhone上進行測試。 – asdf 2011-02-18 17:35:02

剛剛使用setTimeout工作。

$("#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 < 1050) { 
      var newSrc = src.slice(0, index-4) + step + ".jpg"; 
      console.log(newSrc); 
      $logo.attr('src', newSrc); 
      setTimeout(frame, 1000); 
     } 
    } 

    frame(); 
});

http://jsfiddle.net/DgZ4M/

與你的腳本的問題是在使用.delay。只有鏈接jQuery UI動畫時纔有用，而不是任意延遲。 jQuery文檔清楚地說明了

.delay（）方法最適合延遲排隊的jQuery效果。因爲它是有限的 - 例如，它不提供取消延遲的方法.delay（）不是JavaScript本地setTimeout函數的替代品，這對於某些用例可能更合適。

來源

2011-02-18 17:49:57 Dogbert

-1

首先，你需要預載所有的圖像。第二 - 用jpgs序列做動畫是個壞主意:)

來源

2011-02-18 17:39:43 Ivan

我知道這可能是一個壞主意。我仍然想嘗試確認動畫質量。 – asdf 2011-02-18 17:42:46

這是一種方法，而不是「jQuery」本身。

var _animation_timer; 
function LogoAnimate (go, num) { 
    if (parseInt(num) == 'NaN' || parseInt(num) == undefined || 
     (_animation_timer == null && go != 'go') || go == 'stop') 
    { 
     clearTimeout(_animation_timer); 
     return; 
    } 
    if (num >= 1208 || num < 1001) { 
     num = 1001; 
    } 
    //$('#logo').attr('src','Logo_'+num+'.jpg'); 
    $('#logo').text('Logo_'+num+'.jpg'); 
    num++; 
    _animation_timer = setTimeout('LogoAnimate("go","'+num+'")',1000); 
} 

$(document).ready(function(){ 
    var _images_preloaded = []; 
    for (i = 1001; i <= 1208; i++) { 
     _images_preloaded[i] = new Image(); 
     _images_preloaded[i].src = 'Logo_'+i+'.jpg'; 
    } 
});

示範標記：

<div id="logo">Not started.</div> 
<p> 
<a href="javascript:LogoAnimate('go','1001');">Start</a> - 
<a href="javascript:LogoAnimate('stop');">Stop</a> 
</p>

注意，因爲我沒有做很多圖片，我的測試只涉及更改文本。您只需要刪除引用的行並使用$ .text（）刪除下面的行。不是我也假設你可以找出$ .click（）部分。

來源

2011-02-18 18:04:23

jQuery的圖像替換動畫（模擬動畫GIF）

回答

相關問題