Worldlex Wiki La syntaxe de Velocity est conçue pour simplifier la création d'animations complexes pour les éléments HTML et SVG . Outre ses avantages en termes de flux de travail, Velocity offre des performances d'animation comparables à celles des animations CSS . Velocity atteint ces performances en maintenant un cache interne des états d'animation et en minimisant le « layout thrashing », un comportement indésirable des navigateurs web lors de mises à jour visuelles rapides. En résumé, ses avantages en termes de flux de travail et de performances permettent d'utiliser Velocity pour la programmation d'animations sophistiquées, intégrables aux applications web et mobiles. Sa large compatibilité avec les navigateurs et les appareils en fait une solution idéale pour les déploiements en entreprise de grande envergure devant prendre en charge les appareils peu puissants.
Velocity est utilisé pour les interfaces utilisateur de nombreux sites web de renom, tels que Uber , Samsung , WhatsApp , Tumblr , HTC , Mazda et Microsoft Windows . C'est l'un des projets les plus populaires sur la plateforme d'hébergement de code GitHub . En 2015, Velocity a été nominé pour le prix du Projet Open Source de l'année aux Net Awards .
jQueryPrise en charge du navigateur
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 . Sa compatibilité remonte jusqu'à Internet Explorer 8 et Android 2.3.
Usage
Y compris la bibliothèque
La bibliothèque Velocity est un unique fichier JavaScript contenant toutes ses fonctions principales. Elle peut être intégrée à une page web en créant un lien vers une copie locale ou vers l'une des nombreuses copies disponibles sur des serveurs publics, notamment jsDelivr de MaxCDN ou cdnjs de Cloudflare .
Il est également possible d'inclure Velocity directement depuis les réseaux de diffusion de contenu. (L'attribut integrity est utilisé pour l'intégrité des sous-ressources .) Il est recommandé d'utiliser systématiquement HTTPS pour les ressources, mais il est possible //d'utiliser des URL relatives au protocole .
Styles d'utilisation
Velocity propose deux modes d'utilisation :
- Cette
$.Velocityfonction, qui est une méthode de fabrique héritant de l' objet racine jQuery , anime les éléments DOM bruts plutôt que les éléments encapsulés par jQuery . C'est le style utilisé lorsque Velocity est utilisé sans jQuery sur la page. - La
$element.velocity()fonction. Il s'agit du style utilisé pour animer les objets éléments jQuery lorsque jQuery est présent sur la page.
Les appels d'animation dans Velocity consistent à fournir le ou les éléments à 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 ).
Arguments
Velocity accepte un ou plusieurs arguments. Le premier argument, obligatoire, peut être soit le nom d'une commande Velocity prédéfinie (par exemple, scroll ou reverse ), soit un objet contenant des propriétés CSS à animer :
Le deuxième argument, facultatif, est un objet. Il sert à spécifier les options d'animation telles que la durée , l'interpolation et la fonction `complete` (une fonction arbitraire à exécuter une fois l'animation terminée).
Enchaînement
Créer une série d'appels d'animation consécutifs dans Velocity consiste à placer des appels velocity() les uns après les autres sur l' objet élément jQuery cible :
Le navigateur fera ensuite défiler vers le bas 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 :
La commande « reverse » de Velocity utilise par défaut les options d'animation de l'appel précédent. Fournir un nouvel objet d'options étend le précédent :
Histoire
Velocity a été développé par Julian Shapiro pour pallier le manque de bibliothèques d'animation JavaScript performantes et adaptées aux concepteurs . Stripe , une entreprise technologique Internet populaire axée sur les développeurs web , a financé Shapiro par une subvention afin de lui fournir les ressources financières nécessaires pour poursuivre le développement à temps plein de Velocity.
Les hautes performances du moteur d'animation interne de Velocity ont contribué à repopulariser l'animation web basée sur JavaScript, qui avait auparavant perdu la faveur de l'animation basée sur CSS en raison de ses avantages en termes de vitesse par rapport aux anciennes bibliothèques JavaScript qui ne se concentraient pas sur l'animation.
En septembre 2014, Shapiro a lancé Velocity Motion Designer , un outil de conception d'animations pour sites web en production, permettant l'exportation en temps réel du code d'animation généré pour une utilisation ultérieure dans un EDI . En mars 2015, Peachpit a publié l'ouvrage de Shapiro, *Web Animation using JavaScript* , qui enseigne les principes de base et avancés du développement d'animations web avec Velocity. À la mi-2015, Velocity était toujours développé et maintenu exclusivement par Shapiro. du développement web par les débutants. Les projets de développement web de démonstration réalisés avec Velocity sont fréquemment publiés sur CodePen ( exemple ), une plateforme de partage de code communautaire de premier plan.