Cómo mostrar una imagen animada de una imagen PNG usando javascript? [como gmail]

Question

Antes que nada, mira esta imagen

Gmail usa esta imagen para mostrar el emoticón animado.
¿Cómo podemos mostrar dicha animación usando una imagen png?

Answer 1

os dejo una áspera example para que pueda obtener un punto de partida:

voy a usar un simple elemento div, con el width y height que la imagen animada tendrá, el sprite png como background-image y background-repeat conjunto a no-repeat

CSS necesario:

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

de marcado necesaria:

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

El truco es básicamente para desplazarse por la imagen de fondo de sprites arriba, usando la propiedad CSS background-position.

Necesitamos saber la height de la imagen animada (para saber cuánto vamos a desplazarse hacia arriba cada vez) y cuántas veces para desplazarse (cuántos marcos tendrá la animación). aplicación

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: También puede establecer las propiedades CSS mediante programación por lo que no tiene que definir cualquier estilo en su página, y hacer una constructor function en el ejemplo anterior , que le permitirá mostrar varias animaciones de sprites de forma simultánea:

Uso:

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

Implementación:

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

Tenga en cuenta que he añadido un método stopAnimation, por lo que más tarde puede detener una animación especificada con sólo llamar, por ejemplo:

monkey.stopAnimation(); 

Compruebe el ejemplo anterior here.

Answer 2

Tome un vistazo a esto:
http://www.otanistudio.com/swt/sprite_explosions/ y http://www.alistapart.com/articles/sprites La respuesta se encuentra dentro.

Answer 3

Establezca la imagen de fondo de un elemento en la primera imagen, luego use javascript para cambiar la imagen alterando el estilo cada x milisegundos.

Answer 4

La respuesta de CMS está bien, pero también está el formato APNG (PNG animado) que puede utilizar en su lugar.Por supuesto, el primer fotograma (el que se muestra incluso en navegadores que no admiten APNG) debe ser el fotograma "final" y solo especificar para omitir el primer fotograma en el archivo.

Answer 5

Puede hacerlo con TweenMax y steppedEase aliviando: http://codepen.io/burnandbass/pen/FfeAa o http://codepen.io/burnandbass/pen/qAhpj lo que usted elige :)

Answer 6

@keyframes CSS se puede utilizar en este caso

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