Compare las opciones de animaciones en la Web

La animación es un tema fascinante. Ya sea que desee agregar animaciones de interacción como transiciones o crear una experiencia de pantalla completa, tiene todas las herramientas que necesita

La animación es un tema fascinante. Ya sea que desee agregar animaciones de interacción como transiciones o crear una experiencia de pantalla completa, tiene todas las herramientas que necesita.

Y tiene bastantes opciones, que son completamente diferentes y tienen diferentes propósitos.

CSSes comúnmente conocido por ser más eficiente, aunque JavaScript también puede ser muy eficiente. Todo depende de lo que tenga que hacer y de cuánto tiempo se tarda en renderizar cada fotograma.

Veamos una descripción general de estas opciones para descubrir cuál es la opción correcta.

Transiciones CSS

Transiciones CSStener un comienzo y un final. Mueven un punto de X a Y, o de visible a invisible.

Es la más simple de las animaciones y se usa principalmente para animaciones sutiles que se integran bien con el resto de la página.

Con las transiciones pasas de un estado a otro, pero no puedes tener mucho más.

Animaciones CSS

Animaciones CSSen comparación con las transiciones CSS, le permiten tener más de 2 estados; de hecho, puede tener muchos de ellos y se pueden usar para crear animaciones más complejas.

Se recomiendan las animaciones CSS cuando se necesitan animaciones relativamente simples que no se pueden hacer con las transiciones.

Animaciones SVG

SVGes un gran formato basado en vectores que permite crear animaciones usando SMIL, el formato "nativo" de animaciones SVG.

SMIL estaba a punto de quedar obsoleto en Chrome, pero el equipo revirtió esta decisión por el momento debido a la resistencia, aunque SMIL tiene inconsistencias entre navegadores (e IE / Edge no lo admiten).

Quieren impulsar las animaciones CSS y la API de animaciones web en lugar de SMIL.

Animaciones de la API de Canvas

losAPI de Canvasofrece una forma de pintar en la pantalla, utilizando rásteres en lugar de vectores.

Las animaciones son posibles aunque no tan eficaces

La API de animaciones web

La API de animaciones web es el futuro de las animaciones en la web. Su objetivo es llevar el rendimiento de las animaciones CSS con la capacidad de usar JavaScript para crear animaciones más largas fácilmente.

Actualmente solo funciona en Chrome y Firefox. Safari, IE y Edge todavía lo están considerando, peroexiste un polyfillpara que funcione en todos los navegadores.

WebGL

WebGL le permite crear animaciones en 3D y es más adecuado para experiencias de animación inmersiva en pantalla completa y realidad virtual, aunque es más complejo.


Además de las API nativas, existen excelentes bibliotecas que abstraen la mayoría de los detalles para usted: