Genialidad de JavaScript: o cómo animar sin jQuery

1. ¿Por qué JavaScript?
2. Velocidad y GSAP
3. Trabajar sin jQuery
4. Genialidad de JavaScript: flujo de trabajo
5. Genialidad de JavaScript: Física
6. Genialidad de JavaScript: desplazamiento
7. Genialidad de JavaScript: inversa
8. Control de transformación
9. Terminando
   1. Nota final
   2. Otras lecturas

La animación basada en JavaScript suele ser tan rápida como la animación basada en CSS y, a veces, incluso más rápida. La animación CSS sólo parece tener ventaja porque normalmente se compara con la de jQuery $.animate(), que es, de hecho, muy lenta. Sin embargo, las bibliotecas de animación JavaScript que omiten jQuery ofrecen un rendimiento increíble al evitar la manipulación DOM tanto como sea posible. En este artículo, Julian Shapiro derribará algunos mitos, profundizará en algunos ejemplos de animación del mundo real y mejorará sus habilidades de diseño en el proceso. Si te encanta diseñar animaciones UI prácticas para tus proyectos, ¡este artículo es para ti!

Existe una falsa creencia en la comunidad de desarrollo web de que la animación CSS es la única forma eficaz de animar en la web. Este mito ha obligado a muchos desarrolladores a abandonar por completo la animación basada en JavaScript , con lo que (1) se han obligado a gestionar interacciones complejas de la interfaz de usuario dentro de hojas de estilo, (2) se han excluido de la compatibilidad con Internet Explorer 8 y 9, y (3) han renunciado a la hermosa física de diseño de movimiento que solo es posible con JavaScript.

Verificación de la realidad: la animación basada en JavaScript suele ser tan rápida como la animación basada en CSS, a veces incluso más rápida. La animación CSS sólo parece tener ventaja porque normalmente se compara con la de jQuery $.animate(), que es, de hecho, muy lenta. Sin embargo, las bibliotecas de animación JavaScript que omiten jQuery ofrecen un rendimiento increíble al evitar la manipulación DOM tanto como sea posible. Estas bibliotecas pueden ser hasta 20 veces más rápidas que jQuery.

Entonces, rompamos algunos mitos , profundicemos en algunos ejemplos de animación del mundo real y mejoremos nuestras habilidades de diseño en el proceso. Si te encanta diseñar animaciones de UI prácticas para tus proyectos, este artículo es para ti.

¿Por qué JavaScript?

Las animaciones CSS son útiles cuando necesitas incluir transiciones de propiedades en tus hojas de estilo. Además, ofrecen un rendimiento fantástico desde el primer momento, sin tener que agregar bibliotecas a la página. Sin embargo, cuando se utilizan transiciones CSS para potenciar un diseño de movimiento rico (del tipo que se ve en las últimas versiones de iOS y Android), se vuelven demasiado difíciles de administrar o sus funciones simplemente se quedan cortas.

En última instancia, las animaciones CSS te limitan a lo que proporciona la especificación. En JavaScript, por la naturaleza misma de cualquier lenguaje de programación, tienes una cantidad infinita de control lógico. Los motores de animación JavaScript aprovechan este hecho para proporcionar funciones novedosas que le permiten realizar algunos trucos muy útiles:

• compatibilidad con SVG entre navegadores ,
• animaciones de carga basadas en la física ,
• control de línea de tiempo ,
• Traducciones de Bézier .

Nota : Si está interesado en aprender más sobre el rendimiento, puede leer “ Animación CSS vs. JS: ¿cuál es más rápida” de Julian Shapiro? " y " Rompiendo mitos: animaciones CSS frente a JavaScript " de Jack Doyle . Para demostraciones de rendimiento, consulte el panel de rendimiento en la documentación de Velocity y la demostración " Comparación de velocidad de biblioteca " de GSAP .

Velocidad y GSAP

Las dos bibliotecas de animación JavaScript más populares son Velocity.js y GSAP . Ambos funcionan con y sin jQuery. Cuando estas bibliotecas se utilizan junto con jQuery, no hay degradación del rendimiento porque omiten por completo la pila de animación de jQuery.

