TimelineMax Comprendre les mécanismes

Ce que vous allez créer

Prêt pour quelques définitions? Mécanique est définie comme une zone concernée par le comportement des objets soumis à des forces ou des déplacements, et les effets ultérieurs de ces objets sur leur environnement. UNE chronologie est une manière d'afficher une liste d'événements dans un ordre chronologique, parfois décrit comme un artefact de projet. Comblons les deux zones pour apprendre à contrôler et configurer nos animations comme si nous savions réellement ce que nous faisons..

Syntaxe

Plus de définitions à venir: le terme syntaxe renvoie directement aux règles et aux principes qui régissent la structure. Comme nous l'avons vu dans notre précédent tutoriel, la syntaxe JavaScript permettant de configurer une animation TimelineMax est la suivante:

var config = ; var tmax_tl = new TimelineMax (config);

Ici, j'ai défini un nouveau scénario en utilisant le TimelineMax () constructeur et passé le config objet comme argument. Cet argument, si vous vous en souvenez, est ce qu'on appelle un «littéral d'objet» contenant valeur clé appariements relatifs à nos paramètres de configuration. le TimelineMax () constructeur est ce qui est utilisé pour instancier une nouvelle instance TimelineMax.

Gardez à l'esprit que lorsque vous vous êtes habitué à la syntaxe, les lignes suivantes sont les mêmes. signifiant que les deux sont identiques (la dernière ligne est destinée à la commodité).

tmax_tl.add (TweenLite.to (élément, 1, gauche: 100, opacité: 0,5)); tmax_tl.to (élément, 1, gauche: 100, opacité: 0,5);

Config et Propriétés

Si vous êtes comme moi, il est peu probable que vous vous souveniez de tous les paramètres acceptés pour les options de configuration TimelineMax. Heureusement, une liste complète des options de configuration et des propriétés peut être trouvée ici pour référence.

Outre la configuration actuelle, notre chronologie dispose également de propriétés disponibles. Par exemple, si j'ai écrit ce qui suit:

var config = repeat: -1, delay: 1, repeatDelay: 0; var tmax_tl = new TimelineMax (config); console.log (tmax_tl.vars);

la console connecterait la totalité config variable (représentée par tmax_tl.vars) comme objet et permettez-moi d'inspecter chaque clé / valeur qui a été définie. Il existe toute une liste de propriétés disponibles dans votre chronologie que vous pouvez explorer ici pour une exploration plus approfondie..

Juste pour le plaisir, essayez ceci puis inspectez la sortie de votre console DevTools:

console.log (tmax_tl.timeline);

Vous devriez voir une sortie similaire à la capture d'écran suivante:

Essayez de signaler cette propriété suivante dans la console et observez votre esprit s'évanouir (la console devrait indiquer une valeur numérique):

console.log (tl.timeline._timeScale);

Paramètre de position

Le secret de la création de séquences d'animation étonnantes avec un minutage précis est la compréhension du paramètre de position. Ce paramètre ultra-flexible contrôle l’emplacement des interpolations, des libellés, des rappels, des pauses et même des timelines imbriquées, de sorte que vous pouvez tout placer, n’importe où et dans n’importe quelle séquence.!

Par exemple, si nous examinons le code suivant, vous verrez que le paramètre position est le dernier argument de la à() méthode.

tmax_tl.to (cible, durée, vars, position)

Voici un exemple de quoi tout ça a l'air. Portez une attention particulière aux commentaires expliquant comment l'argument de position aligne la séquence. Nous plaçons également les méthodes les unes après les autres: ce qui est appelé chaînage.

tmax_tl.to (élément, 1, x: 200) .to (élément, 1, y: 200, '+ = 1') // 1 seconde après la fin de la précédente () tween .to (élément, 1, rotation: 360, '- = 0.5') // 0,5 seconde avant la fin de la précédente () interpolation .to (élément, 1, échelle: 4, 6); // 6 secondes exactement à partir du début de la timeline

