jQuery图像替换动画(模拟动画gif)

Question

我有一个JPGS序列，格式如下：

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

我正在尝试使用这些JPG每秒(粗略地)更改图像的来源，以模仿动画gif。当他们单击图像时，此动画开始。

这是我到目前为止所做的工作，尽管我确信它可以被更好地编码。

而且，它现在运行得并不是很好；

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()
});

有什么想法？援助？

谢谢

Answer 1

这是通过使用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文档清楚地说明了

对于队列jQuery效果之间的延迟，.delay()方法是最好的。因为它是有限的--例如，它没有提供一种取消延迟的方法--.Delay()不是JavaScript的原生setTimeout函数的替代品，后者可能更适合某些用例。

Answer 2

这是一种方法，而不是"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()部分。

Answer 3

首先，你需要预先加载所有的图片。其次，使用jpgs序列制作动画不是一个好主意:)