Cómo animo una secuencia PNG utilizando jQuery (ya sea mediante desplazamiento o animación activada)

Cada vez veo más un efecto donde pngs se cargan en una serie de DIV (o un div) y luego se secuencian cuadro por cuadro ya sea basado en clic de botón o basado en desplazamiento. Intenté echarle un vistazo al código, y entiendo que javascript está haciendo un gran trabajo, pero aún estoy un poco perdido, ¿hay algún tutorial sobre esta técnica? ejemplos?Cómo animo una secuencia PNG utilizando jQuery (ya sea mediante desplazamiento o animación activada)

ejemplo de la animación (div múltiple) http://atanaiplus.cz/index_en.html:

ejemplo de la animación (un div): http://www.hyundai-veloster.eu/

ejemplo de la animación de desplazamiento: http://discover.store.sony.com/tablet/#design/ergonomics

Fuente

2012-03-12 user379468

lo que desea intercambiar el atributo de src utilizando un temporizador de intervalo de intervalo

var myAnim = setInterval(function(){ 
    $(".myImageHolder").attr('src', nextImage); 
}, 42);

El truco es cómo generar nextImage. Esto depende en gran medida de las convenciones de nomenclatura de las imágenes, o la dirección que desea que la animación se ejecute en

actualización

O utilizar un plugin

Fuente

2012-03-12 15:31:10

Sí, la cosa de spritely es que la secuencia de imágenes es en realidad una imagen grande, que se mueve para organizar una animación. Realmente no creo que funcione para una secuencia de imágenes más grande y más compleja. – user379468

Sí, el tamaño del archivo sería GRANDE. –

Bueno, probablemente más pequeño de forma acumulativa que todas las imágenes individuales –

Tal vez en lugar de cambiar entre diferentes imágenes, utilice el técnica de sprint descrita en esta pregunta: How to show animated image from PNG image using javascript? [ like gmail ]

Fuente

2012-03-12 15:36:15 Zugbo

Todavía no tengo el representante para comentar otras respuestas, pero en respuesta al problema del tamaño del archivo: si tiene que cargar todas las imágenes de todos modos, está Ya me he comprometido a enviar esa información, agrupando las imágenes en un sprite que al menos se guarda en la sobrecarga de HTTP. También obtiene la ventaja de poder iniciar la animación tan pronto como se carga la imagen, sin tener que verificar todas las imágenes por separado. – Zugbo

Eso puede ser cierto, pero creo que hay otra razón por la cual no es óptimo. Moverse por una imagen que es de 10,000 por 10,000 es mucho más costoso de renderizar que alternar la visibilidad o cambiar el nombre de una imagen en el div ... – user379468

Tiene que ponderar el tamaño del archivo con el número de solicitudes HTTP. Si sus imágenes no tienen que ser totalmente transparentes, podría pasarlas a un archivo JPEG grande ... pero si necesitan ser PNG-24, sería bastante extraño combinarlas todas juntas. Las solicitudes HTTP pueden valer más la pena. –

Cómo animo una secuencia PNG utilizando jQuery (ya sea mediante desplazamiento o animación activada)

Respuesta

Cuestiones relacionadas