Vous pouvez considérer l'argument de position comme un moyen de contrôler le placement d'une interpolation sur la timeline (par défaut, c'est la fin de la timeline et elle est représentée par '+ = 0'). Utilisez un nombre pour indiquer une heure absolue en secondes. Les préfixes tels que '+ =' ou '- =' aider à compenser le point d'insertion par rapport à la fin de la chronologie. Par exemple, '+ = 2' placerait le tween deux secondes après la fin, laissant un écart de deux secondes.

Entraînez-vous au défi et donnez des instructions pour vous aider à démarrer avec GreenSock

1. Visitez la version éditable du fichier de démarrage de l'animation sur CodePen.
2. Clique le fourchette bouton pour faire votre propre copie.
3. Suivez les instructions notées dans le code.

4. Lorsque vous avez terminé, tweetez le lien CodePen vers @greensock pour qu'il vous rende encore plus spécial..

Étiquettes

Vous pouvez penser aux étiquettes comme un moyen d'insérer des marqueurs dans votre animation afin de pouvoir référencer des points exacts plus tard dans la séquence. Cela pourrait être un point où #objectX se déplace 100px du haut puis #objectY a une interaction qui se chevauchent 0,5 secondes dans le #objectX séquence.

Lorsque vous utilisez des étiquettes, veillez à utiliser une valeur de chaîne pour spécifier l'emplacement de l'interpolation et inclure l'argument de synchronisation de la position afin de contrôler le point d'exécution..

// les tweens sont insérés à et par rapport à la position d'une étiquette var tmax_tl = new TimelineMax (); tmax_tl.to ('# vert', 1, x: 750) // Ajoute le label blueGreenSpin 1 seconde après la fin de la séquence verte… add ('blueGreenSpin', '+ = 1') .to ('# blue' , 2, x: 750, rotation: 360, 'blueGreenSpin') // Ajoute une interpolation à l'étiquette blueGreenSpin .to ('# orange', 2, x: 750, rotation: 360, 'blueGreenSpin + = 0.5') ; // Insérer l'interpolation 0,5 seconde après l'étiquette blueGreenSpin

Remarque: La plupart des méthodes portent zéro comme valeur par défaut pour l'argument de position ('+ = 0').

Si vous définissez une étiquette qui n'existe pas encore, elle sera automatiquement ajoutée à la fin de la timeline avant l'insertion de l'interpolation, ce qui peut s'avérer très pratique..

Les méthodes

Les méthodes sont ce qui aide à réaliser le but de notre / nos action (s) souhaitée (s), ou en d’autres termes, l’action que nous aimerions accomplir pour chaque séquence de notre chronologie. 

Juste pour des raisons scientifiques, écrivons une méthode qui prend un seul objet avec un identifiant de #objectA et déplacez-le vers la droite de l'écran. Voici à quoi ressemblerait l'utilisation de la méthode to ():

/ * .to (cible: [Objet || Tableau], durée: Nombre, vars: Objet, position: *) * / tmax_tl.to ($ ('# objectA'), 1, gauche: '100px') ;

Le point important à noter d'après le code ci-dessus est le fait que nous aurons également besoin de l'aide de CSS (position: absolue) afin de réaliser notre demande (déplacement de l'objet). N'oubliez pas que les éléments de Web land ont une position statique, ce qui signifie que si vous souhaitez déplacer un objet en utilisant l'approche ci-dessus, vous devez vous assurer que les propriétés CSS correspondantes sont en place, sinon rien ne se passera..

Vouloir plus?

Il est grand temps que vous ayez autre chose à disséquer, vous ne pensez pas? 

La démo suivante utilise le à() méthode pour contrôler chaque cercle d'un chargeur (vous pouvez utiliser une approche plus simple, mais il y a un point à cette folie). Essayez de faire en sorte que les cercles extérieurs et les cercles du milieu soient décalés dans leur mouvement en utilisant l'argument de synchronisation de position. Le but de l'exercice est de comprendre visuellement comment le paramètre de position permet de superposer vos tweens pendant la séquence. Comme vous pouvez le voir ci-dessous .gif L’intervalle de chaque cercle s’allume exactement au même moment. Essayez de donner du piquant à cette animation en superposant la séquence comme vous l'avez vu dans le gif animé utilisé pour l'intro de ce post. Bonne chance, donnez-nous de vos nouvelles!

// Le dernier argument est Position Timing. // Utilisez cet argument pour échelonner la visibilité des cercles environnants tmax_tl.to ($ ('svg> circle: nth de type (1)')), 1, tween_options_to, 0) .to ($ ('svg> circle: nth-de-type (2) '), 1, tween_options_to, 0) .to ($ (' svg> cercle: nth-de-type (3) '), 1, tween_options_to, 0) .to ($ (' svg> cercle: n-type de (4) '), 1, tween_options_to, 0) .to ($ (' svg> cercle: n-type-de (5) '), 1, tween_options_to, 0) .to .to ($ ('svg> circle: nth-of-type (6)'), 1, tween_options_to, 0) .to ($ ('svg> circle: nth-of-type (7)'), 1, tween_options_to, 0)

Voir le stylo, le fourrer et perdre son temps avec le timing

La prochaine fois

Comme toujours, si vous souhaitez aller de l'avant dans cette aventure d'animation, n'hésitez pas à consulter la documentation GreenSock - consultez en particulier TweenLite et TweenMax. Restez à l'écoute pour le prochain épisode de cette série couvrant le monde merveilleux de l'interpolation! J'espère te revoir bientôt!