How to show animated image from PNG image using javascript? [ like gmail ]

Question

First of all,check out this image

Gmail uses this image to display the animated emoticon.
How can we show such animation using a png image?

Answer 1

Take a look at this:
http://www.otanistudio.com/swt/sprite%5Fexplosions/ and http://www.alistapart.com/articles/sprites The answer lies within.

Answer 2

Set the background image of an element to the first image, then use javascript to change the image by altering the style every x milliseconds.

Answer 3

I leave you a rough example so you can get an starting point:

I will use a simple div element, with the width and height that the animated image will have, the png sprite as background-image and background-repeat set to no-repeat

CSS Needed:

#anim {
  width: 14px; height: 14px;
  background-image: url(http://mail.google.com/mail/im/emotisprites/wink2.png);
  background-repeat: no-repeat; 
}

Markup needed:

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

The trick is basically to scroll the background image sprite up, using the background-position CSS property.

We need to know the height of the animated image (to know how much we will scroll up each time) and how many times to scroll (how many frames will have the animation).

JavaScript implementation:

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: You can also set the CSS properties programmatically so you don't have to define any style on your page, and make a constructor function from the above example, that will allow you to show multiple sprite animations simultaneously:

Usage:

var wink = new SpriteAnim({
  width: 14,
  height: 14,
  frames: 42,
  sprite: "http://mail.google.com/mail/im/emotisprites/wink2.png",
  elementId : "anim1"
});

var monkey = new SpriteAnim({
  width: 18,
  height: 14,
  frames: 90,
  sprite: "http://mail.google.com/mail/im/emotisprites/monkey1.png",
  elementId : "anim4"
});

Implementation:

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);
  };
}

Notice that I added a stopAnimation method, so you can later stop a an specified animation just by calling it, for example:

monkey.stopAnimation();

Check the above example here.

Answer 4

CMS's answer is fine, but there's also the APNG (animated PNG) format that you may want to use instead. Of course the first frame (the one displayed even by browsers that don't support APNG) should be the "ending" frame and just specify to skip the first frame in the file.