¿Por qué no se anima un GIF en lugar de sprites de CSS animados?

Question

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

Ex:

• http://www.google.com/doodles/eadweard-j-muybridges-182nd-birthday (de hecho, Google utiliza esta técnica en otros garabatos también)
• https://everyme.com/ ('yo' logotipo)
• y muchos más ...

¿Es todo solo para mostrar o experimentar con la tecnología o hay algún beneficio 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).

Answer 1

• control

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

  Con sprites, puede 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

  Al cargar varias instancias de la misma GIF, todos estos casos utilizan la misma imagen a través de 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 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.

• Asegurar la animación suave

  GIF animados acaba de animar durante la carga, y cuando el Internet es lenta, las animaciones se congelan hasta que se carga más de la imagen.

  Por el contrario, la ventaja de los sprites es que puede 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 siguen siendo imágenes. Puede cargarlos dinámicamente desde el DOM y escuchar un evento de carga antes de agregarlos al DOM.renderizado

• parcial

  Con sprites PNG, puede hacerlo "parciales" en la animación, rompiendo una escena de animación para 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 parte del tiempo, 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.

• GIF simplemente no escalan

  GIF estaban destinados para los 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.

Answer 2

En la parte superior de la respuesta de José el Soñador ...

Por lo que yo sé, o al menos lo que solía ser que, archivos GIF no son verdaderos colores, otra razón para utilizar un JPGs/PNG como un sprite css.