Velocity es una biblioteca JavaScript multiplataforma diseñada para simplificar la creación de secuencias de comandos del lado del cliente para animaciones de sitios web. [4] Velocity es un software gratuito 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 beneficios en el flujo de trabajo, Velocity proporciona un rendimiento de animación que es competitivo con la animación basada en CSS . [7] Velocity logra su rendimiento manteniendo un caché interno de estados de animación y minimizando el " desorden de diseño ", el comportamiento indeseable que experimentan los navegadores web cuando se actualizan visualmente a un ritmo rápido. [7] En conjunto, sus beneficios en el flujo de trabajo y el rendimiento permiten que Velocity se utilice para una programación de animación sofisticada que se puede integrar tanto en aplicaciones web como móviles. [8] Su amplio soporte de navegadores y dispositivos lo hacen ideal para grandes distribuciones empresariales que deben admitir dispositivos de bajo consumo. [9]
Velocity se utiliza para potenciar las interfaces de usuario de muchos sitios web notables, incluidos Uber , Samsung , WhatsApp , Tumblr , HTC , Mazda y Microsoft Windows . Es uno de los proyectos más favoritos 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]
Las características de Velocity incluyen: [4]
Velocity es compatible con todos 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 Internet Explorer 8 y Android 2.3. [15]
La biblioteca Velocity es un único archivo JavaScript que contiene todas sus funciones principales. Se puede incluir en una página web mediante un vínculo a una copia local o a una de las muchas copias disponibles en servidores públicos, incluidos jsDelivr de MaxCDN o cdnjs de Cloudflare .
< script src = "velocidad.min.js" > < script >También es posible incluir Velocity directamente desde las redes de distribución de contenido. (El atributo integrity se utiliza para la integridad de subrecursos ). Se recomienda utilizar siempre HTTPS para los recursos, pero esto se puede reemplazar por //para utilizar URL relativas al protocolo .
< script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js" integridad = "sha384-fcLDUAwcSMMfmpKMJ0dO2//SL2WJ5/kkyz/yvgtmLXBEp3GdqrQF9ahRerhdLXn+" origen cruzado = "anónimo" ></ script >Velocity tiene dos estilos de uso:
$.Velocityfunción, que es un método de fábrica extendido a partir del objeto raíz de jQuery , anima elementos DOM sin formato en lugar de elementos envueltos con jQuery . Este es el estilo que se emplea cuando se utiliza Velocity sin jQuery en la página.$element.velocity()función. Este es el estilo que se utiliza para animar objetos de elementos jQuery cuando jQuery está presente en la página.Las llamadas de animación en Velocity consisten en proporcionar los elementos deseados para animar, un mapa de propiedades de animación para especificar las propiedades CSS que se animarán y un objeto de opciones opcional para especificar configuraciones de animación (por ejemplo, duración ).
Velocity acepta uno o más argumentos. El primer argumento, que es obligatorio, puede ser el nombre de un comando de Velocity predefinido (por ejemplo, desplazarse o invertir ) o un objeto que consta de propiedades CSS que se animarán:
// 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 duration , easing y complete (una función arbitraria que se ejecuta una vez que la animación ha finalizado):
// Anima el ancho de un elemento a 100 px durante una duración de 1000 ms después de pausarlo por un retraso de 100 s. $element . velocity ({ width : "100px" }, { duration : 1000 , delay : 100 }); La creación de una serie de llamadas de animación consecutivas en Velocity consiste en colocar llamadas velocity() una tras otra en el objeto de elemento jQuery de destino :
$element . velocity ({ height : 300 }, { duration : 1000 }) // Continuar con esta animación una vez que la anterior se haya completado . velocity ({ top : 200 }, { duration : 600 }) // Y una vez más... . velocity ({ opacity : 0 }, { duration : 200 }); 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 en el que se invocó Velocity.
La inversión de 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 nuevo a la altura original del elemento usando la duración anterior $element . velocity ( "reverse" ); El comando reverse de Velocity toma como valor predeterminado las opciones de animación utilizadas en la llamada anterior. Al pasar un nuevo objeto de opciones, se extiende 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 }); Velocity fue desarrollado por Julian Shapiro para abordar la falta de bibliotecas de animación de JavaScript orientadas al diseñador y de alto rendimiento . [16] [17] Stripe , una popular empresa de tecnología de Internet centrada en el desarrollo web , patrocinó a Shapiro con una subvención para ayudar a proporcionar los recursos financieros necesarios para continuar con el desarrollo a tiempo completo en Velocity. [18]
El alto rendimiento del motor de animación interno de Velocity ayudó a repopularizar la animación web basada en JavaScript, que anteriormente había caído en desgracia frente a la animación basada en CSS debido a sus ventajas de velocidad sobre las bibliotecas de JavaScript más antiguas que carecían de un enfoque 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 dentro de un IDE . [20] En marzo de 2015, Peachpit publicó el libro Web Animation using JavaScript de Shapiro , que enseña los principios iniciales y avanzados del desarrollo de animaciones web utilizando Velocity. [ cita requerida ] A mediados de 2015, Velocity continú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 y la práctica del desarrollo web para principiantes. Los proyectos de desarrollo web de prueba de concepto creados sobre Velocity suelen publicarse en CodePen (ejemplo), un servicio líder de intercambio de código comunitario.
.svg/1280px-Free_and_open-source_software_logo_(2009).svg.png){kind=logo}