web-dev-qa-db-fra.com

Comment afficher une image animée à partir d'une image PNG en utilisant javascript? [comme gmail]

Tout d'abord, regardez cette image
wink
Gmail utilise cette image pour afficher l’émoticône animée.
Comment pouvons-nous montrer une telle animation en utilisant une image png?

javascriptimageanimationpng
27
Rakesh Juyal

Je vous laisse un dur exemple pour que vous puissiez obtenir un point de départ:

Je vais utiliser un élément div simple, avec les width et height que l'image animée aura, le png Sprite en tant que background-image et background-repeat défini sur no-repeat

CSS nécessaire:

#anim {
  width: 14px; height: 14px;
  background-image: url(https://ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/wink2.png);
  background-repeat: no-repeat; 
}

Balisage nécessaire:

<div id="anim"></div>

L'astuce consiste essentiellement à faire défiler l'image d'arrière-plan vers le haut, en utilisant la propriété CSS background-position.

Nous avons besoin de connaître la height de l'image animée (pour savoir combien de fois nous allons défiler vers le haut) et combien de fois faire défiler (combien de images auront l'animation).

Implémentation de JavaScript:

var scrollUp = (function () {
  var timerId; // stored timer in case you want to use clearInterval later

  return function (height, times, element) {
    var i = 0; // a simple counter
    timerId = setInterval(function () {
      if (i > times) // if the last frame is reached, set counter to zero
        i = 0;
      element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
      i++;
    }, 100); // every 100 milliseconds
  };
})();

// start animation:
scrollUp(14, 42, document.getElementById('anim'))

EDIT: Vous pouvez également définir les propriétés CSS par programme afin de ne définir aucun style sur votre page et créer une fonction constructeur à partir de l'exemple ci-dessus, qui vous permettra d'afficher plusieurs animations Sprite simultanément:

Utilisation:

var wink = new SpriteAnim({
  width: 14,
  height: 14,
  frames: 42,
  Sprite: "https://ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/wink2.png",
  elementId : "anim1"
});

var monkey = new SpriteAnim({
  width: 18,
  height: 14,
  frames: 90,
  Sprite: "https://ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/monkey1.png",
  elementId : "anim4"
});

La mise en oeuvre:

function SpriteAnim (options) {
  var timerId, i = 0,
      element = document.getElementById(options.elementId);

  element.style.width = options.width + "px";
  element.style.height = options.height + "px";
  element.style.backgroundRepeat = "no-repeat";
  element.style.backgroundImage = "url(" + options.Sprite + ")";

  timerId = setInterval(function () {
    if (i >= options.frames) {
      i = 0;
    }
    element.style.backgroundPosition = "0px -" + i * options.height + "px";
     i++;
  }, 100);

  this.stopAnimation = function () {
    clearInterval(timerId);
  };
}

Notez que j’ai ajouté une méthode stopAnimation. Vous pourrez ainsi arrêter ultérieurement une animation spécifiée simplement en l’appelant, par exemple:

monkey.stopAnimation();

Vérifiez l'exemple ci-dessus ici .

69
CMS

La réponse de CMS est correcte, mais il existe également le format APNG (fichier PNG animé) que vous souhaiterez peut-être utiliser à la place. Bien sûr, la première image (celle affichée même par les navigateurs qui ne prennent pas en charge APNG) devrait être l’image "de fin" et spécifier simplement de sauter la première image du fichier.

3
Eli Grey

Regarde ça:
http://www.otanistudio.com/swt/Sprite_explosions/ et http://www.alistapart.com/articles/sprites La réponse est intérieure.

3
roufamatic

Vous pouvez le faire avec TweenMax et steppedEase easing: http://codepen.io/burnandbass/pen/FfeAa ou http://codepen.io/burnandbass/pen/qAhpj comme vous le souhaitez :) 

1
Христо Панайотов

Définissez l'image d'arrière-plan d'un élément sur la première image, puis utilisez javascript pour modifier l'image en modifiant le style toutes les x millisecondes.

1
klaaspieter

CSS @keyframes peut être utilisé dans ce cas

@keyframes smile {
    0% { background-postiion: 0 -16px;}
    5% { background-postiion: 0 -32px;}
    10% { background-postiion: 0 -48px;}
    /*...etc*/
}
0
Undefitied