Velocity es una biblioteca de JavaScript multiplataforma diseñada para simplificar las programación del lado del cliente para la animación de sitios web.[1] Velocity es un software gratuito de código abierto con licencia MIT . Es el motor de animación web de código abierto más popular.[2]
La sintaxis de Velocity está diseñada para facilitar la creación de animaciones complejas para elementos HTML y SVG.[3] 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.[4] Velocity logra su rendimiento manteniendo un caché interno de estados de animación y minimizando la " descarga de diseño", el comportamiento indeseable que experimentan los navegadores web cuando se actualizan visualmente a un ritmo rápido.[4] En conjunto, sus beneficios de flujo de trabajo y rendimiento permiten que Velocity se utilice para programación de animación sofisticada que se puede integrar en aplicaciones web y móviles.[5] Su amplia compatibilidad con navegadores y dispositivos lo hace ideal para grandes distribuciones empresariales que deben admitir dispositivos de bajo consumo.[6]
Velocity se utiliza para impulsar las interfaces de usuario de muchos sitios web destacados, incluidos Uber, Samsung, WhatsApp, Tumblr, HTC, Mazda y Microsoft Windows . Es uno de los proyectos favoritos en el servicio de alojamiento de códigos GitHub.[7] En 2015, Velocity fue nominado como Proyecto de código abierto del año por The Net Awards.[8]
Características
Las características de Velocity incluyen: [9]
- Ventana del navegador y desplazamiento de elementos
- Independencia del marco jQuery [10]
- Inversión de animación (la capacidad de deshacer la animación anterior) y bucle de animación
- Animación de elementos SVG [11]
- Animación de color RGB y hexadecimal.
- Animación de propiedad de transformación de CSS
- Efectos de animación creados previamente a través del UI Pack de Velocity [12]
- Movimiento basado en la física mediante el tipo de relajación del resorte .
- Integración de promesas
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 soporte se remonta a Internet Explorer 8 y Android 2.3.[13]
Uso
incluyendo la biblioteca
La biblioteca Velocity es un único archivo JavaScript que contiene todas sus funciones principales. Se puede incluir dentro de una página web vinculando 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="velocity.min.js"> </script>
También es posible incluir Velocity directamente desde las redes de entrega de contenido. (El atributo de integridad se utiliza para la integridad de los subrecursos ). Se recomienda utilizar siempre HTTPS para los recursos, pero se puede sustituir por // para utilizar 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:
- El
$.Velocity función, que es un método de fábrica extendido desde el objeto raíz de jQuery . Este método anima elementos DOM sin formato en lugar de elementos envueltos en jQuery . Este es el estilo empleado cuando se utiliza Velocity sin jQuery en la página.
- La función
$element.velocity() . Este es el estilo utilizado 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 la configuración de la animación (por ejemplo, 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, desplazamiento o retroceso ) o un objeto que consta de propiedades CSS que se van a animar:
// Anima el ancho a 100px y mueve izquerda 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 se ha completado la animación):
// Anima el ancho a 100px sobre 1000ms despues de esperar durante 100ms
$element.velocity({ width: "100px" }, { duration: 1000, delay: 100 });
Crear una serie de llamadas de animación consecutivas en Velocity consiste en colocar llamadas velocity() consecutivas en el objeto del elemento jQuery de destino:
$element
.velocity({ height: 300 }, { duration: 1000 })
// Sigue con el siguente animación despues del primero
.velocity({ top: 200 }, { duration: 600 })
// Y otro vez
.velocity({ opacity: 0 }, { duration: 200 });
Desplazamiento e inversión
El desplazamiento en Velocity consiste en pasar "scroll" como primer argumento de Velocity, en lugar del típico mapa de propiedades CSS:
// desplazamiento durante 750ms
$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 del elemento
$element.velocity({ height: "500px" }, { duration: 500 });
// Reversa la animación previa; anima a la posición previa usando la duración previa
$element.velocity("reverse");
El comando reverse de Velocity tiene por defecto las opciones de animación utilizadas en la llamada anterior. Pasar un nuevo objeto de opciones extiende el anterior:
$element.velocity({ height: "500px" }, { duration: 500 });
// Puedes usar el opción de reverse con una duración nueva
$element.velocity("reverse", { duration: 1000 });
Historia
Velocity fue desarrollado por Julian Shapiro para abordar la falta de bibliotecas de animación JavaScript orientadas al diseñador y de alto rendimiento.[14][15] Stripe, una popular empresa de tecnología de Internet centrada en desarrolladores web, patrocinó a Shapiro con una subvención para ayudar a proporcionar los recursos financieros necesarios para continuar el desarrollo de tiempo completo en Velocity.[16]
El alto rendimiento del motor de animación interno de Velocity ayudó a repopularizar la animación web en JavaScript, que anteriormente había caído en desgracia para la animación basada en CSS debido a sus ventajas de velocidad sobre las bibliotecas de JavaScript más antiguas que no enfocan en la animación.[17]
En septiembre de 2014, Shapiro lanzó Velocity Motion Designer, una programa 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.[18] En marzo de 2015, Peachpit publicó el libro Animación web usando JavaScript de Shapiro, que enseña los principios iniciales y avanzados del desarrollo de animaciones web usando Velocity.[cita requerida] A mediados de 2015, Velocity continúa siendo desarrollado y mantenido exclusivamente por Shapiro.[19]
Además del uso de Velocity en entornos empresariales profesionales, también se utiliza ampliamente para la experimentación del desarrollo web y la práctica de principiantes. Los proyectos de desarrollo web de prueba de concepto creados sobre Velocity se publican comúnmente en CodePen ( ejemplo ), un servicio comunitario líder para compartir código.
Véase también
Otras lecturas
Enlaces externos
Referencias