Share
KUTE.js est un moteur d'animation basé sur JavaScript qui met l'accent sur les performances et l'efficacité de la mémoire tout en animant différents éléments d'une page Web. J'ai déjà écrit une série sur l'utilisation d'Anime.js pour créer des animations basées sur JavaScript. Cette fois, nous allons en apprendre davantage sur KUTE.js et comment l’utiliser pour animer des propriétés CSS, SVG et des éléments de texte, entre autres choses..
Avant de plonger dans quelques exemples, installons d'abord la bibliothèque. KUTE.js possède un moteur principal, puis des plug-ins permettant d'animer la valeur de différentes propriétés CSS, d'attributs SVG ou de texte. Vous pouvez relier directement à la bibliothèque à partir de CDN populaires tels que cdnjs et jsDelivr.
Vous pouvez également installer KUTE.js à l'aide de NPM ou de Bower à l'aide des commandes suivantes:
npm installer --save kute.js bower installer --save kute.js
Une fois que vous avez inclus la bibliothèque dans vos projets, vous pouvez commencer à créer vos propres séquences d'animation..
Lors de la création de votre animation à l'aide de KUTE.js, vous devez définir des objets d'interpolation. Ces objets d'interpolation fournissent toutes les informations relatives à l'animation pour un ou plusieurs éléments donnés. Cela inclut l'élément lui-même, les propriétés que vous souhaitez animer, la durée de l'animation et d'autres attributs tels que le nombre de répétitions, le délai ou le décalage..
Vous pouvez utiliser le .à() méthode ou la .de à() méthode afin d’animer un ensemble de propriétés CSS d’une valeur à une autre. le .à() method anime les propriétés à partir de leur valeur par défaut ou de leur valeur calculée / actuelle en une valeur finale fournie. Dans le cas du .de à() méthode, vous devez fournir les valeurs d’animation de début et de fin.
le .à() Cette méthode est utile lorsque vous ne connaissez pas la valeur actuelle ou par défaut de la propriété que vous souhaitez animer. Un inconvénient majeur de cette méthode est que la bibliothèque doit calculer elle-même la valeur actuelle de toutes les propriétés. Cela entraîne un délai de quelques millisecondes après votre appel. .début() pour commencer l'animation.
le .de à() Cette méthode vous permet de spécifier vous-même les valeurs d’animation de début et de fin. Cela peut améliorer marginalement les performances des animations. Vous pouvez maintenant également spécifier vous-même les unités pour les valeurs de début et de fin et éviter toute surprise au cours de l'animation. Un inconvénient de l'utilisation .de à() est que vous ne pourrez pas empiler plusieurs propriétés de transformation sur des interpolations en chaîne. Dans ce cas, vous devrez utiliser le .à() méthode.
Rappelez-vous que les deux .de à() et .à() sont destinés à être utilisés lorsque vous animez des éléments individuels. Si vous souhaitez animer plusieurs éléments à la fois, vous devrez utiliser soit .touspour () ou .allFromTo (). Ces méthodes fonctionnent comme leurs homologues à élément unique et héritent de tous leurs attributs. Ils ont aussi un extra décalage attribut qui détermine le délai entre le début de l'animation pour différents éléments. Ce décalage est défini en millisecondes.
Voici un exemple qui anime l'opacité de trois boîtes différentes en séquence.
Le code JavaScript suivant est utilisé pour créer la séquence d'animation ci-dessus:
Accentsconagua
var theBoxes = document.querySelectorAll (". box"); var startButton = document.querySelector (". start"); var animateOpacity = KUTE.allFromTo (theBoxes, opacity: 1, opacity: 0.1, offset: 700); startButton.addEventListener ("clic", fonction () animateOpacity.start ();, false);Toutes les cases ci-dessus ont un boîte classe qui a été utilisée pour tous les sélectionner en utilisant le querySelectorAll () méthode. le allFromTo () La méthode dans KUTE.js est utilisée pour animer l'opacité de ces cases de 1 à 0,1 avec un décalage de 700 millisecondes. Comme vous pouvez le constater, l'objet interpolation ne lance pas l'animation en tant que telle. Vous devez appeler le début() méthode pour démarrer l'animation.
Dans la section précédente, nous avons utilisé le début() méthode afin de commencer nos animations. La bibliothèque KUTE.js fournit également quelques autres méthodes pouvant être utilisées pour contrôler la lecture de l’animation..
Par exemple, vous pouvez arrêter toute animation en cours à l’aide du bouton Arrêtez() méthode. N'oubliez pas que vous pouvez utiliser cette méthode pour arrêter l'animation uniquement des objets d'interpolation stockés dans une variable. L'animation de tout objet interpolé créé à la volée ne peut pas être arrêtée avec cette méthode..
Vous avez également la possibilité de mettre en pause une animation à l'aide du bouton pause() méthode. Ceci est utile lorsque vous souhaitez reprendre l'animation ultérieurement. Vous pouvez soit utiliser CV() ou jouer() pour reprendre une animation en pause.
L'exemple suivant est une version mise à jour de la démo précédente avec les quatre méthodes ajoutées..
Voici le code JavaScript nécessaire pour ajouter les fonctionnalités de démarrage, d'arrêt, de lecture et de pause.
var theBoxes = document.querySelectorAll (". box"); var startButton = document.querySelector (". start"); var stopButton = document.querySelector (". stop"); var pauseButton = document.querySelector (". pause"); var resumeButton = document.querySelector (". resume"); var animateOpacity = KUTE.allFromTo (theBoxes, opacity: 1, opacity: 0.1, offset: 700, durée: 2000); startButton.addEventListener ("clic", fonction () animateOpacity.start ();, false); stopButton.addEventListener ("click", function () animateOpacity.stop ();, false); pauseButton.addEventListener ("clic", fonction () animateOpacity.pause ();, false); resumeButton.addEventListener ("clic", fonction () animateOpacity.resume ();, false); J'ai changé la durée de l'animation à 2 000 millisecondes. Cela nous laisse suffisamment de temps pour appuyer sur différents boutons et voir comment ils affectent la lecture de l'animation..
Vous pouvez utiliser le chaîne() méthode pour enchaîner différents tweens. Une fois que différents tweens ont été enchaînés, ils appellent le début() méthode sur d'autres tweens après que leur propre animation est terminée.
De cette façon, vous pourrez jouer différentes animations dans une séquence. Vous pouvez chaîner différents tweens les uns avec les autres afin de les jouer en boucle. L'exemple suivant devrait préciser:
var animateOpacity = KUTE.allFromTo (theBoxes, opacity: 1, opacity: 0.1, offset: 100, durée: 800); var animateRotation = KUTE.allFromTo (theBoxes, rotation: 0, rotation: 360, offset: 250, durée: 800); opacityButton.addEventListener ("clic", fonction () animateOpacity.start ();, false); rotateButton.addEventListener ("clic", fonction () animateRotation.start ();, false); chainButton.addEventListener ("clic", fonction () animateOpacity.chain (animateRotation); animateOpacity.start ();, false); loopButton.addEventListener ("click", function () animateOpacity.chain (animateRotation); animateRotation.chain (animateOpacity); animateOpacity.start ();, false);Nous avions déjà une interpolation pour animer l'opacité. Nous avons maintenant ajouté un autre qui anime la rotation de nos boîtes. Les deux premiers boutons animent l'opacité et la rotation un à la fois. Le troisième bouton déclenche le chaînage de animateOpacity avec animateRotation.
Le chaînage lui-même ne démarre pas l'animation, nous utilisons donc également le début() méthode pour démarrer l'animation d'opacité. Le dernier bouton permet d’enchaîner les tweens. Cette fois, les animations continuent à jouer indéfiniment une fois qu'elles ont été démarrées. Voici une démo de CodePen qui montre tout le code ci-dessus en action:
Pour bien comprendre le fonctionnement du chaînage, vous devez appuyer sur les boutons dans un ordre spécifique. Clique sur le Animer l'opacité Cliquez d'abord sur le bouton et vous verrez que l'animation d'opacité n'est jouée qu'une fois, puis rien ne se passe. Maintenant, appuyez sur le Animer la rotation bouton et vous verrez que les boîtes tournent une fois et puis rien d'autre ne se passe.
Après cela, appuyez sur le bouton Animations en chaîne Cliquez sur le bouton et vous verrez que l’animation d’opacité est lue en premier et que, une fois l’itération terminée, l’animation de rotation commence à être jouée toute seule. Ceci est dû au fait que l'animation de rotation est maintenant liée à l'animation d'opacité..
Maintenant, appuyez sur le Animer l'opacité Cliquez à nouveau sur le bouton et vous verrez que l’opacité et la rotation sont animées en séquence. C’est parce qu’ils avaient déjà été enchaînés après avoir cliqué sur Animations en chaîne.
À ce stade, en appuyant sur le Animer la rotation Le bouton n'animera que la rotation. La raison de ce comportement est que nous avons uniquement chaîné l'animation de rotation à l'animation d'opacité. Cela signifie que les boîtes seront pivotées chaque fois que l'opacité est animée, mais une animation de rotation ne signifie pas que l'opacité sera également animée..
Enfin, vous pouvez cliquer sur le bouton Jouer dans une boucle bouton. Cela enchaînera les deux animations, et une fois que cela se produira, les animations continueront à jouer dans une boucle indéfinie. En effet, la fin d'une animation déclenche le début de l'autre animation..
Dans ce didacticiel d’introduction à KUTE.js, vous avez découvert les bases de la bibliothèque. Nous avons commencé par l’installation, puis différentes méthodes pouvant être utilisées pour créer des objets d’interpolation..
Vous avez également appris à contrôler la lecture d’une animation et à enchaîner plusieurs tweens. Une fois que vous aurez parfaitement compris le chaînage, vous pourrez créer des animations intéressantes en utilisant cette bibliothèque..
Dans le prochain tutoriel de la série, vous apprendrez à animer différents types de propriétés CSS à l’aide de KUTE.js..
