Velocity

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]​

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>

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 ).

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 });

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 });

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.

• D3.js
• Three.js
• jQuery
• Marco de JavaScript
• Biblioteca de javascript

• Animando sin jQuery
• Cómo usar Velocity para agregar animaciones fácilmente
• Animación rápida de UI usando Velocity.js

• Página web oficial

• Velocity demo gallery