Можете ли вы управлять анимацией GIF с помощью Javascript?

Можно ли использовать javascript для управления тем, какой кадр изображения GIF показывает и/или останавливает анимацию. Я хочу иметь возможность загружать GIF с несколькими кадрами и показывать только один из них.

Я знаю, что могу сделать это с большим количеством отдельных изображений, но если я могу сделать то, что хочу, с GIF, это будет только один файл, о котором нужно беспокоиться.

+47
05 мар. '10 в 7:34
источник поделиться
4 ответа

Вы можете сделать это с помощью одного изображения, используя CSS спрайты.

+9
05 мар. '10 в 7:41
источник

Связанные вопросы


Похожие вопросы

Вы можете использовать библиотеку libgif.

Это позволяет вам запускать/останавливать gif и управлять кадром, в котором находится gif.

<script type="text/javascript" src="./libgif.js"></script>
<img src="./example1_preview.gif" rel:animated_src="./example1.gif"
 width="360" height="360" rel:auto_play="1" rel:rubbable="1" />

<script type="text/javascript">
    $$('img').each(function (img_tag) {
        if (/.*\.gif/.test(img_tag.src)) {
            var rub = new SuperGif({ gif: img_tag } );
            rub.load(function(){
                console.log('oh hey, now the gif is loaded');
            });
        }
    });
</script>

(большая часть кода берется непосредственно из их примера)

+45
15 мая '13 в 18:11
источник

Я использую x-gif, это довольно круто и легко настроить.

Из Github:

<x-gif src="probably_cats.gif"></x-gif>

Если вы можете добавить следующие атрибуты:

  • Режимы воспроизведения:
    • speed="1.0" (режим по умолчанию) умножает скорость на значение атрибута;
    • sync отменяет воспроизведение на внешний объект;
    • bpm="120" синхронизирует GIF с заданным битом в минуту;
  • Параметры:

    • stopped предотвращает анимацию GIF;

    • fill заставляет GIF расширяться, чтобы закрыть его контейнер;

    • n-times="3.0" (только режим скорости) останавливает воспроизведение (добавив атрибут остановлен) через определенное количество раз;
    • snap (только для режимов синхронизации и bpm) вместо того, чтобы позволить более длинным GIF файлам синхронизироваться с несколькими битами, заставлять их вписываться только в один,
    • ping-pong воспроизводит GIF спереди-назад, а затем обратно-вперед;
  • Debugging:
    • debug включает отладочный вывод из Gif Exploder;
    • exploded останавливает воспроизведение и отображает каждый фрейм бок о бок.
+18
03 дек. '14 в 15:02
источник

Если вы в порядке с преобразованием gif в лист спрайта, вы можете сделать это таким образом (используя ImageMagick):

montage animation.gif -coalesce -tile x1 -geometry +0+0 -background None -quality 100 spritesheet.png

Вероятно, новое изображение будет иметь меньший размер.

Как только у вас есть спрайт-лист, используйте анимацию CSS. Здесь используется анимация с фиксированным временем кадра:

var el = document.getElementById('anim');
function play() {
  el.style.animationPlayState = 'running';
}
function pause() {
  el.style.animationPlayState = 'paused';
}
function reset() {
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow to apply the change immediately */
  el.style.animation = null;
}
function stop() {
  reset();
  pause();
}
#anim {
  background-image: url('https://i.stack.imgur.com/J5drY.png');
  width: 250px;
  height: 188px;
  animation: anim 1.0s steps(10) infinite;
}
@keyframes anim {
  100% { background-position: -2500px; }
}
<div id="anim" title="Animated Bat by Calciumtrice"></div>
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
<button onclick="reset()">Reset</button>
<button onclick="stop()">Stop</button>

Если вы хотите, чтобы анимация не запускалась автоматически, добавьте paused в конец правила animation.

+6
11 июл. '17 в 16:46
источник

Посмотрите другие вопросы по меткам или Задайте вопрос