Las aplicaciones web a veces están equipadas con animaciones. Algunas animaciones son desencadenadas por eventos, como por ejemplo cuando el usuario pasa el mouse sobre un botón y este progresivamente expande su tamaño, o simplemente pueden suceder sin la interacción del usuario, un ejemplo seria un cuadrado parpadeante en la pantalla. Las animaciones proporcionan efectos visuales a las aplicaciones basadas en la web para hacerlas más interactivas y visualmente atractivas. Algunas aplicaciones son más adecuadas a tener elementos animados mas que otras, como en el caso de juegos interactivos.
Actualmente existen diferentes formas de lograr estos efectos visuales en la web. En este artículo voy a analizar los enfoques de animación web utilizando JavaScript y CSS. ¿Qué método es más eficiente y bajo qué circunstancias? Cuál método es más fácil de implementar y mantener?
En el pasado, Flash era un método muy popular para crear aplicaciones animadas; sin embargo, llegada la demanda de dispositivos mobiles la utilización de Flash se volvió obsoleta. Esto se debió a que el rendimiento de la animación se convirtió en una aspecto muy importante y Flash no ofrecía las mejores capacidades. Mas adelante se introdujeron librerías de JavaScript, como es el caso de jQuery, que ofrece animaciones basadas en JavaScript. Sin embargo, tan conveniente como jQuery fue para los desarrolladores, este también quedo corto en lograr un alto rendimiento de animación [3]. Luego, la introducción de CSS3 se convirtió una mejor solución para animaciones que no implicaban instalar ninguna librería externa para nuestro proyecto, y por lo tanto era una opción prometedora para animaciones más eficientes.
Hay dos formas diferentes de utilizar CSS para crear animaciones. Estos son Propiedades de animaciones y transiciones CSS:
Transiciones CSS: muestra animaciones entre dos estados. Estos podrían ser, por ejemplo, animando un botón entre su estado de reposo y un hover. El botón podría mostrar un efecto de desvanecimiento mientras el usuario intenta seleccionar este botón. Las transiciones con CSS tienen diferentes propiedades que definen la propiedad de animación de destino, la duración de la animación, suavizado del efecto y retraso del mismo. Tanto la duración como el retraso se miden en segundos.
Animaciones CSS: asigna animaciones entre un conjunto de propiedades iniciales y finales. Esta consta de keyframes clave para la progresión de las animaciones y el estilo de la apariencia de la misma [2].
Ambos están programados de diferentes formas, pero también comparten deficiencias similares. Las animaciones utilizando CSS no permiten una gran interacción entre el programador/usuario y la animación. Por ejemplo, no hay forma de encontrar un keyframe especifico en una animacion programada solo con CSS, también una vez que la animación ha comenzado no se puede revertir o llevar a ningún punto en particular. Aparte de esto, solo algunos navegadores permiten al usuario pausar y reanudar una animación creada con CSS. Cuando se trata de valores relativos, las animaciones hechas con CSS no ofrecen gran flexibilidad tampoco, lo que significa que si el programador desea instruir a la animación un elemento para mover 50px a la derecha de donde comienzan las animaciones, no sería posible hacerlo simplemente utilizando animaciones con CSS [3].
Otra alternativa popular para animar elementos de aplicaciones web es utilizando JavaScript. Cómo mencione anteriormente, hay ciertas librerías de JavaScript que se pueden utilizar para producir animaciones de una manera simple para los desarrolladores. jQuery hizo un intento de lograr esto, pero este también se quedo corto con relación al rendimiento. Aparte de jQuery existe otra librería basada en JavaScritpt llamada GSAP (GreenSock Animation Platform) que se construyó específicamente para crear animaciones para la web, teniendo en cuenta la optimización y la eficiencia de estas tareas [3]. Sin embargo, existe un enfoque más estándar para crear animaciones JavaScript, y esto es la API de animaciones web que funciona dirigiéndose a elementos DOM [6].
JavaScript proporciona ciertas funcionalidades que no son posibles utilizando simplemente animaciones basadas en CSS como son la posibilidad de pausar, reanudar, detener, y revertir una animación. Esto proporciona al usuario la capacidad de tener cierto control sobre la animación. Esto hace que aplicación sea verdaderamente interactiva, una característica que no es posible con CSS [3]. Las animaciones desarrolladas con JavaScript también puede hacer uso de objetos, lo que hace posible integrar la Programación Orientada a Objetos a nuestras animaciones, permitiendo desarrollar diseños más complejos. Otra ventaja de JavaScript sobre las animaciones con CSS es poder animar otras objetos distintos de los elementos DOM [2].
Aparte de la interactividad y la facilidad de desarrollo, hay otro, incluso más importante aspecto al comparar dos métodos de programación. Aqui estamos hablando del rendimiento. Primero vamos a discutir qué propiedades y componentes son menos y más costosos de animar. Las propiedades más baratas para animar los navegadores son: posición, escala, rotación, y opacidad [4]. Ahora, las propiedades más caras de animar son las que cambian el diseño completo de la página junto con ellos, así como la pintura en la pantalla. Por ejemplo, si tenemos un elemento de página web con ancho y alto medidos en porcentaje junto a otros elementos, cambiar estas propiedades constantemente hará que el los elementos en el entorno tengan que recalcular sus valores tambien, lo que hace que esta sea una tarea muy costosa. Estos problemas relacionados al rendimiento se pueden atribuir a ambos tipos: animaciones basadas con JavaScript y también con CSS.
Cuando se trata de subprocesos de animaciones CSS, así como animaciones web basadas en JavaScript se ejecutan en un hilo llamado "hilo compositor". Este hilo es diferente del hilo donde el navegador hace la mayor parte del trabajo en cuanto a estilo, diseño, pintura y ejecución de JavaScript. El nombre de este hilo es "hilo principal". El hecho de que haya una hilo separado para CSS y animaciones web para ejecutar significa que se ejecutarán independientemente de la carga de trabajo que lleva el navegador de otros tareas. Esto hace que las animaciones basadas en CSS y JavaScript funcionen igualmente bien en eso sentido [2]. Otra ventaja que hace que las animaciones CSS y JavaScript se ejecuten sin problemas es la ventaja que ambos obtienen del hardware. La capa de GPU permite el aislamiento los elementos de las de animaciones que, a su vez, facilitan que la GPU mueva esas capas y las componga mas tarde. Sin embargo, para que JavaScript aproveche esta ventaja del GPU una capas que necesita para hacer uso de transformaciones 3D y matrices. La única desventaja de la estratificación de GPU sería un pequeño retraso al iniciar ambas aplicaciones debido al cálculo de la capa del navegador y la carga a la hora de la GPU [3].
En conclusión, tanto las animaciones basadas en JavaScript como en CSS funcionan relativamente y casi igualmente bien cuando JavaScript está bien optimizado. La decisión de elegir uno sobre el otro tiene más que ver con la flexibilidad y la complejidad de la animación que quiere ser lograda. Para proyectos más pequeños y simples, se recomienda utilizar animaciones CSS. Vienen con la ventaja de ser más fáciles de escribir. Para animaciones más complejas que requieren pausar, detener, reanudar y ralentizar las animaciones, JavaScript es necesario. La API de animaciones web es la herramienta de referencia para el desarrollo de animaciones JavaScript; sin embargo, hay otras librerías de animación de alto rendimiento como GSAP.
Referencias:
[1] https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript
Updated 2019
[2]https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-andperformance#
css-vs-javascript-performance Updated 2019
[3] https://css-tricks.com/myth-busting-css-animations-vs-javascript/ 2014 - Updated 2017
[4] https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
Publicar un comentario