Как использовать JS для запуска анимации GIF? - PullRequest
Новая
       6

Как использовать JS для запуска анимации GIF?

6 голосов
/ 21 октября 2010

У меня есть анимированный GIF, который воспроизводится один раз (не зацикливается).Я хотел бы, чтобы он оживлял при нажатии.Я попробовал что-то вроде этого: 

 $('#plus').click(function(){
    $('#plus').attr('src','');
    $('#plus').attr('src','img/plus.gif')
 });

С надеждой, что быстрый сброс src вызовет анимацию, но не повезло.Кто-нибудь знает, что бы это сделать?

Ответы [ 6 ]

8 голосов
/ 21 октября 2010

Попробуйте добавить изображение со случайно сгенерированной строкой запроса, чтобы оно выглядело как новое изображение в браузере. 

<script language="javascript" type="text/javascript">
function randomString() {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = 8;
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    document.randform.randomfield.value = randomstring;
}
$('#plus').click(function(){
    $('#plus').attr('src','img/plus.gif?x=' + randomString())
    });
</script>
2 голосов
/ 21 октября 2010 
function refreshSrc(who){
    return who.src= who.src.split('?')[0]+'?='+(+new Date());
}
refreshSrc(document.images[0])

Если хотите, включите синтаксис jQuery.

1 голос
/ 21 октября 2010

Это немного альтернативный подход.

Вы можете экспортировать отдельные кадры как свои собственные изображения и обрабатывать анимацию через javascript.

Это позволяет вам сделать пару крутых вещей.Недавно у коллеги была небольшая анимация таймера, которая была синхронизирована с настраиваемым интервалом слайд-шоу в нашей галерее изображений.

Еще одна вещь, которую вы получаете из этого, - вы можете использовать pngs и иметь полупрозрачный фон.

Возможно, где-то есть библиотека спрайт-анимации для javascript:)

0 голосов
/ 06 августа 2014

Для тех, кто хочет сделать это, когда он прокручивается, я сделал следующее:

Ссылка для emerge.js: https://github.com/morr/jquery.appear

$('img.large-magnify-glass-animation').appear(function() {
    $(this).delay(200, function(){
        $(this).attr('src','http://example.com/path/to/gif.gif');
    });
});

Я только что загрузил тот же GIFчерез attr ('src') после небольшой задержки.Нет отметки времени или функции произвольного символа.Только что использовался внешний плагин.

0 голосов
/ 21 октября 2010

Вы можете попробовать иметь однокадровое изображение (первого кадра анимации) и показывать / скрывать каждое из них по клику. Если вы хотите, чтобы после сброса анимации оно вернулось к однокадровому изображению, вы можете использовать setTimeout (с продолжительностью анимации как продолжительностью времени) и скрыть анимацию и показать статическое изображение.

0 голосов
/ 21 октября 2010

Вы пытались удалить тег img и снова добавить его? (никогда не пробовал, просто идея)

...