Si jQuery está presente en su página, puede usar Velocity y GSAP tal como lo haría con jQuery $.animate(). Por ejemplo, $element.animate({ opacity: 0.5 });simplemente se convierte en $element.velocity({ opacity: 0.5 }).

Estas dos bibliotecas también funcionan cuando jQuery no está presente en la página. Esto significa que en lugar de encadenar una llamada de animación a un objeto de elemento jQuery, como se acaba de mostrar, pasaría los elementos de destino a la llamada de animación:

/* Working without jQuery */Velocity(element, { opacity: 0.5 }, 1000); // VelocityTweenMax.to(element, 1, { opacity: 0.5 }); // GSAP

Como se muestra, Velocity conserva la misma sintaxis que jQuery $.animate(), incluso cuando se usa sin jQuery; simplemente mueva todos los argumentos una posición hacia la derecha para dejar espacio para pasar los elementos de destino en la primera posición.

GSAP, por el contrario, utiliza un diseño API orientado a objetos, así como métodos estáticos convenientes. Entonces, puedes obtener control total sobre las animaciones.

En ambos casos, ya no estás animando un objeto de elemento jQuery, sino un nodo DOM sin formato. Como recordatorio, puede acceder a los nodos DOM sin formato mediante el uso de document.getElementByID, document.getElementsByTagNameo (que funciona de manera similar al motor de selección document.getElementsByClassNamede document.querySelectorAlljQuery). Trabajaremos brevemente con estas funciones en la siguiente sección.

Trabajar sin jQuery

(Nota: si necesita una introducción básica sobre cómo trabajar con jQuery $.animate(), consulte los primeros paneles de la documentación de Velocity ) .

Exploremos querySelectorAllmás a fondo porque probablemente será su arma preferida al seleccionar elementos sin jQuery:

document.querySelectorAll("body"); // Get the body elementdocument.querySelectorAll(".squares"); // Get all elements with the "square" classdocument.querySelectorAll("div"); // Get all divsdocument.querySelectorAll("#main"); // Get the element with an id of "main"document.querySelectorAll("#main div"); // Get the divs contained by "main"

Como se muestra, simplemente pasa querySelectorAllun selector CSS (los mismos selectores que usaría en sus hojas de estilo) y devolverá todos los elementos coincidentes en una matriz. Por lo tanto, puedes hacer esto:

/* Get all div elements. */var divs = document.querySelectorAll("div");/* Animate all divs at once. */Velocity(divs, { opacity: 0.5 }, 1000); // VelocityTweenMax.to(divs, 1, { opacity: 0.5 }); // GSAP

Debido a que ya no adjuntamos animaciones a objetos de elementos jQuery, es posible que se pregunte cómo podemos encadenar animaciones una detrás de otra, como esta:

$element // jQuery element object .velocity({ opacity: 0.5 }, 1000) .velocity({ opacity: 1 }, 1000);

En Velocity, simplemente llamas animaciones una tras otra:

/* These animations automatically chain onto one another. */Velocity(element, { opacity: 0.5 }, 1000);Velocity(element, { opacity: 1 }, 1000);

Animar de esta manera no tiene ningún inconveniente de rendimiento (siempre que almacene en caché el elemento que se está animando en una variable, en lugar de realizar querySelectorAllbúsquedas repetidas para el mismo elemento). Pintura para suelos

(Consejo: con el paquete UI de Velocity, puede crear sus propias animaciones de llamadas múltiples y darles nombres personalizados a los que luego puede hacer referencia como primer argumento de Velocity. Consulte la documentación del paquete UI de Velocity para obtener más información).

Este proceso de una llamada de Velocity a la vez tiene un gran beneficio: si usa promesas con sus animaciones de Velocity, cada llamada de Velocity devolverá un objeto de promesa procesable. Puede obtener más información sobre cómo trabajar con promesas en el artículo de Jake Archibald . Son increíblemente poderosos.

En el caso de GSAP, su expresiva API orientada a objetos le permite colocar sus animaciones en una línea de tiempo, lo que le brinda control sobre la programación y la sincronización. No estás limitado a animaciones encadenadas una tras otra; puedes anidar líneas de tiempo, hacer que las animaciones se superpongan, etc.:

