¿Puedes controlar la animación GIF con Javascript?

css animation

Question

¿Es posible usar javascript para controlar qué fotograma de una imagen GIF se muestra y / o detener la animación? Quiero poder cargar un GIF con varios marcos y solo mostrar uno de ellos.

Sé que podría hacerlo con muchas imágenes separadas, pero si puedo hacer lo que quiero con un GIF , solo será un archivo del que preocuparse.

Answer 1

Puede usar la biblioteca libgif .

Te permite iniciar / detener el gif y controlar en qué marco está el 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>

(la mayoría del código se toma directamente de su ejemplo)

Answer 2

Puedes hacerlo con una sola imagen usando sprites de CSS .

Answer 3

Si está bien con la conversión de su gif a una hoja de sprite, puede hacerlo de esta manera (utilizando ImageMagick):

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

Incluso es probable que la nueva imagen sea de menor tamaño.

Una vez que tenga una hoja de sprite, use animación CSS. Aquí se usa una animación con un tiempo de fotograma fijo:

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>

Si desea que la animación no se inicie automáticamente, agregue paused al final de la regla de animation .

Answer 4

Yo uso x-gif , es genial y fácil de configurar.

De x-gif :

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

Donde puede agregar los siguientes atributos:

• Modos de reproducción:
  • speed="1.0" (modo predeterminado) multiplica la velocidad por el valor del atributo;
  • sync retrasa la reproducción a un objeto externo;
  • bpm="120" sincroniza GIF con un latido dado por minuto;

• Opciones:

  • stopped impide que el GIF se anima;

  • fill hace que el GIF se expanda para cubrir su contenedor;

  • n-times="3.0" (modo de velocidad solamente) detiene la reproducción (al agregar el atributo detenido) después de un número determinado de veces;
  • snap (solo modos sync y bpm) en lugar de permitir que los GIF más largos se sincronicen con múltiples beats, forzándolos a encajar en solo uno;
  • ping-pong reproduce el GIF de adelante hacia atrás y luego de atrás hacia adelante;
• Depuración:
  • debug activa salida de depuración desde Gif Exploder;
  • exploded detiene la reproducción y renderiza cada fotograma lado a lado.