Share
Après avoir terminé les trois premiers tutoriels de la série, vous devriez maintenant être très à l'aise avec beaucoup de fonctionnalités d'Anime.js. Le premier tutoriel vous a montré comment sélectionner des éléments cibles. Dans le deuxième tutoriel, vous avez découvert différents types de paramètres pouvant être utilisés pour contrôler avec précision le délai et la durée des animations de différents éléments. Le troisième tutoriel s'est concentré sur l'apprentissage d'un meilleur contrôle des valeurs d'une propriété unique au cours de l'animation..
Dans ce didacticiel, vous découvrirez différents rappels pouvant être utilisés pour exécuter une fonction en fonction de la progression de l'animation. Presque tous les exemples des tutoriels précédents utilisaient des propriétés CSS pour montrer le fonctionnement de différentes méthodes et paramètres. Cela vous aurait peut-être donné l’idée que la bibliothèque est plus adaptée à l’animation des propriétés CSS. Cette fois, nous aurons une section dédiée à la création d’animations intéressantes liées au SVG dans Anime.js.
Comme je l'ai mentionné dans l'introduction, vous pouvez utiliser des rappels pour exécuter des fonctions en fonction de la progression de l'animation. Il y a quatre callbacks différents: commencer, courir, mettre à jour, et Achevée. Chaque fonction de rappel est déclenchée à un moment précis et chacune accepte un objet d'animation comme argument..
le commencer() La fonction est appelée quand l'animation commence réellement. Cela signifie que si une animation a un délai de 800 ms, commencer() sera appelé qu'après ce délai. Vous pouvez vérifier si une animation a commencé à jouer ou non avec animationName.begin, qui reviendra vrai ou faux respectivement.
le courir callback peut être utilisé pour exécuter une fonction dans chaque image après le début de la lecture d'une animation. Si vous souhaitez exécuter une fonction dans chaque image dès le début de l'animation, indépendamment de sa retard, vous devriez utiliser le mettre à jour rappel à la place.
le Achevée rappel est similaire à commencer à l'exception du fait qu'il s'appelle une fois l'animation terminée. Juste comme commencer, vous pouvez utiliser animationName.complete pour vérifier si une animation a fini de jouer ou non.
Vous avez déjà vu dans le premier tutoriel comment utiliser le mettre à jour rappel lors de l’animation des valeurs numériques d’un objet JavaScript. Dans ce tutoriel, nous allons modifier cet exemple et voir comment utiliser tous ces rappels pour fournir plus d'informations à l'utilisateur..
Accentsconagua
var filesScanned = nombre: 0, infecté: 0; var scanCount = document.querySelector (". scan-count"); var infecté = document.querySelector (". infect-count"); var scanning = anime (cibles: filesScanned, lecture automatique: false, nombre: 100, infectés: 8, délai: 1000, durée: 2000, accélération: "linear", tour: 1, mise à jour: function (anim) if (anim .heure actuelle < 1000) document.querySelector(".update-cb").innerHTML = "Creating an Index… "; , begin: function() document.querySelector(".begin-cb").innerHTML = "Starting the Scan… "; , run: function() scanCount.innerHTML = filesScanned.count; infected.innerHTML = filesScanned.infected; , complete: function() document.querySelector(".complete-cb").innerHTML = "Scan Complete… "; );J'ai volontairement ajouté un peu de retard dans cette animation afin que nous puissions remarquer la différence dans le timing d'exécution des différents rappels. le mettre à jour callback commence à exécuter sa fonction dès que l'instance d'animation commence.
L’animation réelle commence à jouer après 1000 ms, et c’est alors que le commencer La fonction affiche le message "Démarrage de la numérisation…" à l'utilisateur. le courir La fonction commence également à s'exécuter simultanément et met à jour les valeurs numériques de l'objet après chaque image. Une fois l'animation terminée, le Achevée callback affiche un message "Scan Complete…" à l'utilisateur.
Les fonctions d'accélération peuvent être utilisées pour contrôler la manière dont la valeur d'une propriété passe de sa valeur initiale à sa valeur finale. Ces fonctions d'accélération peuvent être spécifiées à l'aide du paramètre d'accélération, qui accepte les chaînes ainsi que les coordonnées personnalisées de la courbe de Bézier (sous la forme d'un tableau)..
Il y a 31 différentes fonctions d'accélération intégrées. L'un d'eux est linéaire, et les 30 autres consistent en dix variations différentes de facilité dans, easyOut, et easyInOut. Il y a trois équations d'assouplissement élastique appelées facilitéInélastique, easyOutElastic, et aisance en sortieElastique. Vous pouvez contrôler leur élasticité en utilisant le élasticité paramètre. La valeur de élasticité peut être n'importe où entre 0 et 1000.
Facilité dans les équations accélèrent le changement de valeur de la propriété à partir de zéro. Cela signifie que le changement de valeur serait lent au début et très rapide à la fin. Le taux de changement est zéro au début et maximum à la fin. EaseOut équations décélérer le changement de valeur de la propriété à partir du changement de taux maximum.
Cela signifie que le changement de valeur serait très rapide au début et très lent à la fin.. EaseInOut les équations accélèrent le changement de taux au début et le ralentissent à la fin. Cela signifie que le taux de changement sera lent au début et à la fin et qu'il sera le plus rapide au milieu de l'animation. La démo suivante montre la différence de taux de changement pour chacune de ces fonctions d’assouplissement..
Vous pouvez également ajouter vos propres fonctions d’accélération personnalisées à la liste intégrée à l’aide de anime.easings. Voici un exemple de création de fonctions d'accélération personnalisées.
anime.easings ['tanCube'] = fonction (t) return Math.pow (Math.tan (t * Math.PI / 4), 3); anime.easings ['tanSqr'] = fonction (t) return Math.pow (Math.tan (t * Math.PI / 4), 2); var tanCubeSequence = anime (cibles: '.tan-cube', translateX: '75vw', durée: 2000, facilité: 'tanCube', autoplay: false); var tanSqrSequence = anime (cibles: '.tan-sqr', translateX: '75vw', durée: 2000, facilité: 'tanSqr', autoplay: false);
Toutes les animations liées aux mouvements que nous avons créées jusqu'à présent déplaçaient les éléments cibles en lignes droites. Il est également possible dans Anime.js de déplacer un élément le long d’un chemin SVG complexe comportant de nombreuses courbes. Vous pouvez contrôler à la fois la position et l'angle des éléments animés sur le tracé. Pour déplacer un élément à la coordonnée x du chemin, vous pouvez utiliser chemin (x). De même, un élément peut être déplacé en fonction de la coordonnée y du chemin à l'aide de chemin (y).
À moins que le tracé ne soit une ligne droite, il formera presque toujours un angle par rapport à la ligne de base horizontale. Si vous faites pivoter un élément non circulaire, il semblera plus naturel que l'élément suive l'angle de la trajectoire. Vous pouvez le faire en réglant la tourner propriété égale à chemin ('angle'). Voici le code qui anime quatre éléments avec différentes valeurs d'accélération le long d'un chemin SVG.
var path = anime.path ('path'); var easings = ['linear', 'aisanceInCubic', 'aisanceoutCubic', 'aisanceInOutCubic']; var motionPath = anime (cibles: '.square', translateX: chemin ('x'), translateY: chemin ('y'), rotation: chemin ('angle'), easing: fonction (el, i) return Accélérations [i];, durée: 10000, boucle: vrai);Vous pouvez voir dans la démo suivante que le carré rouge avec aisance en cube L'accélération est la plus lente au début et la plus rapide à la fin. De même, le carré orange avec easyOutCubic est le plus rapide au début et le plus lent à la fin.
Vous pouvez également animer le morphing de différentes formes SVG en utilisant Anime.js. La seule condition est que les deux formes aient le même nombre de points. Cela signifie que vous ne pouvez transformer des triangles en d'autres triangles et des quadrilatères en d'autres quadrilatères. Essayer de se transformer entre un nombre inégal de points de polygones entraînera un changement de forme abrupt. Voici un exemple de morphing d'une forme triangulaire.
var morphing = anime (cibles: 'polygone', points: [valeur: '143 31 21 196 286 223', valeur: '243 31 21 196 286 223'], valeur: '243 31 121 196 286 223 ', valeur:' 243 31 121 196 386 223 ', valeur:' 543 31 121 196 386 223 ']], assouplissement:' linéaire ', durée: 4000, sens:' alternatif ', boucle: vrai );
Un autre effet intéressant que vous pouvez créer avec SVG est le dessin au trait. Tout ce que vous avez à faire est de donner à Anime.js le chemin que vous souhaitez utiliser pour le tracé de lignes et d’autres paramètres permettant de contrôler sa durée, son délai ou son assouplissement. Dans la démo suivante, j'ai utilisé le Achevée callback pour remplir le dessin au trait de l'icône d'ancrage Font Awesome avec une couleur jaune.
var lineDrawing = anime (cibles: 'chemin', strokeDashoffset: [anime.setDashoffset, 0], accélération: 'aisanceDeCubique', durée: 4000, complète: function (anim) document.querySelector ('chemin'). setAttribute ( "remplir", "jaune"););En combinant la connaissance de tous les concepts que vous avez appris jusqu'à présent, vous pouvez créer des dessins au trait plus complexes avec un contrôle bien meilleur sur la façon dont ils sont dessinés. Voici un exemple dans lequel j'ai écrit mon propre nom en SVG.
var letterTime = 2000; var lineDrawing = anime (cibles: "chemin", strokeDashoffset: [anime.setDashoffset, 0], accélération: "aisanceDeCubique", durée: letterTime, retard: fonction (el, i) retour letterTime * i;, commencer: fonction (anim) var lettres = document.querySelectorAll ("chemin"), i; pour (i = 0; i < letters.length; ++i) letters[i].setAttribute("stroke", "black"); letters[i].setAttribute("fill", "none"); , update: function(anim) if (anim.currentTime >= letterTime) document.querySelector (". letter-m"). setAttribute ("fill", "# e91e63"); if (anim.currentTime> = 2 * letterTime) document.querySelector (". letter-o"). setAttribute ("fill", "# 3F51B5"); if (anim.currentTime> = 3 * letterTime) document.querySelector (". letter-n"). setAttribute ("fill", "# 8BC34A"); if (anim.currentTime> = 4 * letterTime) document.querySelector (". letter-t"). setAttribute ("fill", "# FF5722"); if (anim.currentTime> = 5 * letterTime) document.querySelector (". letter-y"). setAttribute ("fill", "# 795548"); , autoplay: false); Je commence par assigner la valeur 2000 à la variable lettreheure. C’est le temps que je veux que Anime.js prenne pendant qu’il dessine chaque lettre de mon nom. le retard Cette propriété utilise le paramètre index basé sur la fonction pour définir un paramètre approprié. retard valeur avec l'aide du lettreheure variable.
L'index de la première lettre "M" est zéro, Anime.js commence donc à le dessiner immédiatement. La lettre "O" a un délai de 2 000 ms car c'est le temps nécessaire pour dessiner complètement la lettre "M".
À l'intérieur de commencer rappel, j'ai mis la accident vasculaire cérébral valeur de toutes les lettres à noir et leur remplir valeurs à aucun. De cette façon, nous pouvons effacer toutes les valeurs de couleur appliquées à l'intérieur du mettre à jour rappel afin que les lettres puissent revenir à leur état initial lorsqu’elles sont exécutées dans plusieurs boucles. Essayez de cliquer sur le Écris le nom bouton dans la démo suivante pour voir le code en action.
Dans ce tutoriel, vous avez découvert différentes fonctions de rappel qui peuvent être utilisées pour effectuer des tâches telles que la mise à jour du DOM ou la modification de la valeur d'un attribut en fonction de la progression de l'animation. Vous avez également découvert différentes fonctions d’assouplissement et comment en créer une. La dernière section du didacticiel s'est concentrée sur la création d'animations basées sur SVG.
Après avoir terminé les quatre tutoriels de la série, vous devriez maintenant avoir suffisamment de connaissances sur Anime.js pour créer des effets intéressants pour votre prochain projet. Si vous avez des questions concernant ce tutoriel, merci de me le faire savoir dans les commentaires..
