Анимация замены изображения jQuery (имитировать анимированный GIF) - PullRequest
Новая
       9

Анимация замены изображения jQuery (имитировать анимированный GIF)

1 голос
/ 18 февраля 2011

У меня есть последовательность JPGS в виде: 

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

Мысли? Помощь

Спасибо

Ответы [ 3 ]

5 голосов
/ 18 февраля 2011

Только что все заработало с помощью 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, которая может быть более подходящей для определенных случаев использования.*

0 голосов
/ 18 февраля 2011

Вот способ, а не "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 ().

0 голосов
/ 18 февраля 2011

Прежде всего вам необходимо предварительно загрузить все изображения. Второе - делать анимацию с последовательностью jpgs - плохая идея:)

...