Comment utiliser Velocity pour ajouter facilement des animations

Le mouvement attire notre attention; c'est un mécanisme de survie inné qui a bien servi nos ancêtres pendant des milliers d'années. Cela leur a permis de détecter des prédateurs qui se faufilaient sur eux. De nos jours, c'est surtout un instinct résiduel que nous, concepteurs Web, utilisons pour attirer l'attention et l'intérêt des utilisateurs sur nos sites.

L'ajout d'animations et de transitions telles que les fondus d'opacité, les changements de couleur, la mise à l'échelle et le mouvement 3D transforme un collage statique de mots et d'images par ailleurs plat en un site dynamique et intéressant. Vous devez absolument ajouter des animations à la conception de votre site Web - lorsqu'elles sont appliquées avec parcimonie et avec un but précis, elles les améliorent.

Mais comment pouvez-vous faire cela exactement? Il existe deux façons d'ajouter une animation à un site, avec CSS et avec JavaScript.



Le CSS est parfait pour les petits sites qui ne nécessitent pas beaucoup de codage personnalisé et pour les interactions utilisateur simples, comme de petits changements stylistiques pour les états de survol des éléments. (Ou si vous n'avez tout simplement aucune envie de faire de la programmation!)

Pour tout ce qui va au-delà de ces simples interactions, la meilleure façon d'ajouter une animation à un site est d'utiliser JavaScript, et la meilleure bibliothèque d'animation moderne pour ce faire est Velocity.js .

Cet article est unique en ce sens qu'il adoptera une approche novatrice pour apprendre l'animation Web. Si vous êtes un concepteur Web qui n'a pas beaucoup utilisé JavaScript mais qui a toujours voulu la puissance de l'animation avancée, continuez à lire.

Qu'est-ce que Velocity.js?

Cliquez sur l

Cliquez sur l'image pour voir la démo Velocity.js

Velocity est une bibliothèque gratuite et légère qui vous permet d'ajouter facilement des animations à vos sites, allant des animations les plus simples aux plus complexes. Velocity surpasse toutes les autres bibliothèques d'animation, est simple à utiliser et imite la syntaxe de la bibliothèque JavaScript la plus populaire, jQuery. Il est également bien pris en charge par tous les navigateurs et appareils, et a été adopté par de grandes entreprises comme Uber et Whatsapp .

La vélocité est mieux utilisée avec jQuery, mais ce n'est pas obligatoire. Qu'est-ce que jQuery? jQuery est une bibliothèque JavaScript conçue pour simplifier la sélection et la manipulation d'éléments HTML. Il est pratiquement devenu supposé que jQuery est utilisé sur la plupart des projets Web - c'est aussi populaire.

jQuery a ses propres outils d'animation exposés via sa fonction «animer», mais en raison de la monolithique de jQuery, il produit des animations saccadées. Ce n'est pas non plus aussi riche en fonctionnalités que Velocity. Velocity vous permet de tirer parti de la puissance de sélection d'éléments de jQuery et de passer outre les lacunes de l'animation de jQuery. La différence, en particulier pour établir un flux de travail d'animation facile, est la nuit et le jour.

Velocity offre de grands avantages par rapport aux animations basées sur CSS et jQuery, que je couvrirai après avoir passé en revue les bases de son utilisation. Pour vous donner un aperçu de ce qui vous attend, ces avantages incluent des animations de défilement, des inversions d'animation, des mouvements basés sur la physique et le chaînage d'animations. Des trucs plutôt sympas.

Pour l'instant, commençons à l'utiliser.

Comment utiliser Velocity?

La première étape consiste à télécharger le code depuis le Site Web de Velocity (copiez-collez le code dans un éditeur de texte et enregistrez-le sous 'velocity.min.js'). Vous pouvez également le récupérer directement dans votre HTML (comme indiqué dans l'exemple de code ci-dessous).

point grand angle et appareil photo de prise de vue

Dans tous les cas, incluez le fichier Velocity à l'aide d'un balise avant la balise de fermeture du corps de votre document, et avant le fichier JavaScript dans lequel vous coderez ('script.js'):

… …

Noter : Si vous utilisez jQuery, assurez-vous d'inclure jQuery avant Velocity. Velocity s'adapte compte tenu de la présence de jQuery.

Une fois le code inclus dans une balise de script, vous pouvez commencer à utiliser le rapidité() fonction dans votre fichier 'script.js'.

Comment exécuter cette fonction?

Vous utilisez la fonction Velocity sur un élément jQuery (en supposant que vous utilisez jQuery). Par exemple, disons que vous souhaitez animer le paragraphe suivant:

This is an example element you can select and animate.

Nous pouvons le sélectionner avec jQuery avec l'ID du paragraphe ('exemple'), et le stocker dans une variable:

var $element = $('#example');

Cela crée un objet élément jQuery nommé $ element qui représente ce paragraphe. Nous pouvons maintenant exécuter des appels de fonction de vitesse sur cet élément en utilisant cette variable $ element:

$element.velocity( … some command here … );

D'accord, alors quels sont les arguments qu'il accepte?

Arguments

Velocity accepte un ou plusieurs arguments. Le premier argument est obligatoire. Il peut s'agir du nom de l'un des commandes prédéfinies (exemples à suivre), ou un objet de différentes propriétés CSS qui devrait être animé.

// Object defining the animation's final values of width (50%), and left (500px) $element.velocity({ width: '500px', left: '500px' });

Remarque: l'ordre des propriétés dans un objet de données n'est pas pertinent. Tout dans l'animation se produit exactement au même moment.

Le deuxième argument, qui est facultatif, est également un objet. Il contient des options d'animation telles que la durée, l'accélération et le délai, et complet (une fonction qui s'exécute une fois l'animation terminée):

// Animates an element to a width of 300px over 500ms after a 1000ms delay. $element.velocity({ width: '300px' }, { duration 500, delay: 1000 });

Contrairement à CSS, où vous pouvez passer plusieurs valeurs numériques dans une propriété CSS comme margin ( marge: '10px 5px 8px 12px' ), avec Velocity, vous devez utiliser une seule valeur par propriété CSS. Par conséquent, vous devez définir chaque composant séparément: {marginRight: '10px', marginTop: '5px'…} .

Cela peut sembler un handicap, mais c'est en fait un avantage. Non seulement cela est plus lisible et explicite, mais cela vous permet également de définir des types d'accélération individuels pour chaque sous-propriété, plutôt que d'être obligé d'avoir un type d'accélération pour toutes. Cela vous donne un contrôle direct sur plus de morceaux de votre animation!

Remarque: les propriétés CSS contenant plusieurs mots ( marge gauche et Couleur de l'arrière plan ) ne peut pas être coupé, mais doit être écrit en utilisant camelcase ( marginLeft et Couleur de l'arrière plan ).

Valeurs de la propriété

Si vous ne fournissez pas de type d'unité, Velocity en prendra un pour vous (normalement ms, px et deg). Néanmoins, je recommanderais d'être explicite afin que vous puissiez discerner les types d'unités en un coup d'œil chaque fois que vous ou un collègue regardez en arrière dans votre code. Si la valeur contient autre chose qu'une valeur numérique (% ou lettres), vous devez utiliser des guillemets.

// Okay, only numerical value $element.velocity('scroll', { duration: 500 }) // Okay, uses quotes $element.velocity('scroll', { duration: '500ms' }) // Not okay, contains 'ms' without quotes $element.velocity('scroll', { duration: 500ms })

Qu'est-ce que cette activité «d'assouplissement»?

J'ai utilisé le mot «assouplissement» à quelques reprises jusqu'à présent, et vous ne savez peut-être pas ce que cela signifie. Les accélérations déterminent la vitesse d'une animation à différentes étapes tout au long de sa durée. Par exemple, un assouplissement «facilité» s'accélère progressivement au début de l'animation, puis reste constant jusqu'à ce qu'il se termine. Une accélération de «détente» commence à une vitesse linéaire et ralentit progressivement vers la fin de l'animation. Un assouplissement «linéaire» a une vitesse constante tout au long de la durée, et semble très discordant et robotique.

De manière pratique, vous spécifiez l'accélération avec l'option `` accélération '':

// Animate an element to a width of 500px with an easing of 'ease-in-out' $element.velocity({ width: 500 }, { easing: 'ease-in-out' });

Les assouplissements deviennent beaucoup plus compliqués, mais par souci de concision, je vais m'arrêter ici. Lire Velocity's Documentation pour plus d'informations.

Chaînage

La création d'une série d'animations séquentielles en CSS nécessite le calcul manuel des délais et des durées de synchronisation pour chaque animation individuelle. Et si l'une de ces étapes doit être modifiée, toutes les animations procédant à cette étape doivent également être recalculées et modifiées.

Velocity permet un enchaînement simple des animations les unes après les autres, simplement en appelant la fonction de vitesse l'une après l'autre:

$element // Animates the element to a height of 300px over 1000ms .velocity({ height: 300 }, { duration: 1000 }) // Animates the element to a left position of 200px over 600ms after the width is finished animating .velocity({ top: 200 }, { duration: 600 }) // Fades the element over 200ms out after it is done moving .velocity({ opacity: 0 }, { duration: 200 });

Voici un exemple de chaînage Codepen.

Remarque: vous remarquerez que seul le dernier appel de vitesse a un ';' à la fin de la ligne. C'est extrêmement important. Pour enchaîner des animations, tous les appels de «vitesse» doivent être effectués ensemble sur le même élément, et vous ne pouvez pas terminer la ligne de commande en utilisant un point-virgule. JavaScript ignore les espaces, donc ces appels ressembleraient à ceci: $ element.velocity (...). velocity (...). velocity (...) .

Retour aux fonctionnalités

Cela devrait vous donner un aperçu de Velocity et de son utilisation. Maintenant que vous ne serez pas submergé, revenons à la description des avantages intéressants qu'il offre sur CSS et jQuery.

Défilement de page

Les sites d'une seule page sont désormais à la mode dans la conception Web, où un site est divisé en sections plutôt qu'en pages séparées. En conséquence, cliquer sur un lien de navigation fait simplement défiler la page jusqu'à la section de page appropriée. Sans animation, c'est un saut instantané et discordant, ne fournissant à l'utilisateur aucun contexte quant à l'emplacement de ce contenu par rapport au reste de la page.

CSS ne peut pas effectuer de défilement, c'est donc l'une des utilisations les plus populaires des animations JS.

Pour effectuer un défilement avec Velocity, exécutez simplement la fonction 'velocity' avec la commande 'scroll' sur l'élément vers lequel vous souhaitez faire défiler:

$element.velocity('scroll', { duration: 1200 });

Cet appel fait défiler le navigateur jusqu'au bord supérieur de l'élément sélectionné sur 1 200 ms. Avec jQuery seul, ce serait une fonction multiligne beaucoup plus compliquée. Je vous épargnerai le mal de tête induit par la confusion en ne l'incluant pas ici.

Voici un exemple de défilement Codepen.

Inversion de l'animation

Dans jQuery, pour revenir à l'état d'origine de l'élément avant le début de l'animation, vous devez animer manuellement ses propriétés à leurs valeurs d'origine. Par exemple:

Avec jQuery:

// Animate a 100px tall element to a height of 200px over 500ms $element.animate({ height: '200px' }, { duration: 500 }); // Animate the element back to its original height value of 100px over 500ms $element.animate({ height: '100px' }, { duration: 500 });

Avec Velocity, cependant, il vous suffit d'exécuter la commande inverse:

// Animate a 100px tall element to a height of 200px over 500ms $element.velocity({ height: '200px' }, { duration: 500 }); // Reverse previous animation – animate back to the original height of 100px over 500ms $element.velocity('reverse');

Ces appels précédents inversent l'animation à l'état d'origine de l'élément sélectionné avant l'animation - inutile de spécifier les valeurs manuellement.

Voici un exemple Codepen d'inversion d'animation.

Mouvement basé sur la physique

Le monde réel n'est ni parfait ni fluide, ni le mouvement du monde réel. Il a des pièces rapides, des pièces lentes, du poids, de l'élan et du frottement. Contrairement à CSS, vous pouvez imiter la physique du monde réel dans vos animations basées sur JS, ce qui rend les choses plus naturelles. Le mouvement linéaire semble robotique (sans vie) et discordant.

Pour permettre un mouvement réaliste, Velocity accepte un assouplissement basé sur la physique des ressorts. Ce type d'accélération prend un tableau d'une valeur de tension (par défaut: 500) et d'une valeur de friction (par défaut: 20) comme paramètre (voir Documentation sur la vitesse pour plus d'informations).

// Animate the selected element to a height of 200px over the default 400ms using a spring physics easing. Spring tension is set to 250, and friction is set to 10. $element.velocity({ height: '200px', { easing: [ 250, 10 ] });

Une valeur de tension élevée augmente la vitesse totale et le rebond de l'animation. Une valeur de friction élevée entraîne une décélération plus rapide de l'animation, ce qui réduit sa vitesse vers la fin de l'animation. Ajuster ces valeurs rendra chaque animation unique, réaliste et intéressante.

L'exemple d'animation ci-dessus serait lent et raide (faible tension) et ne décélérerait que lentement tout au long de la durée (faible frottement).

Voici un exemple Codepen utilisant la physique des ressorts.

Grande finale

D'accord, vous avez peut-être besoin de quelques exemples d'animations réelles et de commandes de vitesse. Commençons par animer la largeur et la hauteur d'une boîte, combinant à la fois le chaînage et l'inversion d'animation, et utilisons l'élément de boîte suivant:

Avec le style CSS suivant:

#box { width: 100px; // Set box width to 100px height: 100px; // Set box height to 100px border: solid 1px #000; // Give the box a 1px solid black border to make it visible }

Vous pouvez animer sa largeur, suivie de sa hauteur, puis revenir à ses dimensions d'origine avec les appels de vitesse suivants:

// Select the box element by ID $('#box') // Animate to a width of 200px over 500ms .velocity({ width: 200px }, { duration: 500 }) // Animate to a height of 50px over 300ms directly after width stops animating .velocity({ height: 50px }, { duration: 300 }) // Animate back to original width and height after height stops animating .velocity('reverse');

Et maintenant, ajoutons l'une des fonctionnalités les plus utiles, mais faciles à ajouter: créer des liens de navigation qui descendent jusqu'à la section de page appropriée.

Supposons que vous ayez la barre de navigation et les sections de page suivantes:

Product ... About … ... ...

Nous voulons ajouter l'animation de défilement à chaque événement de clic de lien de navigation (classe de 'nav-link'), ce qui fera défiler la page jusqu'à la section de page appropriée dont l'ID est contenu dans le href du lien.

// Attach a click event to the 'nav-link' class $('.nav-link').on('click', function() { // Grab the target page section's ID from the link's (contained within 'this') href attribute var scrollTargetID = $(this).attr('href'); // Select this element by ID using jQuery var $scrollTarget = $(scrollTargetID); // Add the scroll animation to the element $scrollTarget.velocity('scroll', { duration: 1000 }); });

Il existe quelques exemples d'utilisation de la vélocité sur des éléments de page réels, pour plus d'exemples, consultez Documentation de Velocity .

Maintenant, rendez le web dynamique

Les animations attirent notre attention et insufflent de la vie à une page par ailleurs statique, et JavaScript est le meilleur moyen de les ajouter à vos projets - et Velocity est la meilleure bibliothèque d'animation JavaScript disponible. C'est pourquoi j'ai écrit cet article.

L'amélioration et l'expansion des animations CSS sont limitées par les mises à jour peu fréquentes de la norme CSS. Avec JavaScript, la communauté open-source produit des dizaines de nouvelles bibliothèques, plugins et mises à jour chaque jour - élargissant les horizons de vos animations grâce à l'invention de nouveaux outils.

Velocity a beaucoup plus de fonctionnalités que celles présentées ici, et je vous encourage à découvrir ses Documentation . Maintenant, allez expérimenter!

Mots : Neal O'Grady

Neal O'Grady est un développeur, concepteur et écrivain indépendant irlandais et canadien. Il a écrit sur des sujets de conception pour le Blog Webflow , et sur des pensées aléatoires sur son blog personnel .

Comme ça? Lisez-les!