Velocity (bibliothèque JavaScript)

Velocity est une bibliothèque JavaScript multiplateforme conçue pour simplifier la création de scripts côté client pour l'animation de sites Web. Velocity est un logiciel libre et open source sous licence MIT . C'est le moteur d'animation Web open source le plus populaire.

La syntaxe de Velocity est conçue pour faciliter la création d'animations complexes pour les éléments HTML et SVG . En plus de ses avantages en termes de flux de travail, Velocity offre des performances d'animation compétitives par rapport à l'animation basée sur CSS . Velocity atteint ses performances en conservant un cache interne des états d'animation et en minimisant le « thrashing de mise en page », le comportement indésirable que subissent les navigateurs Web lors de la mise à jour visuelle à un rythme rapide. Dans l'ensemble, ses avantages en termes de flux de travail et de performances permettent à Velocity d'être utilisé pour une programmation d'animation sophistiquée qui peut être intégrée dans des applications Web et mobiles. Sa large prise en charge des navigateurs et des appareils le rend idéal pour les grandes distributions d'entreprise qui doivent prendre en charge des appareils à faible puissance.

Velocity est utilisé pour alimenter les interfaces utilisateur de nombreux sites Web notables, notamment Uber , Samsung , WhatsApp , Tumblr , HTC , Mazda et Microsoft Windows . C'est l'un des projets les plus appréciés sur le service d'hébergement de code GitHub . En 2015, Velocity a été nominé pour le projet Open Source de l'année par The Net Awards .

Les fonctionnalités de Velocity incluent :

• Fenêtre du navigateur et défilement des éléments
• Indépendance du framework jQuery
• Inversion d'animation (possibilité d'annuler l'animation précédente) et boucle d'animation
• Animation d'éléments SVG
• Animation de couleurs RVB et hexadécimales
• Animation de la propriété de transformation de CSS
• Effets d'animation pré-créés via le pack d'interface utilisateur de Velocity
• Mouvement basé sur la physique via le type de relâchement du ressort
• Promesses d'intégration

Velocity prend en charge tous les principaux navigateurs de bureau ( Firefox , Google Chrome et Safari ), ainsi que les systèmes d'exploitation mobiles iOS et Android . Son support remonte jusqu'à Internet Explorer 8 et Android 2.3.

La bibliothèque Velocity est un fichier JavaScript unique contenant toutes ses fonctions principales. Elle peut être incluse dans une page Web en créant un lien vers une copie locale ou vers l'une des nombreuses copies disponibles sur les serveurs publics, notamment jsDelivr de MaxCDN ou cdnjs de Cloudflare .

< script 
src = "velocity.min.js" ></ script >

Il est également possible d'inclure Velocity directement à partir des réseaux de diffusion de contenu. (L'attribut integrity est utilisé pour Subresource Integrity .) Il est recommandé de toujours utiliser HTTPS pour les ressources, mais cela peut être remplacé par //l'utilisation d' URL relatives au protocole .

< script 
src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js" 
integrity = "sha384-fcLDUAwcSMMfmpKMJ0dO2//SL2WJ5/kkyz/yvgtmLXBEp3GdqrQF9ahRerhdLXn+" 
crossorigin = "anonyme" ></ script >

Velocity a deux styles d'utilisation :

• La $.Velocityfonction, qui est une méthode d'usine étendue à partir de l' objet racine jQuery . Cette méthode anime les éléments DOM bruts au lieu des éléments enveloppés dans jQuery . Il s'agit du style utilisé lors de l'utilisation de Velocity sans jQuery sur la page.
• La $element.velocity()fonction. Il s'agit du style utilisé pour animer les objets d'éléments jQuery lorsque jQuery est présent sur la page.

Les appels d'animation dans Velocity consistent à fournir les éléments souhaités à animer, une carte de propriétés d'animation pour spécifier les propriétés CSS à animer et un objet d'options facultatif pour spécifier les paramètres d'animation (par exemple la durée ).

Velocity accepte un ou plusieurs arguments. Le premier argument, qui est obligatoire, peut être soit le nom d'une commande Velocity prédéfinie (par exemple scroll ou reverse ) soit un objet composé de propriétés CSS à animer :

// Animer la largeur d'un élément à 100px et sa propriété gauche à 200px 
$element . velocity ({ width : "100px" , left : "200px" });

Le deuxième argument, facultatif, est un objet. Il permet de spécifier les options d'animation telles que duration , easing et complete (une fonction arbitraire à exécuter une fois l'animation terminée) :

// Animez la largeur d'un élément à 100 px sur une durée de 1 000 ms après une pause de 100 s. 
$element . velocity ({ width : "100px" }, { duration : 1000 , delay : 100 });

Créer une série d'appels d'animation consécutifs dans Velocity consiste à placer les appels velocity() dos à dos sur l' objet élément jQuery cible :

$element 
. velocity ({ height : 300 }, { duration : 1000 }) // Continuez avec cette animation une fois la précédente terminée . velocity ({ top : 200 }, { duration : 600 }) // Et encore une fois... . velocity ({ opacity : 0 }, { duration : 200 });

Le défilement dans Velocity consiste à passer « scroll » comme premier argument de Velocity — à la place de la carte de propriétés CSS typique :

// Défilement d'une durée de 750 ms 
$element . velocity ( "scroll" , { duration : 750 });

Le navigateur défilera ensuite jusqu'au bord supérieur de l'élément sur lequel Velocity a été invoqué.

L'inversion d'animation dans Velocity consiste à passer « reverse » comme premier argument de Velocity :

// Animer la hauteur d'un élément 
$element . velocity ({ height : "500px" }, { duration : 500 }); // Inverser l'animation précédente ; animer jusqu'à la hauteur d'origine de l'élément en utilisant la durée précédente $element . velocity ( "reverse" );

La commande reverse de Velocity utilise par défaut les options d'animation utilisées lors de l'appel précédent. La transmission d'un nouvel objet d'options étend le précédent :

$element . velocity ({ height : "500px" }, { duration : 500 }); // Étendez l'objet d'options de l'appel reverse précédent avec une nouvelle valeur de durée $element . velocity ( "reverse" , { duration : 1000 });

Velocity a été développé par Julian Shapiro pour remédier au manque de bibliothèques d'animation JavaScript performantes et orientées concepteur . Stripe , une société de technologie Internet populaire axée sur les développeurs Web, a parrainé Shapiro avec une subvention pour aider à fournir les ressources financières nécessaires pour continuer le développement à plein temps sur Velocity.

Les hautes performances du moteur d'animation interne de Velocity ont contribué à repopulariser l'animation Web basée sur JavaScript, qui était auparavant tombée en disgrâce au profit de l'animation basée sur CSS en raison de ses avantages en termes de vitesse par rapport aux anciennes bibliothèques JavaScript qui manquaient de concentration sur l'animation.

En septembre 2014, Shapiro a publié Velocity Motion Designer , un outil de conception d'animations sur des sites Web de production en direct qui permettait l'exportation en temps réel du code d'animation généré pour une utilisation ultérieure dans un IDE . En mars 2015, Peachpit a publié le livre Web Animation using JavaScript de Shapiro , qui enseigne à la fois les principes de base et avancés du développement d'animations Web à l'aide de Velocity. À la mi-2015, Velocity continue d'être développé et maintenu exclusivement par Shapiro.

Outre son utilisation dans les environnements professionnels d'entreprise, Velocity est également largement utilisé pour l'expérimentation du développement Web et la pratique pour les débutants. Les projets de développement Web de preuve de concept construits sur Velocity sont généralement publiés sur CodePen (exemple), un service de partage de code communautaire de premier plan.