Animaciones de interfaz de usuario más rápidas con Velocity JS

1. Descripción general del paquete de interfaz de usuario
   1. Llamadas
   2. Transiciones
2. Usando el paquete de interfaz de usuario
   1. Tambalear
   2. Arrastrar
   3. Hacia atrás
3. Diseñando para UX
4. Beneficios de la animación basada en JavaScript
   1. Enlaces
   2. Otras lecturas

En este artículo, Julian Shapiro demostrará que los sitios web pueden beneficiarse del mismo nivel de diseño de movimiento interactivo y eficaz que se encuentra en las aplicaciones móviles. En los siguientes ejemplos, utilizará Velocity JS, un popular motor de animación que mejora drásticamente la velocidad de la animación de la interfaz de usuario. En particular, el paquete UI de Velocity.js, que le permite inyectar rápidamente diseño de movimiento en sus páginas.

Desde una perspectiva de diseño en movimiento, Facebook.com es fenomenalmente estático. Está deliberadamente simplificado para lograr los niveles más amplios de compatibilidad y comodidad del usuario. Las aplicaciones iOS de Facebook, por otro lado, son fluidas. Priorizan el diseño del movimiento; Tienen ganas de vivir y respirar aplicaciones.

Este artículo sirve para demostrar que esta dicotomía no tiene por qué existir; Los sitios web pueden beneficiarse del mismo nivel de diseño de movimiento interactivo y de alto rendimiento que se encuentra en las aplicaciones móviles.

Antes de profundizar en los ejemplos, primero abordemos por qué el diseño de movimiento es tan beneficioso:

• Bucles de retroalimentación mejorados . Como diseñador de UI y UX, debes utilizar patrones tanto como sea posible, ya que los usuarios los buscarán inconscientemente. Los patrones de movimiento receptivos, en particular, son la clave para las interacciones placenteras: cuando se hace clic en un botón, ¿siente que ha reaccionado a la presión del mouse? Cuando se guarda un archivo, ¿tiene la fuerte sensación de que sus datos realmente han sido transferidos y almacenados?
• Transiciones de contenido fluidas . El diseño en movimiento le permite evitar pausas contextuales; los modales que aparecen y desaparecen (en lugar de cambiar de página por completo) son un ejemplo popular de esto.
• Puntos muertos llenos . Cuando los usuarios realizan una tarea poco atractiva en su página, puede aumentar su nivel de excitación a través del sonido, los colores y el movimiento. Desviar la atención del usuario es una excelente manera de hacer que una olla hierva más rápido.
• Florece la estética . Por las mismas razones estéticas por las que los diseñadores de UI pasan horas perfeccionando las combinaciones de colores y fuentes de sus páginas, los diseñadores de movimiento perfeccionan las combinaciones de transición y relajación de sus animaciones: los productos refinados simplemente se sienten superiores.

En los ejemplos siguientes, usaremos Velocity JS , un popular motor de animación que mejora drásticamente la velocidad de la animación de la interfaz de usuario. (Velocity.js se comporta de manera idéntica a la función de jQuery $.animate(), al tiempo que supera tanto la animación jQuery como las bibliotecas de animación CSS). En particular, este artículo se centra en el paquete UI de Velocity.js , que le permite inyectar rápidamente diseño de movimiento en sus páginas.

Descripción general del paquete de interfaz de usuario

Después de incluir el paquete de interfaz de usuario (solo 1,8 KB en formato ZIP) en su página, obtendrá acceso a los efectos de la interfaz de usuario que están organizados en dos categorías:

Llamadas

Las llamadas son efectos que llaman la atención sobre un elemento para mejorar la experiencia del usuario, como agitar un elemento para indicar un error de entrada, hacer parpadear un elemento para indicar que algo ha cambiado en la página o hacer rebotar un elemento para indicar que hay un mensaje en espera. el usuario.

Consulte Pen Velocity.js - UI Pack: Callout de Julian Shapiro ( @julianshapiro ) en CodePen .

Transiciones

Las transiciones son efectos que hacen que un elemento aparezca dentro o fuera de la vista. Cada transición está asociada con una dirección de "entrada" o de "salida". El valor de las transiciones radica en revelar y ocultar contenido de una manera que sea visualmente más rica que simplemente animar la opacidad de un elemento. Aquí tienes slideUpInuna transición que incorpora un sutil efecto de deslizamiento:

Consulte Pen Velocity.js - UI Pack: Transición de Julian Shapiro ( @julianshapiro ) en CodePen .

Si ha prestado atención a la evolución del diseño de movimiento de la interfaz de usuario de iOS, habrá notado que más de una docena de efectos de transición ayudan a que sea placentero interactuar con la interfaz de iOS. Esta diversidad de transiciones es lo que el paquete UI de Velocity.js aporta a los sitios web cotidianos.

Tenga en cuenta que, gracias al rendimiento de Velocity.js, así como a las optimizaciones que ofrece el paquete UI, todos los efectos del paquete están 100% listos para su uso en producción a gran escala. Viajes y turismo

Profundicemos en algunos ejemplos de código simples.

Usando el paquete de interfaz de usuario

Se hace referencia a las llamadas y transiciones a través del primer parámetro de Velocity: pasar el nombre de un efecto en lugar de pasar un mapa de propiedades estándar. A modo de comparación, aquí está la sintaxis de una llamada normal a Velocity.js, que se comporta de manera idéntica a la de jQuery $.animate():

$elements.velocity({ opacity: 0.5 });

Por el contrario, a continuación se muestran las llamadas de Velocity.js que utilizan efectos del paquete UI:

/* Shake an element. */$elements.velocity("callout.shake");/* Transition an element into view using slideUp. */$elements.velocity("transition.slideUpIn");

