Share
Dans ce tutoriel, nous allons apprendre à contrôler les animations, à la demande, à l’aide d’une méthode appelée addPause (). Prêt? Set?… Légère pause… Allons-y!
le addPause () méthode est une méthode de contrôle qui permet aux développeurs de placer un pause n'importe où sur leur calendrier. C’est beaucoup plus précis que d’utiliser une fonction de rappel qui met en pause une autre fonction (ce qui était nécessaire avant addPause () existant).
Cette méthode de contrôle peut également insérer un rappel spécial qui met en pause la lecture de la chronologie à un horodatage ou une étiquette particulière. Cela permet de s'assurer que si la tête de lecture virtuelle se déplace légèrement au-delà de la position de pause, elle sera déplacée à l'endroit précis..
La syntaxe pour addPause est simple. Tout comme nous écrivons d’autres méthodes comme .à(), la .addPause () La méthode est écrite de la même manière et accepte les arguments qui peuvent être passés entre parenthèses. Si vous n'êtes pas familier avec les méthodes, alors passez à mon autre article consacré à GreenSock qui explore les mécanismes de GSAP et j'attendrai ici votre retour..
timeline.addPause (2);
L'ajout du code ci-dessus mettra votre animation en pause exactement à la marque des 2 secondes du montage. Si vous ne savez pas ce qu'est un scénario et comment en instancier un, lisez un article précédent que j'ai écrit en commençant par TimelineMax..
Vous pouvez également insérer une pause par rapport aux étiquettes. Si vous avez lu, vous vous en souvenez peut-être, nous avons parlé des étiquettes dans l'article sur la mécanique.
Accentsconagua
timeline.addPause ("votreLabel");Maintenant, lorsque votre timeline rencontre l’étiquette «yourLabel», une pause est insérée dans «yourLabel».
Cet exemple insère une pause 3 secondes après «yourLabel» et, lorsque cette pause se produit, un appel à votre fonction aura lieu.
timeline.addPause ("votreLabel + = 3", votreFonction);Si vous souhaitez insérer une pause d’exactement 4 secondes, appelez le votre fonction, passer deux paramètres, param1 et param2 et Enfin, reliez l'étendue actuelle au rappel, vous pouvez le faire comme suit:
timeline.addPause (4, votreFonction, ["param1", "param2"], ceci);
Voici quelques exemples amusants pour vous mouiller les pieds en insérant des pauses dans un scénario. Le défi pour vous est de prendre chacune des approches que j'ai mentionnées précédemment et d'essayer de les mettre en œuvre vous-même..
Pour commencer, voici un bon exemple, basé sur une démonstration de Carl Schoof, qui explique une approche linéaire et une représentation parfaite de l’utilisation typique avec addPause () methode de CONTROLE.
Un usage typique de addPause () est de diviser une expérience linéaire en plusieurs sections:
Chaque fois que vous frappez le suivant bouton la chronologie sera jouer() jusqu'à ce qu'il frappe le prochain addPause () point.
Voici une démo que j'ai créée et qui s'appelle «Bubble Emitter» pour en expérimenter davantage avec des insertions de pause à votre guise. Cliquez dessus!
Sur la ligne 90 du panneau JavaScript, recherchez cette ligne commentée:
createBubbles (tub) .addPause (0,25);
Décommentez ceci et interagissez avec la démo pour voir le addPause la méthode a lieu pendant la lecture de l'animation. Allusion: l'animation mettra en pause 0,25 seconde dans la séquence d'animation.
J'ai également laissé des commentaires dans cette démo (grâce à l'aide de Jack Doyle) expliquant comment rendre cet effet encore plus performant.!
Cette démo SVG de Chris Gannon est un exemple impressionnant présentant le plugin DrawSVG et est idéale pour explorer addPause. Vous pouvez aussi utiliser addPause pour découvrir chacun des mouvements utilisés par Chris pour donner vie à l'effet.
Essayez d'ajouter cet extrait à la ligne 26 du panneau JavaScript de la démo..
.addPause ()
Comme je l'ai mentionné précédemment, la démo de Chris utilise le plugin drawSVG que nous avons examiné dans un article précédent. Pour ceux qui ne sont pas familiers, DrawSVG est un plugin particulièrement utile pour aider à animer les traits d'un SVG et je vous encourage fortement à l'explorer davantage lorsque vous avez le temps..
Tout simplement parce que le contenu de Chris est si bon, pourquoi ne pas ajouter quelques pauses à une autre de ses démos? Celui-ci est parfait:
Si vous bifurquez cette démo, puis effacez tout le JavaScript que Chris a écrit, vous verrez tout le SVG et comment il a utilisé le plugin DrawSVG pour créer cette séquence..
Ceci est le graphique SVGPour commencer notre expérience, ajoutez l'extrait suivant à la ligne 60 du panneau JavaScript de la démo CodePen:
tl.addPause (1.15);
Avez-vous remarqué que l'animation marquait une pause de 1,15 seconde dans le mouvement? Assez cool hein?
Maintenant pour le prochain tour. Remplacez les lignes 44 à 47 par ce qui suit pour ajouter une étiquette à la timeline:
.to (arches, 2, drawSVG: '0% -5%', facilité: Linear.easeNone). add ('archesLabel')Avec le code ci-dessus en place, ajoutez l'extrait suivant autour de la ligne 60 pour finaliser notre expérience. Observez la pause d’animation exactement à l’archeLabel que nous avons définie auparavant..
tl.addPause ('archesLabel')Après avoir couvert la méthode addPause () et joué avec de nombreuses démos, il est temps de voir si vous pouvez l'appliquer. Apprendre à créer un simple bouton bascule lecture / pause pour contrôler une animation GSAP (tweens ou timelines) peut s'avérer très pratique, surtout lorsque vous essayez d'apprendre une approche / technique particulière.
Dans la vidéo ci-dessous, Carl Schoff décrit les bases et explique comment utiliser le bouton bascule de la démo..
Dans notre prochaine aventure GreenSock, nous apprendrons ce qu'est l’interpolation de Bézier! Nous étudierons ce qu'est un chemin de Bézier et examinerons quelques exemples de démonstration montrant comment animer un chemin de Bézier. Jusqu'à la prochaine fois, bonne animation!
