web-dev-qa-db-fra.com

Pouvez-vous contrôler l'animation GIF avec Javascript?

Est-il possible d'utiliser javascript pour contrôler quelle image d'une image GIF affiche et/ou arrêter l'animation. Je veux pouvoir charger un GIF avec plusieurs frames et ne montrer qu'un seul d'entre eux.

Je sais que je pourrais le faire avec beaucoup d'images séparées, mais si je peux faire ce que je veux avec un GIF, ce ne sera qu'un seul fichier à s'inquiéter.

javascriptcssanimationgifanimated-gif
58
Logan

Vous pouvez le faire avec une seule image en utilisant sprites CSS .

9
N 1.1

Vous pouvez utiliser la bibliothèque libgif .

Il vous permet de démarrer/arrêter le gif et de contrôler le cadre sur lequel le gif est activé.

<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 plupart du code provient directement de leur exemple)

55
Charlotte

J'utilise x-gif c'est assez cool et facile à configurer.

De Github :

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

Où vous pouvez ajouter les éléments suivants en tant qu'attributs:

  • Modes de lecture:
    • speed="1.0" (mode par défaut) multiplie la vitesse par la valeur de l'attribut;
    • sync diffère la lecture vers un objet externe;
    • bpm="120" synchronise les GIF à un rythme donné par minute;

  • Options:

    • stopped empêche le GIF de s'animer;

    • fill provoque l'extension du GIF pour couvrir son conteneur;

    • n-times="3.0" (mode vitesse uniquement) arrête la lecture (en ajoutant l'attribut arrêté) après un nombre défini de fois;
    • snap (modes sync et bpm uniquement) au lieu de permettre aux GIF plus longs de se synchroniser sur plusieurs temps, forcez-les à tenir dans un seul;
    • ping-pong joue le GIF d'avant en arrière puis d'arrière en avant;
  • Débogage:
    • debug active la sortie de débogage de Gif Exploder;
    • exploded arrête la lecture et rend chaque image côte à côte.
21
Oscar Nevarez

Si vous êtes d'accord avec la conversion de votre gif en une feuille Sprite, vous pouvez le faire de cette façon (en utilisant ImageMagick):

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

Il est même probable que la nouvelle image soit de moindre taille.

Une fois que vous avez une feuille Sprite, utilisez l'animation CSS. Une animation avec un temps d'image fixe est utilisée ici:

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 vous souhaitez que l'animation ne démarre pas automatiquement, ajoutez paused à la fin de la règle animation.

8
user