Share
Anime.js est une bibliothèque d'animation légère basée sur JavaScript. Vous pouvez l'utiliser pour animer différentes propriétés CSS, attributs SVG ou DOM sur une page Web. La bibliothèque vous permet de contrôler tous les aspects de l'animation et vous offre de nombreuses façons de spécifier les éléments que vous souhaitez cibler ou les propriétés que vous souhaitez animer..
Vous avez un contrôle total sur la séquence dans laquelle les animations sont lues ou sur la manière dont les animations des différents éléments sont synchronisées les unes par rapport aux autres. La bibliothèque prend en charge tous les navigateurs modernes, y compris IE10.+.
Dans cette série de didacticiels, vous découvrirez toutes les fonctionnalités de Anime.js afin de pouvoir les utiliser facilement dans des projets réels..
Avant de plonger dans le sujet, installons d'abord la bibliothèque. Vous pouvez utiliser soit npm ou tonnelle pour effectuer l'installation en lançant les commandes suivantes:
npm installer animejs bower installer animejs
Vous pouvez également télécharger la bibliothèque et l'inclure dans votre projet ou créer un lien direct avec la dernière version de la bibliothèque hébergée sur un CDN..
Après une installation réussie, vous êtes maintenant prêt à utiliser cette bibliothèque pour ajouter une animation intéressante à vos éléments. Nous allons commencer par les bases de la bibliothèque, en nous concentrant sur un domaine particulier à la fois..
Pour créer des animations avec Anime.js, vous devez appeler le anime () fonction et transmettez-lui un objet avec des paires clé-valeur qui spécifient, entre autres, les éléments et propriétés cibles que vous souhaitez animer. Vous pouvez utiliser le des cibles clé pour indiquer à Anime.js quels éléments vous souhaitez animer. Cette clé peut accepter des valeurs dans différents formats.
Sélecteurs CSS: Vous pouvez transmettre un ou plusieurs sélecteurs CSS en tant que valeur du des cibles clé.
var blue = anime (cibles: '.blue', translationY: 200); var redBlue = anime (cibles: '.red, .blue', translateY: 200); var even = anime (cibles: '.square: nth-child (pair)', translateY: 200); var notRed = anime (cibles: '.square: not (.red)', translateY: 200);
Dans le premier cas, Anime.js animera tous les éléments avec un bleu classe. Dans le second cas, Anime.js animera tous les éléments avec soit le rouge ou bleu classe. Dans le troisième cas, Anime.js animera tous les enfants, même avec un carré classe. Dans le dernier cas, Anime.js animera tous les éléments avec un carré classe qui n'a pas rouge classe.
Nœud DOM ou NodeList: Vous pouvez également utiliser un nœud DOM ou une NodeList comme valeur pour le des cibles clé. Voici quelques exemples de réglage de la des cibles en tant que noeud DOM.
Accentsconagua
var special = anime (cibles: document.getElementById ('special'), translateY: 200); var blue = anime (cibles: document.querySelector ('. blue'), translateY: 200); var redBlue = anime (cibles: document.querySelectorAll ('. red, .blue'), translateY: 200); var even = anime (cibles: document.querySelectorAll ('. square: nth-enfant (pair)'), translateY: 200); var notRed = anime (cibles: document.querySelectorAll ('. square: not (.red)'), translateY: 200);Dans le premier cas, j'ai utilisé le getElementById () fonction pour obtenir notre élément spécial. le querySelector () fonction est utilisée pour obtenir le premier élément qui a la classe bleue. le querySelectorAll () fonction est utilisée pour obtenir tous les éléments du document qui correspondent au groupe de sélecteurs spécifié.
Il existe également de nombreuses autres fonctions que vous pouvez utiliser pour sélectionner les éléments cibles que vous souhaitez animer. Par exemple, vous pouvez obtenir tous les éléments avec un nom de classe donné en utilisant le getElementsByClassName () une fonction. De même, vous pouvez également obtenir tous les éléments avec un nom de tag donné en utilisant le getElementsByTagName () une fonction.
Toute fonction qui retourne un nœud DOM ou une NodeList peut être utilisée pour définir la valeur du des cibles clé dans Anime.js.
Objet: Vous pouvez également utiliser un objet JavaScript comme valeur pour le des cibles clé. La clé de cet objet est utilisée en tant qu'identificateur et la valeur en tant que nombre à animer..
Vous pouvez ensuite afficher l'animation dans un autre élément HTML à l'aide de JavaScript supplémentaire. Voici le code pour animer les valeurs de deux clés différentes d'un objet.
var filesScanned = nombre: 0, infecté: 0; var scanning = anime (cibles: filesScANNED, nombre: 1000, infectés: 8, round: 1, update: function () var scanCount = document.querySelector ('. scan-count'); scanCount.innerHTML = filesScanned.count ; var infectCount = document.querySelector ('. infect-count'); infectCount.innerHTML = filesScanned.infected;);Le code ci-dessus animera les fichiers numérisés de 0 à 1 000 et les fichiers infectés de 0 à 8. N'oubliez pas que vous ne pouvez animer des valeurs numériques que de cette façon. Essayer d’animer une clé de «AAA» à «BOY» provoquera une erreur.
Nous avons également utilisé une fonction de rappel pour le mettre à jour touche qui est appelée sur chaque image pendant que l'animation est en cours d'exécution. Nous l'avons utilisé ici pour mettre à jour le nombre de fichiers analysés et infectés. Cependant, vous pouvez aller plus loin et montrer aux utilisateurs un message d'erreur lorsque le nombre de fichiers infectés dépasse un certain seuil..
Tableau: La possibilité de spécifier un tableau JavaScript en tant que cible est pratique lorsque vous devez animer un groupe d’éléments appartenant à différentes catégories. Par exemple, si vous souhaitez animer un nœud DOM, un objet et de nombreux autres éléments basés sur des sélecteurs CSS, vous pouvez le faire facilement en les plaçant tous dans un tableau, puis en spécifiant ce tableau comme valeur pour le paramètre. des cibles clé. L'exemple suivant devrait le rendre plus clair:
var multipleAnimations = anime (cibles: [document.querySelectorAll ('. bleu'), '.red, #special'], translateY: 250);Maintenant que vous savez comment spécifier les différents éléments que vous souhaitez animer, il est temps de connaître toutes les propriétés et tous les attributs pouvant être animés à l'aide de la bibliothèque..
Propriétés CSSAnime.js vous permet d’animer de nombreuses propriétés CSS, telles que la largeur, la hauteur et la couleur, pour différents éléments cibles. Les valeurs finales de différentes propriétés pouvant être animées, telles que couleur d'arrière-plan et largeur de bordure, sont spécifiées à l'aide d'une version en camel de cette propriété. Par conséquent, la couleur de fond devient Couleur de fond, et la largeur de la bordure devient largeur de la bordure. L'extrait de code suivant montre comment animer la position à gauche et la couleur d'arrière-plan d'un élément cible dans Anime.js..
var animateLeft = anime (cibles: '.square', gauche: '50% '); var animateBackground = anime (cibles: '.square', backgroundColor: '# f96');
Les propriétés peuvent accepter toutes sortes de valeurs qu’elles auraient acceptées lorsqu’elles étaient utilisées dans des CSS normales. Par exemple, la propriété la gauche pourrait être réglé sur 50vh, 500px, ou 25em. Vous pouvez également spécifier la valeur sous forme de nombre nu. Dans ce cas, le nombre serait converti en une valeur de pixel. De même, la couleur de fond peut être spécifiée en tant que valeur de couleur hexadécimale, RVB ou HSL.
Transformations CSS: Vous pouvez également animer différentes propriétés de transformation CSS à l’aide de Anime.js. La translation le long des axes x et y peut être obtenue en utilisant le translateX et traduction Propriétés. De même, il est possible de redimensionner, incliner ou faire pivoter un élément le long d’un axe spécifique en utilisant échelle, fausser et tourner propriété correspondant à cet axe spécifique.
Vous pouvez spécifier différents angles en termes ou en degrés ou en termes de tour. La valeur de 1 tour est égale à 360 °. Cela peut faciliter le calcul lorsque vous savez à quel point vous voulez activer les éléments en termes de rotations complètes. L'exemple suivant montre comment animer la mise à l'échelle, la translation ou la rotation d'un élément individuellement ou simultanément..
var animateScaling = anime (cibles: '.square', scale: 0.8); var animateTranslation = anime (cibles: '.square', translateX: window.innerWidth * 0.8); var animateRotation = anime (cibles: '.square', rotation: '1turn'); var animateAll = anime (cibles: '.square', échelle: 0.8, translateX: window.innerWidth * 0.8, rotation: '1turn');
Attributs SVG: Il est possible d’animer les attributs de différents éléments SVG en utilisant Anime.js. La seule condition est que la valeur de ces attributs soit numérique. Cette capacité à animer différents attributs ouvre la possibilité de créer des effets vraiment sympas. Puisque vous commencez tout juste à apprendre sur Anime.js, nous allons garder les exemples de ce tutoriel très basiques..
Au fur et à mesure que vous avancez, vous apprendrez à créer des animations plus complexes. Voici le code pour animer le cx, cy et largeur du trait attributs d'un cercle. Tout comme les propriétés CSS, vous devez utiliser une version de Camel Case de largeur du trait pour que le code fonctionne.
var animateX = anime (cibles: '.circle', cx: window.innerWidth * 0.6); var animateStrokeWidth = anime (cibles: '.circle', strokeWidth: '25');
Attributs DOM: Vous pouvez également animer des attributs DOM numériques, tout comme vous avez animé les attributs SVG. L'animation d'un attribut DOM peut s'avérer utile dans l'élément de progression HTML5. Cet élément a deux attributs, valeur et max. Dans notre exemple, nous allons animer l'attribut value pour afficher la progression de notre processus de transfert de fichier. Voici le code pour animer le valeur attribut.
var animateProgress = anime (cibles: 'progression', valeur: 100, easing: 'linéaire');
Dans ce didacticiel, vous avez découvert toutes les méthodes de sélection des éléments cibles dans Anime.js et comment animer différentes propriétés et attributs CSS qui leur sont associés. À ce stade, nous ne contrôlons rien lié à l'animation réelle.
JavaScript est sans doute la langue du web. Bien sûr, ce n’est pas sans apprentissage, et comme vous pouvez le constater, il existe de nombreux cadres et bibliothèques pour vous occuper. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..
Dans le prochain tutoriel de la série, vous apprendrez à contrôler l'accélération, le retard et la durée de l'animation pour différentes propriétés en tant que groupe ainsi qu'individuellement. Vous apprendrez ensuite comment contrôler tous ces paramètres d'animation pour des éléments individuels..
.