var tl = new TimelineMax();/* GSAP tweens chain by default, but you can specify exact insertion points in the timeline, including relative offsets. */tl .to(element, 1, { opacity: 0.5 }) .to(element, 1, { opacity: 1 });

Genialidad de JavaScript: flujo de trabajo

La animación es inherentemente un proceso experimental en el que necesitas jugar con el tiempo y las suavizaciones para obtener exactamente la sensación que tu aplicación necesita. Por supuesto, incluso una vez que creas que un diseño es perfecto, un cliente a menudo solicitará cambios no triviales. En estas situaciones, un flujo de trabajo manejable resulta fundamental.

Si bien las transiciones CSS son increíblemente fáciles de incluir en un proyecto para efectos como desplazamientos, se vuelven inmanejables cuando intentas secuenciar incluso animaciones moderadamente complejas. Es por eso que CSS proporciona animaciones de fotogramas clave , que le permiten agrupar la lógica de la animación en secciones.

Sin embargo, una deficiencia principal de la API de fotogramas clave es que debe definir secciones en porcentajes , lo cual no es intuitivo. Por ejemplo:

@keyframes myAnimation { 0% { opacity: 0; transform: scale(0, 0); } 25% { opacity: 1; transform: scale(1, 1); } 50% { transform: translate(100px, 0); } 100% { transform: translate(100px, 100px); }}#box { animation: myAnimation 2.75s;}

¿Qué pasa si el cliente te pide que alargues translateX1 segundo la animación? Vaya. Eso requiere rehacer los cálculos y cambiar todos (o la mayoría) de los porcentajes.

Velocity tiene su paquete UI para lidiar con la complejidad de múltiples animaciones y GSAP ofrece líneas de tiempo anidables . Estas características permiten posibilidades de flujo de trabajo completamente nuevas.

Pero dejemos de predicar sobre el flujo de trabajo y profundicemos en ejemplos de animación divertidos.

Genialidad de JavaScript: Física

Muchos efectos potentes se pueden lograr exclusivamente a través de JavaScript. Examinemos algunos, comenzando con la animación basada en la física.

La utilidad de la física en el diseño de movimiento toca el principio central de lo que constituye una excelente experiencia de usuario: interfaces que fluyen naturalmente a partir de la entrada del usuario; en otras palabras, interfaces que se adhieren a cómo funciona el movimiento en el mundo real.

GSAP ofrece complementos de física que se adaptan a las limitaciones de su interfaz de usuario. Por ejemplo, ThrowPropsPlugin rastrea la velocidad dinámica del dedo o el mouse de un usuario, y cuando el usuario lo suelta, ThrowPropsPlugin iguala esa velocidad correspondiente para deslizar naturalmente el elemento hasta detenerse. La animación resultante es una interpolación estándar que se puede manipular en el tiempo (pausar, invertir, etc.):

Vea el Pen Draggable (Mini) de GreenSock ( @GreenSock ) en CodePen .

Velocity ofrece un tipo de relajación basado en la física de los resortes. Normalmente, con las opciones de flexibilización, se pasa un tipo de flexibilización con nombre; por ejemplo ease, ease-in-outo easeInOutSine. Con la física de resortes, se pasa una matriz de dos elementos que consta de valores de tensión y fricción (entre paréntesis a continuación):

Velocity(element, { left: 500 }, [ 500, 20 ]); // 500 tension, 20 friction

Una tensión más alta (un valor predeterminado de 500) aumenta la velocidad total y el rebote. Una fricción más baja (un valor predeterminado de 20) aumenta la velocidad de vibración final. Al modificar estos valores, puede ajustar por separado sus animaciones para que tengan diferentes personalidades. Pruébalo:

Consulte Pen Velocity.js - Easing: Spring Physics (Tester) de Julian Shapiro ( @julianshapiro ) en CodePen .

Genialidad de JavaScript: desplazamiento

