Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

First of all,check out this image
wink
Gmail uses this image to display the animated emoticon.
How can we show such animation using a png image?

like image 294
Rakesh Juyal Avatar asked Nov 15 '09 07:11

Rakesh Juyal


People also ask

Can PNG move like GIF?

PNG uses indexed colors and lossless compression (like a . GIF file), but without those copyright limitations; it cannot be animated like a GIF image.

How do I download an animated PNG?

After creating your animation, go to Export > Export Movie and select “PNG Sequence” from the dropdown menu. The process in Photoshop is very similar. Go to File > Export > Render Video. In the Render Video pane, select “Photoshop Image Sequence” from the dropdown and choose PNG as the format.


2 Answers

I leave you a rough example so you can get a 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(https://ssl.gstatic.com/ui/v1/icons/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: "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" }); 

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 specified animation just by calling it, for example:

monkey.stopAnimation(); 

Check the above example here.

like image 94
Christian C. Salvadó Avatar answered Sep 24 '22 13:09

Christian C. Salvadó


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

like image 28
roufamatic Avatar answered Sep 21 '22 13:09

roufamatic