¿Puedes controlar la animación GIF con Javascript?

Question

¿Es posible usar javascript para controlar qué marco de una imagen GIF está mostrando 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 hacerlo con una sola imagen usando CSS sprites.

Answer 2

Puede usar la biblioteca libgif.

Le 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 parte del código se toma directamente de su ejemplo)

Answer 3

utilizo x-gif que es muy bueno y fácil de configurar.

De Github:

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

donde se puede añadir lo siguiente como atributos:

modos

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

• Opciones:

  • stopped impide que el GIF de la animación;

  • 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 (sincronizar & modos bpm solamente) en lugar de permitir que los archivos GIF más largos se sincronicen con múltiples tiempos, forzarlos a encajar en uno solo;
  • ping-pong reproduce el GIF de adelante hacia atrás y luego hacia atrás;
• Depuración:
  • debug enciende resultado de la depuración del GIF detonador;
  • exploded detiene la reproducción y muestra cada fotograma lado a lado.

Answer 4

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

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

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

Una vez que tenga una hoja de sprite, use animación CSS. Una animación con un tiempo de marco fijo se utiliza aquí:

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 se inicia automáticamente, añadir paused hasta el final de animation regla.