Cómo ser muy bueno en las animaciones de JavaScript

Answer 1

Si no tiene conocimiento de cómo hacer animaciones, la forma más fácil de comenzar sería utilizar algún tipo de biblioteca de animación. La API de jQuery es realmente fácil de entender y podría ser un buen lugar para comenzar para un principiante. También es de código abierto, así que puede echar un vistazo al código fuente para intentar comprenderlo. Creo que el estándar de oro para las bibliotecas de animaciones JS de rendimiento es Greensock, y dominar esa biblioteca lo ayudará a recorrer un largo camino.

Sin embargo, mencionaste que quieres ser “muy bueno”. Si no está satisfecho con su biblioteca (quizás quiera crear la suya algún día), necesitará comprender que una gran parte de la dificultad está relacionada con el rendimiento (tenga en cuenta también que entre las dos bibliotecas anteriores, Greensock supera ampliamente a jQuery animaciones en términos de velocidad).

La manipulación del DOM es increíblemente lenta por defecto. Necesitará saber qué tipos de operaciones hacen que el navegador tenga que volver a dibujar partes de la página (operación extremadamente costosa conocida como reflujos: qué fuerza el diseño / reflujo. La lista completa), qué operaciones son baratas de animar y cómo cómo programar sus operaciones para tener la menor cantidad de interrupciones en el rendimiento de la página. Querrá aprender cómo usar la herramienta de línea de tiempo para comprender qué están haciendo sus animaciones para el rendimiento. Necesitará tener una buena comprensión de las matemáticas para poder reconstruir diferentes funciones de aceleración. No es una tarea fácil con seguridad, pero espero que sepa un poco más sobre lo que está involucrado ahora y pueda descubrir cómo llegar allí.

Answer 2

¡La respuesta natural es practicar!

Si eres totalmente nuevo, debes decidir si vas a realizar animaciones DOM o si quieres participar y hacer animaciones HTML5 Canvas.

Si decide hacer animaciones DOM (ocultar / mostrar divs, abrir menús), le recomiendo que también vea animaciones CSS.

Su navegador puede hacer muchas animaciones DOM mejor con Javascript simplemente agregando y eliminando clases de objetos.

O puede tomar un objeto en el DOM (como un enlace ) y cambiar su estilo mediante programación con JS. Como establecer un tiempo de espera que incremente su opacidad de 0 -> 1.

Alternativamente, puede animar en un elemento Canvas. Sin embargo, dibujar en un lienzo es de muy bajo nivel, limitado a dibujar formas, imágenes y texto en un mapa de bits. Estas formas se pueden borrar y volver a dibujar para animar una escena.

Recomendaría usar un marco para comenzar, y luego trabajar sin él si realmente lo necesita.

He usado Fabric.js antes para este propósito, pero sin duda hay docenas de otros.

Answer 3

Entonces animaciones. Básicamente, si quieres hacer animaciones hay tres formas:
Uso de animaciones CSS: esto no requiere JavaScript en absoluto (aunque puede controlar la animación con JS). Usando la propiedad “transición” y otros, podrá hacer cosas como que el botón se agrande al pasar el mouse, abrir el menú, etc.

Todo eso es bueno si quieres hacer un sitio web ficticio, pero si quieres hacer un juego o un anuncio con animaciones reales, verás que puede volverse bastante complejo solo con animaciones CSS, sin mencionar que no son tan efectivas como a uno le gustaría que creyeras.

La segunda posibilidad es usar JavaScript nativo con bucles como
setTimeout
setInterval
requestAnimationFrame
y modifique el tamaño de posición del elemento sobre la marcha. Descubrirá que es mucho peor en términos de rendimiento, principalmente porque es realmente pesado hacer modificaciones en el DOM, por lo que hacerlas en cada cuadro no es el trabajo para un principiante de JavaScript.

La tercera posibilidad, y lo habrás adivinado, la mejor, es usar una biblioteca para hacer tus animaciones. Esta suele ser una situación en la que una biblioteca no es solo un azúcar sintáctico, sino una herramienta real que va a utilizar. Entonces podría usar jQuery, pero, francamente, no es muy eficiente ni lo suficientemente potente. La única buena biblioteca que recomiendo para animaciones es GreenSock GSAP. Es el mejor en términos de actuaciones y le permite crear animaciones muy complejas. Consulte su sitio web GSAP para obtener más información y ejemplos.

Answer 4

Eventos como el tiempo de espera, la adición de altura y anchura a través de Js, la posición de enlace de un elemento en una página y la reproducción de los elementos.
Sería más fácil si usa la animación jquery, luego puede usar animaciones integradas como fundido de entrada, fundido de salida, desplazamiento hacia la izquierda, desplazamiento hacia la derecha, etc.
Pero preferiría que cree animatinas usando CSS en lugar de Js para un mejor rendimiento.

Buena suerte.