En Velocity, puede permitir que el usuario desplace el navegador hasta el borde de cualquier elemento pasándolo scrollcomo primer argumento de Velocity (en lugar de un mapa de propiedades). El scrollcomando se comporta de manera idéntica a una llamada de Velocity estándar; puede tomar opciones y puede ponerse en cola.

Velocity(element, "scroll", { duration: 1000 };

Consulte Pen Velocity.js - Comando: Desplazamiento con opción de contenedor de Julian Shapiro ( @julianshapiro ) en CodePen .

También puede desplazar elementos dentro de los contenedores y puede desplazarse horizontalmente. Consulte la documentación de desplazamiento de Velocity para obtener más información.

GSAP tiene ScrollToPlugin, que ofrece una funcionalidad similar y puede ceder el control automáticamente cuando el usuario interactúa con la barra de desplazamiento.

Genialidad de JavaScript: inversa

Tanto Velocity como GSAP tienen comandos inversos que le permiten animar un elemento a los valores anteriores a su última animación.

En Velocity, páselo reversecomo primer argumento de Velocity:

// Reverse defaults to the last call's options, which you can extendVelocity(element, "reverse", { duration: 500 });

Haga clic en la pestaña "JS" para ver el código que impulsa esta demostración:

Consulte Pen Velocity.js - Comando: Inverso de Julian Shapiro ( @julianshapiro ) en CodePen .

En GSAP, puedes conservar una referencia al objeto de animación y luego invocar su reverse()método en cualquier momento:

var tween = TweenMax.to(element, 1, {opacity:0.5});tween.reverse();

Control de transformación

Con la animación CSS, todos los componentes de transformación (escala, traducción, rotación y sesgo) están contenidos en una única propiedad CSS y, en consecuencia, no se pueden animar de forma independiente utilizando diferentes duraciones, suavizaciones y tiempos de inicio.

Sin embargo, para un diseño de movimiento rico, el control independiente es imperativo. Veamos el control de transformación dinámica que solo se puede lograr en JavaScript. Haga clic en los botones en cualquier momento durante la animación:

Vea las transformaciones independientes del lápiz de GreenSock ( @GreenSock ) en CodePen .

Tanto Velocity como GSAP le permiten animar individualmente los componentes de transformación:

// Velocity/* First animation */Velocity(element, { translateX: 500 }, 1000);/* Trigger a second (concurrent) animation after 500 ms */Velocity(element, { rotateZ: 45 }, { delay: 500, duration: 2000, queue: false });// GSAP/* First animation */TweenMax.to(element, 1, { x: 500 });/* Trigger a second (concurrent) animation after 500 ms */TweenMax.to(element, 2, { rotation: 45, delay: 0.5 });

Terminando

• En comparación con la animación CSS, la animación JavaScript tiene una mejor compatibilidad con el navegador y, por lo general, más funciones, y proporciona un flujo de trabajo más manejable para las secuencias de animación.
• Animar en JavaScript no implica sacrificar la velocidad (o la aceleración del hardware). Tanto Velocity como GSAP ofrecen una velocidad vertiginosa y aceleración de hardware bajo el capó. No más problemas con null-transformlos hacks.
• No es necesario utilizar jQuery para aprovechar las bibliotecas de animación JavaScript dedicadas. Sin embargo, si lo hace, no perderá rendimiento.

Nota final

Consulte la documentación de Velocity y GSAP para dominar la animación JavaScript.

Otras lecturas

• Una mirada rápida a las matemáticas de las animaciones con JavaScript
• El estado de la animación 2014
• Animación GPU: hacerlo bien
• ¡Necesitaremos una API más grande!

Créditos de las imágenes de la portada: Centro de vuelos espaciales Goddard de la NASA .

(al, il, mrn)Explora más en

• Codificación
• Herramientas
• javascript
• Técnicas
• jQuery

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Genialidad de JavaScript: o cómo animar sin jQuery

¿Por qué JavaScript?Velocidad y GSAPTrabajar sin jQueryGenialidad de JavaScript: flujo de trabajoGenialidad de JavaScript: FísicaGenialidad de JavaScript: d

programar

es

https://aprendeprogramando.es/static/images/programar-genialidad-de-javascript-o-como-animar-sin-jquery-873-0.jpg

2024-12-03

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente