sprites sencilla poner imagen hacer ejemplos efectos como codigo bootstrap animar animaciones animacion javascript animation css-sprites animated-gif

javascript - sencilla - ¿Por qué no un GIF animado en lugar de sprites animados de CSS?



como poner animacion en css (2)

En las últimas tendencias, ¿he visto gente animando sprites de CSS usando JavaScript en lugar de usar GIF animados?

Ex:

¿Es eso solo para mostrar o experimentar con la tecnología o hay algún beneficio derivado de ella? Estoy interesado en conocer los beneficios, si existen. La razón por la que estoy preguntando es que no pude deducir que en ambos casos necesitamos generar los cuadros intermedios (principalmente usando la técnica de interpolación).

Además de la respuesta de José el Soñador ...

Por lo que sé, o al menos solía ser eso, los archivos GIF NO son de color verdadero, otra razón para usar un JPG / PNG como un sprite css.

  • Controlar

    No tienes control sobre los GIF animados. No puedes iniciarlos, no puedes detenerlos. Simplemente animan tan pronto como cargan.

    Con los sprites, puedes controlar la animación. Puede iniciar, detener y reaccionar a los eventos del navegador, recorrer la animación. Por ejemplo, Google Doodles generalmente se activa cuando haces clic en ellos.

    Un ingenioso sistema de control GIF se puede encontrar en el 9gag. Puede iniciarlos agregándolos al DOM y detenerlos eliminándolos e intercambiándolos con una "vista de primer fotograma" generada previamente. Pero eso es lo que dicen los GIF.

  • Instancias independientes

    Cuando carga varias instancias del mismo GIF, todas estas instancias usan la misma imagen en la página y se mueven al mismo tiempo. Si tienes una fila de un baile de unicornios GIF, estarían bailando al mismo tiempo. ¡Baile sincronizado!

    Pero con los sprites, incluso si está utilizando las mismas imágenes, la animación se basa en el script subyacente. De modo que si un sprite está animado por un guión y otro por otro guión, ambas animaciones pueden ejecutarse de forma independiente y de forma diferente una de la otra.

    Esto le ahorra la creación de otro GIF y es fácil de modificar ya que solo está cambiando el script.

  • Garantizando una animación suave

    Los GIF animados solo se animan durante la carga, y cuando Internet es lento, las animaciones se congelan hasta que se carga más de la imagen.

    Por el contrario, la ventaja de los sprites es que puedes precargarlos, asegurar que todas las imágenes se carguen de antemano. Esto asegura que los recursos utilizados para esa animación ya estén cargados antes de la animación para asegurarse de que se anime de la mejor manera posible.

    Sin embargo, los GIF son imágenes fijas. Puede cargarlos dinámicamente desde el DOM y escuchar un evento de carga antes de agregarlos al DOM.

  • Representación parcial

    Con los sprites PNG, puede hacer "parciales" en la animación, dividiendo una escena de animación en partes. Por ejemplo, cuando un personaje se detiene, pero los brazos están ondeando. No necesita animar al personaje completo ni a toda la escena. Puede colocar un elemento que represente el sprite del cuerpo del personaje en un estado de "congelación", mientras que los brazos son un elemento diferente que está animando. Esto conserva el espacio y el tamaño de la hoja de sprites. Un buen ejemplo de esto fue el Doodle del Día de la Madre 2012 de Google.

    Por el contrario, la mayoría de las veces , cada cuadro en una animación GIF es una imagen completa, y anima si se mueve o no algo en él. Cuantos más cuadros, mayor será el tamaño del GIF.

  • Los GIF simplemente no escalan

    Los GIF estaban pensados ​​para iconos. La proporción de tamaño de archivo a tamaño de imagen no aumenta tan bien en GIF en comparación con PNG y JPG.