Al igual que con las llamadas normales de Velocity.js, los efectos de la interfaz de usuario pueden encadenarse entre sí y pueden tener opciones:

/* Call the shake effect with a 2000ms duration, then slide the elements out of view. */$elements .velocity("callout.shake", 2000) .velocity("transition.slideDownOut");

Los efectos del paquete UI tienen opcionalmente tres opciones únicas stagger: dragy backwards.

Tambalear

Especifique staggeren milisegundos para retrasar sucesivamente la animación de cada elemento de un conjunto en la cantidad especificada. (Establecer un staggervalor evita que los elementos se animen en paralelo, lo que tiende a carecer de elegancia).

/* Animate elements into view with intermittent delays of 250ms. */$divs.velocity("transition.slideLeftIn", { stagger: 250 });

Consulte Pen Velocity.js - UI Pack: Stagger de Julian Shapiro ( @julianshapiro ) en CodePen .

Arrastrar

Configúrelo dragen truepara aumentar sucesivamente la duración de la animación de cada elemento de un conjunto. El último elemento se animará con una duración igual al valor original de la animación, mientras que los valores de duración de los elementos anteriores al último se acercarán gradualmente al valor original.

El resultado es un efecto de flexibilización entre elementos. (Si alguna vez te han cautivado las demostraciones de tipografía en movimiento realizadas con After Effects, el arrastre es un componente clave pero sutil detrás de su riqueza visual).

Consulte Pen Velocity.js - UI Pack: Arrastre de Julian Shapiro ( @julianshapiro ) en CodePen .

Hacia atrás

Establezca backwardsen truepara animar comenzando con el último elemento de un conjunto. Esta opción es ideal para un efecto que hace que los elementos salgan de la vista, porque la backwardsopción refleja el comportamiento de los elementos que pasan a la vista (que, de forma predeterminada, se animan en dirección hacia adelante, desde el primer elemento hasta el último).

Consulte Pen Velocity.js - UI Pack: Backwards de Julian Shapiro ( @julianshapiro ) en CodePen .

Juntas, estas tres opciones llevan el poder de las suites de diseño en movimiento a la Web. Cuando se usa con moderación, los resultados son hermosos, siempre y cuando diseñes teniendo en cuenta la experiencia del usuario:

Diseñando para UX

Darle vida a una página con diseño en movimiento puede escalar rápidamente . Aquí hay algunas consideraciones a tener en cuenta:

• Haz que terminen rápidamente . Al aplicar transiciones, los desarrolladores a menudo cometen el error de dejarlas ejecutarse durante demasiado tiempo, lo que hace que los usuarios esperen innecesariamente. Nunca permita que las mejoras en la interfaz de usuario reduzcan la velocidad aparente de su página. Si tiene mucho contenido que aparece gradualmente, mantenga corta la duración total de la animación.
• Utilice un efecto apropiado . Por ejemplo, no utilice un efecto de rebote divertido en una página que presente contenido formal.
• Úsalos con moderación . Tener transiciones en cada rincón de tu página es excesivo.
• Evite la repetición extrema . Evite transiciones de duración media a larga en lugares donde se activarán repetidamente.
• Experimento . Encuentre las combinaciones correctas de duración, escalonamiento, arrastre y retroceso que producirán el ajuste perfecto para cada una de sus animaciones individuales.

Beneficios de la animación basada en JavaScript

Retrocedamos y contextualicemos por qué, en primer lugar, impulsar este tipo de transiciones de interfaz de usuario a través de JavaScript es una buena idea. Después de todo, hasta ahora, estos efectos se han aplicado más comúnmente utilizando clases CSS prediseñadas de bibliotecas como Animate.css :

• Debido a que los efectos del paquete UI se comportan de manera idéntica a las llamadas de animación estándar en Velocity.js, se pueden encadenar y tomar opciones. (Hacer esto con CSS sin formato puede resultar engorroso).
• Todos los efectos se han optimizado para el rendimiento (interacción DOM mínima).
• Los elementos animados a través del paquete UI cambian automáticamente display: nonedespués de la transición y regresan display: blocko inlineantes de la transición. (Hacer esto a través de CSS requiere múltiples llamadas y código desordenado).
• Velocity.js no deja el texto borroso. Si ha aplicado efectos de transición a través de CSS antes, sabrá que el texto puede verse borroso cuando haya terminado de animar y no haya eliminado la clase asociada. Esto no sucede en Velocity.js porque su motor subyacente elimina por completo los efectos de transformación innecesarios al finalizar una animación.
• Los efectos funcionan en todas partes excepto en Internet Explorer 8, donde vuelven a aparecer y desaparecer con elegancia.

Con todos estos beneficios, incluido el excelente rendimiento de los efectos en todos los navegadores y dispositivos (incluidos los dispositivos móviles más antiguos), no tiene excusa para no comenzar a experimentar con el diseño de movimiento en sus sitios. ¡Disfrutar!

Nota : consulte la documentación de Velocity.js para experimentar con todos los efectos del paquete UI.

Enlaces

• Descargar Velocity en GitHub
• Galería de demostración de velocidad

Créditos de las imágenes de la portada: Unsplash.com

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!

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

• Codificación
• CSS
• javascript
• Técnicas

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

Animaciones de interfaz de usuario más rápidas con Velocity JS

Descripción general del paquete de interfaz de usuarioUsando el paquete de interfaz de usuarioDiseñando para UXBeneficios de la animación basada en JavaScri

programar

es

https://aprendeprogramando.es/static/images/programar-animaciones-de-interfaz-de-usuario-mas-rapidas-con-velocity-js-848-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