Hispanopedia WikiVelocity es una biblioteca JavaScript multiplataforma diseñada para simplificar la programación del lado del cliente para animaciones de sitios web. [ 4 ] Velocity es software libre y de código abierto con licencia MIT . [ 3 ] Es el motor de animación web de código abierto más popular. [ 5 ]
La sintaxis de Velocity está diseñada para facilitar la creación de animaciones complejas para elementos HTML y SVG . [ 6 ] Además de sus ventajas en el flujo de trabajo, Velocity ofrece un rendimiento de animación competitivo con el de las animaciones basadas en CSS . [ 7 ] Velocity logra su rendimiento manteniendo una caché interna de estados de animación y minimizando el "layout thrashing ", el comportamiento indeseable que experimentan los navegadores web al actualizarse visualmente a gran velocidad. [ 7 ] En conjunto, sus ventajas en el flujo de trabajo y el rendimiento permiten que Velocity se utilice para la programación de animaciones sofisticadas que se pueden integrar tanto en aplicaciones web como móviles. [ 8 ] Su amplia compatibilidad con navegadores y dispositivos lo hace ideal para grandes distribuciones empresariales que deben admitir dispositivos de baja potencia. [ 9 ]
Velocity se utiliza para potenciar las interfaces de usuario de muchos sitios web importantes, como Uber , Samsung , WhatsApp , Tumblr , HTC , Mazda y Microsoft Windows . Es uno de los proyectos más populares en el servicio de alojamiento de código GitHub . [ 10 ] En 2015, Velocity fue nominado a Proyecto de Código Abierto del Año por The Net Awards . [ 11 ]
Características
Las características de Velocity incluyen: [ 4 ]
- Desplazamiento de la ventana y los elementos del navegador
- Independencia del marco jQuery [ 12 ]
- Inversión de animación (la capacidad de deshacer la animación anterior) y bucle de animación.
- Animación de elementos SVG [ 13 ]
- Animación de color RGB y hexadecimal
- Animación de la propiedad transform de CSS
- Efectos de animación precreados a través del paquete de interfaz de usuario de Velocity [ 14 ]
- Movimiento basado en la física mediante el tipo de amortiguación por resorte.
- Promesas de integración
Compatibilidad con navegadores
Velocity es compatible con los principales navegadores de escritorio ( Firefox , Google Chrome y Safari ), además de los sistemas operativos móviles iOS y Android . Su compatibilidad se remonta a versiones anteriores como Internet Explorer 8 y Android 2.3. [ 15 ]
Uso
Incluida la biblioteca
La biblioteca Velocity es un único archivo JavaScript que contiene todas sus funciones principales. Se puede incluir en una página web mediante un enlace a una copia local o a una de las muchas copias disponibles en servidores públicos, como jsDelivr de MaxCDN o cdnjs de Cloudflare .
< script src = " velocity.min.js" > </script>También es posible incluir Velocity directamente desde redes de distribución de contenido. (El atributo integrity se utiliza para la integridad del subrecurso ). Se recomienda usar siempre HTTPS para los recursos, pero esto se puede reemplazar //para usar URL relativas al protocolo .
< script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js" integrity = "sha384 - fcLDUAwcSMMfmpKMJ0dO2//SL2WJ5/kkyz/yvgtmLXBEp3GdqrQF9ahRerhdLXn+" crossorigin = "anonymous" > </script>Estilos de uso
Velocity tiene dos estilos de uso:
- Esta
$.Velocityfunción, que es un método de fábrica que extiende el objeto raíz de jQuery , anima elementos DOM sin procesar en lugar de elementos envueltos en jQuery . Este es el estilo que se utiliza al usar Velocity sin jQuery en la página. - La
$element.velocity()función. Este es el estilo que se utiliza para animar los objetos de elementos jQuery cuando jQuery está presente en la página.
Las llamadas de animación en Velocity consisten en proporcionar el/los elemento(s) que se desean animar, un mapa de propiedades de animación para especificar las propiedades CSS que se van a animar y un objeto de opciones opcional para especificar la configuración de la animación (por ejemplo, la duración ).
Argumentos
Velocity acepta uno o más argumentos. El primer argumento, que es obligatorio, puede ser el nombre de un comando Velocity predefinido (por ejemplo, scroll o reverse ) o un objeto que consta de propiedades CSS que se van a animar:
// Anima el ancho de un elemento a 100px y su propiedad izquierda a 200px $element . velocity ({ width : "100px" , left : "200px" });El segundo argumento, que es opcional, es un objeto. Se utiliza para especificar opciones de animación como duración , suavizado y finalización (una función arbitraria que se ejecutará una vez que la animación haya finalizado):
// Anima el ancho de un elemento a 100px durante 1000ms después de una pausa de 100s. $element . velocity ({ width : "100px" }, { duration : 1000 , delay : 100 });Encadenamiento
Crear una serie de llamadas de animación consecutivas en Velocity consiste en colocar llamadas a velocity() una tras otra en el objeto del elemento jQuery de destino:
$element . velocity ({ height : 300 }, { duration : 1000 }) // Continúa con esta animación una vez que la anterior haya finalizado . velocity ({ top : 200 }, { duration : 600 }) // Y una vez más... . velocity ({ opacity : 0 }, { duration : 200 });Desplazamiento y reversión
El desplazamiento en Velocity consiste en pasar "scroll" como primer argumento de Velocity, en lugar del mapa de propiedades CSS típico:
// Desplazamiento con una duración de 750 ms $element . velocity ( "scroll" , { duration : 750 });Posteriormente, el navegador se desplazará hacia abajo hasta el borde superior del elemento sobre el que se invocó Velocity.
La inversión de la animación en Velocity consiste en pasar "reverse" como primer argumento de Velocity:
// Animar la altura de un elemento $element . velocity ({ height : "500px" }, { duration : 500 }); // Invertir la animación anterior; animar de vuelta a la altura original del elemento usando la duración anterior $element . velocity ( "reverse" );El comando de reversa de Velocity utiliza por defecto las opciones de animación empleadas en la llamada anterior. Si se pasa un nuevo objeto de opciones, se amplía el anterior:
$element.velocity ( { height : "500px" }, { duration : 500 }); // Extiende el objeto de opciones de la llamada inversa anterior con un nuevo valor de duración $element.velocity ( " reverse " , { duration : 1000 } ) ;Historia
Velocity fue desarrollado por Julian Shapiro para abordar la falta de bibliotecas de animación JavaScript de alto rendimiento y orientadas al diseñador . [ 16 ] [ 17 ] Stripe , una popular empresa de tecnología de Internet centrada en el desarrollador web , patrocinó a Shapiro con una beca para ayudar a proporcionar los recursos financieros necesarios para continuar el desarrollo a tiempo completo de Velocity. [ 18 ]
El alto rendimiento del motor de animación interno de Velocity ayudó a popularizar nuevamente la animación web basada en JavaScript, que anteriormente había caído en desuso en favor de la animación basada en CSS debido a sus ventajas de velocidad sobre las bibliotecas JavaScript más antiguas que no se centraban en la animación. [ 19 ]
En septiembre de 2014, Shapiro lanzó Velocity Motion Designer , una herramienta para diseñar animaciones en sitios web de producción en vivo que permitía exportar en tiempo real el código de animación generado para su uso posterior en un IDE . [ 20 ] En marzo de 2015, Peachpit publicó el libro de Shapiro, Web Animation using JavaScript , que enseña los principios básicos y avanzados del desarrollo de animaciones web con Velocity. A mediados de 2015, Velocity seguía siendo desarrollado y mantenido exclusivamente por Shapiro. [ 21 ]
Además de su uso en entornos empresariales profesionales, Velocity también se utiliza ampliamente para la experimentación en desarrollo web y la práctica de principiantes. Los proyectos de desarrollo web de prueba de concepto creados con Velocity se suelen publicar en CodePen ( ejemplo ), un servicio líder de intercambio de código comunitario.
Véase también
Lecturas adicionales
- Animación sin jQuery
- Cómo usar Velocity para agregar animaciones fácilmente
- Animación rápida de la interfaz de usuario con Velocity.js
Enlaces externos
- Sitio web oficial
- Galería de demostración de Velocity
Referencias
- ↑ julianshapiro. "velocity/README.md en master · julianshapiro/velocity · GitHub" . Github.com . Consultado el 13 de febrero de 2021 .
- ↑ "Historial de package.json - julianshapiro/velocity · GitHub" . Github.com . Consultado el 13 de febrero de 2021 .
- 1 2 julianshapiro (2014-10-09). "velocity/LICENSE.md en master · julianshapiro/velocity · GitHub" . Github.com . Recuperado el 2016-01-20 .
- 1 2 "Animación en JavaScript" . 15 de junio de 2015.
- ↑ "Julian Shapiro, importante contribuyente a las tecnologías de código abierto, revela los secretos del uso de SaaS" . Forbes.com . Consultado el 20 de enero de 2016 .
- ↑ "Velocity.js para diseñadores" . Studio Wolf. Archivado del original el 6 de marzo de 2016. Consultado el 20 de enero de 2016 .
- 1 2 "CSS vs. JS Animation: ¿Cuál es más rápido?" . 28 de abril de 2014.
- ↑ "Velocity, la potente biblioteca de JavaScript" . 11 de octubre de 2017.
- ↑ Julian Shapiro (16 de junio de 2014). "Animación de interfaz de usuario increíblemente rápida con Velocity.js" . Sitepoint.com . Consultado el 20 de enero de 2016 .
- ↑ "Buscar · estrellas:>1 · GitHub" . Github.com . Consultado el 20 de enero de 2016 .
- ↑ "Shortlist The Net Awards 2015 Celebrando lo mejor en diseño y desarrollo web" . Thenetawards.com . Consultado el 20 de enero de 2016 .
- ↑ "Animación sin jQuery – Smashing Magazine" . Smashingmagazine.com. 4 de septiembre de 2014. Consultado el 20 de enero de 2016 .
- ↑ "Introducción sencilla a la animación SVG" . 31 de julio de 2014.
- ↑ "Usa Velocity.js para aplicar efectos de movimiento fluidos similares a los de una aplicación | JavaScript | Diseñador web" . Webdesignermag.co.uk. 21 de enero de 2015. Consultado el 20 de enero de 2016 .
- ↑ "Velocity.js" . Julian.com . Consultado el 20 de enero de 2016 .
- ↑ Equipo de Awwwards. "Entrevista con Julian Shapiro" . Awwwards.com . Consultado el 20 de enero de 2016 .
- ↑ Shapiro, Julian (21 de mayo de 2014). "Trata el código abierto como una startup ★ Mozilla Hacks – el blog para desarrolladores web" . Hacks.mozilla.org . Consultado el 20 de enero de 2016 .
- ↑ Greg Brockman (6 de junio de 2014). "Beneficiarios del Open-Source Retreat" . Stripe.com . Consultado el 20 de enero de 2016 .
- ↑ Aurelio De Rosa (23-06-2014). "Mejorando fácilmente las animaciones de jQuery" . Sitepoint.com . Consultado el 20-01-2016 .
- ↑ Remezcla este video (06/09/2014). "Velocity Motion Designer: Descripción general" . YouTube . Consultado el 20/01/2016 .
- ↑ "Colaboradores de julianshapiro/Velocity" . GitHub .
- Bibliotecas de JavaScript
- Software libre programado en JavaScript
- Ajax (programación)
- Software que utiliza la licencia MIT.
- Software de 2014
