Velocity (biblioteca JavaScript) - Velocity (JavaScript library)
| Autor (es) original (es) | Julián Shapiro |
|---|---|
| Lanzamiento estable | 1.5.2 / 31 de julio de 2018 |
| Repositorio |
|
| Escrito en | JavaScript |
| Sistema operativo | Multiplataforma |
| Plataforma | Ver soporte del navegador |
| Escribe | Biblioteca JavaScript , animación |
| Licencia | MIT |
| Sitio web | velocityjs |
Velocity es una biblioteca JavaScript multiplataforma diseñada para simplificar las secuencias de comandos del lado del cliente de la animación del sitio web. 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.
La sintaxis de Velocity está diseñada para facilitar la creación de animaciones complejas para elementos HTML y SVG . Además de sus beneficios de flujo de trabajo, Velocity proporciona un rendimiento de animación que es competitivo con la animación basada en CSS . Velocity logra su rendimiento manteniendo un caché interno de estados de animación y minimizando la " alteración del diseño ", el comportamiento indeseable que experimentan los navegadores web cuando se actualizan visualmente a un ritmo rápido. En conjunto, sus beneficios de flujo de trabajo y 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. Su amplio navegador y compatibilidad con dispositivos lo hacen ideal para grandes distribuciones empresariales que deben admitir dispositivos de baja potencia.
Velocity se utiliza para alimentar las interfaces de usuario de muchos sitios web notables, incluidos los de Uber , Samsung , WhatsApp , Tumblr , HTC , Mazda y Microsoft Windows . Es uno de los proyectos más favorecidos en el servicio de alojamiento de código GitHub . En 2015, Velocity fue nominado como Proyecto de código abierto del año por The Net Awards .
Características
Las características de Velocity incluyen:
- Desplazamiento de elementos y ventanas del navegador
- Independencia del marco jQuery
- Inversión de animación (la capacidad de deshacer la animación anterior) y bucle de animación
- Animación de elementos SVG
- Animación RGB y color hexadecimal
- CSS 'es transformar la animación de la propiedad
- Efectos de animación creados previamente a través del paquete de interfaz de usuario de Velocity
- Movimiento basado en la física a través del tipo de flexión de resorte
- Promete integración
Soporte del navegador
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.
Uso
Incluida la biblioteca
La biblioteca Velocity es un solo archivo JavaScript que contiene todas sus funciones principales. Puede incluirse dentro de una página web enlazando a una copia local oa una de las muchas copias disponibles desde servidores públicos, incluyendo jsDelivr de MaxCDN o cdnjs de Cloudflare .
<script src="velocity.min.js"></script>
También es posible incluir Velocity directamente desde las redes de distribución de contenido. (El atributo de integridad se usa para la integridad de los subrecursos ). Se recomienda usar siempre HTTPS para los recursos, pero esto se puede reemplazar por //para hacer uso de las 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:
- La
$.Velocityfunción, que es un método de fábrica extendido desde el objeto raíz de jQuery . Este método anima elementos DOM sin procesar en lugar de elementos envueltos en jQuery . Este es el estilo empleado cuando se usa Velocity sin jQuery en la página. - La
$element.velocity()función. Este es el estilo utilizado para animar objetos de elementos de 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 de velocidad predefinido (por ejemplo, desplazarse o retroceder ) o un objeto que consta de propiedades CSS que se van a animar:
// Animate an element's width to 100px and its left property to 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 , aceleración y finalización (una función arbitraria para ejecutar una vez que la animación se ha completado):
// Animate an element's width to 100px over a 1000ms duration after pausing for a 100s delay.
$element.velocity({ width: "100px" }, { duration: 1000, delay: 100 });
Encadenamiento
La creación de una serie de llamadas de animación consecutivas en Velocity consiste en colocar las llamadas de velocity () una tras otra en el objeto de elemento jQuery de destino :
$element
.velocity({ height: 300 }, { duration: 1000 })
// Continue on to this animation once the previous one has completed
.velocity({ top: 200 }, { duration: 600 })
// And once more...
.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:
// Scroll with a duration of 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 la animación en Velocity consiste en pasar "reverse" como primer argumento de Velocity:
// Animate an element's height
$element.velocity({ height: "500px" }, { duration: 500 });
// Reverse the previous animation; animate back to the element's original height using the previous duration
$element.velocity("reverse");
El comando reverse de Velocity toma 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 });
// Extend the previous reverse call's options object with a new duration value
$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 . 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 a tiempo completo en Velocity.
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 para 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.
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 . En marzo de 2015, Peachpit publicó el libro de animación web con JavaScript de Shapiro , que enseña los principios básicos y avanzados del desarrollo de animaciones web con Velocity. A mediados de 2015, Velocity sigue siendo desarrollado y mantenido exclusivamente por Shapiro.
Además del uso de Velocity en entornos empresariales profesionales, también se usa ampliamente para la experimentación de desarrollo web y la práctica de principiantes. Los proyectos de desarrollo web de prueba de concepto construidos sobre Velocity se publican comúnmente en CodePen ( ejemplo ), un servicio líder de intercambio de código de la comunidad.
Ver también
Otras lecturas
- Animando sin jQuery
- Cómo usar Velocity para agregar animaciones fácilmente
- Animación rápida de UI usando Velocity.js