Velocity
| Velocity | ||
|---|---|---|
| Información general | ||
| Tipo de programa | software libre | |
| Desarrollador | Julian Shapiro | |
| Modelo de desarrollo | fuente abierta | |
| Licencia | Licencia MIT | |
| Información técnica | ||
| Programado en | JavaScript | |
| Plataformas admitidas | Red de computadoras | |
| Versiones | ||
| Última versión estable | 2.0.610 de abril de 2020 | |
| Enlaces | ||
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
[editar]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
[editar]incluyendo la biblioteca
[editar]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
[editar]Velocity tiene dos estilos de uso:
- El
$.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 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
[editar]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
[editar]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
[editar]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
[editar]Otras lecturas
[editar]- Animando sin jQuery
- Cómo usar Velocity para agregar animaciones fácilmente
- Animación rápida de UI usando Velocity.js
Enlaces externos
[editar]Referencias
[editar]- ↑ «JavaScript Animation». 15 de junio de 2015.
- ↑ «Major Contributor To Open Source Technologies, Julian Shapiro, Pulls Back the Curtains on SAAS Usage». Forbes.com. Consultado el 20 de enero de 2016.
- ↑ «Velocity.js for designers». Studio Wolf. Consultado el 20 de enero de 2016.
- ↑ a b «CSS vs. JS Animation: Which is Faster?». 28 de abril de 2014.
- ↑ «Velocity, the Powerhouse of JavaScript Libraries». 11 de octubre de 2017.
- ↑ Julian Shapiro (16 de junio de 2014). «Incredibly Fast UI Animation Using Velocity.js». Sitepoint.com. Consultado el 20 de enero de 2016.
- ↑ «Search · stars:>1 · GitHub». Github.com. Consultado el 20 de enero de 2016.
- ↑ «Shortlist The Net Awards 2015 Celebrating the best in web design and development». Thenetawards.com. Consultado el 20 de enero de 2016.
- ↑ «JavaScript Animation». 15 de junio de 2015.
- ↑ «Animating Without jQuery – Smashing Magazine». Smashingmagazine.com. 4 de septiembre de 2014. Consultado el 20 de enero de 2016.
- ↑ «The Simple Intro to SVG Animation». 31 de julio de 2014.
- ↑ «Use Velocity.js to apply slick app-like motion effects | JavaScript | Web Designer». 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.
- ↑ Team, Awwwards. «Interview with Julian Shapiro». Awwwards.com. Consultado el 20 de enero de 2016.
- ↑ Shapiro, Julian (21 de mayo de 2014). «Treat Open Source Like a Startup ★ Mozilla Hacks – the Web developer blog». Hacks.mozilla.org. Consultado el 20 de enero de 2016.
- ↑ Greg Brockman (6 de junio de 2014). «Open-Source Retreat grantees». Stripe.com. Consultado el 20 de enero de 2016.
- ↑ Aurelio De Rosa (23 de junio de 2014). «Easily Improving jQuery Animations». Sitepoint.com. Consultado el 20 de enero de 2016.
- ↑ Remix this video (6 de septiembre de 2014). «Velocity Motion Designer: Overview». YouTube. Consultado el 20 de enero de 2016.
- ↑ «Contributors to julianshapiro/Velocity». GitHub.