È possibile controllare l'animazione GIF con Javascript?

Question

E 'possibile utilizzare javascript per controllare quale fotogramma di un'immagine GIF mostra e/o interrompere l'animazione. Voglio poter caricare uno GIF con diversi frame e mostrare solo uno di essi.

So che potrei farlo con un sacco di immagini separate, ma se posso fare quello che voglio con uno GIF, sarà solo un file di cui preoccuparsi.

Answer 1

È possibile farlo con una singola immagine utilizzando CSS sprites.

Answer 2

È possibile utilizzare la libreria libgif.

Consente di avviare/arrestare la gif e controllare su quale fotogramma è inserita la 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 maggior parte del codice è presa direttamente dal loro esempio)

Answer 3

lo uso x-gif è abbastanza fresco e facile da installare.

Da Github:

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

dove è possibile aggiungere quanto segue come attributi:

modalità

• di riproduzione:
  • speed="1.0" (modalità predefinita) moltiplica la velocità in base al valore della attributo;
  • sync riporta la riproduzione a un oggetto esterno;
  • bpm="120" sincronizza GIF a battiti al minuto;

• Opzioni:

  • stopped impedisce il GIF da animare;

  • fill causa l'espansione del GIF per coprire il contenitore;

  • n-times="3.0" (solo modalità velocità) arresta la riproduzione (aggiungendo l'attributo interrotto) dopo un determinato numero di volte;
  • snap (sincronizzazione solo & modalità bpm) anziché consentire a GIF più lunghe di sincronizzarsi con più battute, forzarle a inserirsi in una sola;
  • ping-pong riproduce la GIF fronte-retro e poi avanti-indietro;
• debug:
  • debug attiva l'uscita debug dal Gif Exploder;
  • exploded interrompe la riproduzione e rende ogni frame fuori affiancato.

Answer 4

Se siete OK con la conversione del GIF a un foglio sprite, si può fare in questo modo (usando ImageMagick):

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

E 'anche probabile che la nuova immagine sarà di dimensioni inferiori.

Una volta che hai un foglio sprite, usa l'animazione CSS. Un'animazione con un tempo di telaio fisso è qui utilizzato:

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>

Se si desidera che l'animazione non inizia automaticamente, aggiungere paused alla fine del animation regola.