Rendez votre site Web interactif et amusant avec Velocity.js (pas de jQuery)

Cet article présente Velocity.js, une bibliothèque d'animation JavaScript haute performance de Julian Shapiro, démontrant ses capacités sans compter sur jQuery. Il s'agit du troisième d'une série explorant les bibliothèques dynamiques de l'animation DOM au-delà de CSS. Les articles précédents couvraient Anime.js et Kute.js.

Merci spécial à James Hibbard et aux développeurs de Velocity, ainsi que des contributeurs communautaires, pour leur soutien.

Caractéristiques clés de Velocity.js:

Velocity.js est un outil robuste pour l'animation des propriétés CSS, des transformations, des SVG et des événements de défilement, le tout dans JavaScript de vanille. Son API flexible, similaire à JQuery's $.animate(), propose des fonctionnalités comme le boucle, les retards, les options d'assouplissement (y compris la physique du printemps) et le contrôle de la durée. Forcefeeding permet une définition précise des valeurs de démarrage et de fin d'animation. De plus, il fournit un contrôle sur les séquences d'animation (arrêt, pause, inversion, reprise). Le pack d'interface utilisateur de vitesse étend les fonctionnalités avec des effets prédéfinis et la création d'animation personnalisée.

Éléments animéables:

Velocity.js anime:

• Propriétés CSS numériques (y compris les couleurs)
• transforme
• Propriétés SVG
• Événements de défilement (page ou conteneur)
• Fade et diapositives d'animations

Remarque: il anime généralement une propriété numérique à la fois. Pour les traductions multi-axes (par exemple, translateX et translateY), utilisez des propriétés distinctes. Forcefeeding fournit une exception, permettant une spécification de valeur simultanée.

Options:

L'objet Options de Velocity offre une flexibilité:

• duration (millisecondes)
• easing (jQuery UI, CSS3 Essings, Bezier Curves, Spring Physics)
• loop (nombre de répétitions ou true pour infini)
• delay (millisecondes)

Reportez-vous à la documentation de vitesse pour une liste d'options complètes.

Syntaxe:

Bien que Velocity.js partage l'API de JQuery, ce qui facilite la transition des utilisateurs de JQuery (remplacer $.animate() par $.velocity()), il fonctionne parfaitement sans jQuery. La syntaxe de base est:

<code class="language-javascript">Velocity(element, {property: value}, {option: optionValue});</code>

Animations de chaînage:

<code class="language-javascript">Velocity(element1, {property: value}, {option: optionValue});
Velocity(element1, {property: value}, {option: optionValue});</code>

Animer plusieurs éléments:

const elements = document.querySelectorAll('<div>');
Velocity(elements, {property: value}, {option: optionValue});
<p> Les unités (<code>px, %, rem, em, vw/vh, deg) sont prises en charge.  La vitesse déduit des unités si elle est omise (généralement px).  Les mathématiques relatives ( =, -=, *=, /=) sont également prises en charge. 

  Forcefeeding:  
 Au lieu de compter sur Velocity.js pour récupérer les valeurs initiales, utilisez la force de force: 
<code class="language-javascript">Velocity(element, {property: value}, {option: optionValue});</code>
 Le tableau contient: valeur finale, assouplissement facultatif et valeur de démarrage. 
  Contrôle d'animation:  
 Contrôler les animations en utilisant: 

 Velocity(elem, 'stop'); 
 Velocity(elem, 'pause'); 
 Velocity(elem, 'reverse'); 
 Velocity(elem, 'resume'); 

 L'article fournit ensuite plusieurs démos (balle qui tombe, balle rebondissante contrôlée par les bouton, animation de défilement, animation SVG et utilisation du pack d'interface utilisateur Velocity) illustrant ces concepts.  Le code de chaque démo est disponible via des liens de codepen dans l'article.  Enfin, l'article se termine par une section FAQ portant sur les questions d'utilisation de la vitesse commune.js, y compris son utilisation sans jQuery.  L'article comprend également une section sur les ressources supplémentaires pour un apprentissage ultérieur.