Share
Qu'est-ce que TimelineMax? Qu'est-ce qui le rend différent des autres bibliothèques de la plate-forme d'animation GreenSock (GSAP)? Pourquoi aurais-je besoin de TimelineMax sur TimelineLite? Comment puis-je comprendre les paramètres de TimelineMax? Si vous vous posez l'une de ces questions, vous êtes au bon endroit..
Bienvenue dans l’abécédaire de la série Tuts + traitant de TimelineMax de GreenSock. Préparez-vous pour une série explosive et déconcertante qui vous aidera à devenir un pro de l'animation.
TimelineMax est un outil de séquencement JavaScript qui sert de conteneur pour les tweens et autres timelines, ce qui facilite leur contrôle dans son ensemble et la gestion précise de leur minutage. TimelineMax fournit des méthodes pour permettre l'accès à plusieurs aspects de votre animation. Il peut également ajuster de manière dynamique la vitesse d'une timeline au moment de l'exécution, et bien plus encore.
Remarque: interpolation est une abréviation de entre-deux; créer des cadres entre les étatsune séquence d'animation.
TimelineMax étend TimelineLite, offrant exactement la même fonctionnalité avec des fonctionnalités supplémentaires (mais non essentielles) telles que:
Accentsconagua
répéterDélai de répétitionyo-yocurrentLabel ()tweenTo ()tweenFromTo ()getLabelAfter ()getLabelBefore ()soit actif() TimelineMax vous permet, en tant qu'auteur, de superposer autant que vous le souhaitez vos interpolations sur la timeline. En tant qu’animateur professionnel, vous avez un contrôle total sur l’emplacement des tweens sur la timeline. La plupart des autres outils d’animation peuvent principalement exécuter une opération de base. l'un après l'autre séquençage, mais ne permet pas le chevauchement des tweens. Imaginez ajouter une interpolation qui déplace un objet et vous souhaitez qu'il commence à s'estomper 0,5 seconde avant la fin de cette interpolation? Avec TimelineMax, il est extrêmement propre et extrêmement robuste pour rendre tout cela possible.
Pour plus de commodité, les principaux plugins tels que CSSPlugin (pour fournir les préfixes de vendeurs CSS), RoundPropsPlugin, DirectionalRotationPlugin, AttrPlugin et BezierPlugin sont tous inclus avec TweenMax et TimelineMax. Puisque TweenMax vous fournira TimelineMax et tous les autres produits énumérés précédemment, GreenSock recommande d’utiliser TweenMax pour la plupart des cas d’utilisation. Le chargement de TweenMax est simplement plus pratique car un fichier contient à peu près tout ce dont vous avez besoin.
Pour commencer, vous devez obtenir le script TweenMax et le charger dans votre document HTML. avant à votre script d'animation personnalisé. Heureusement pour nous, CDNJS en a une copie disponible (il y en a aussi une sur GitHub).
TimelineMax permet des options de configuration personnalisées via l'utilisation d'un littéral d'objet. Explorons à quoi ça ressemble.
TimelineMax (vars: )
La partie que vous voyez en utilisant le accolades est le littéral d'objet qui tiendra notre configuration. Cela signifie que nous pouvons insérer valeur clé appariements au sein de ces accolades pour définir le comportement de notre chronologie. La ligne entière TimelineMax (vars: ) est ce que les documents TimelineMax appellent le «constructeur».
Voici la configuration complète de TimelineMax avec chaque clé en fonction de sa valeur par défaut. Placez ce droit en haut de votre fichier d'animation JavaScript (que nous avons appelé «my-timelinemax-animation.js» dans notre exemple ci-dessus). Nous ne listons ici que la totalité de la configuration afin que vous puissiez voir les différentes options de configuration offertes par TimelineMax. Généralement, votre objet de configuration ne contiendra que les propriétés nécessaires aux ajustements. Vous pouvez en savoir plus sur ces options dans la documentation TimelineMax.
var tmax_options = retard: 0, en pause: false, onComplete: function () console.log ('l'animation est terminée'); , onCompleteScope: , tweens: [], décalés: 0, aligner: 'normal', useFrames: false, onStart: function () console.log ('appelé au démarrage'); , onStartScope: , onUpdate: function () console.log ('on update appelé'); , onUpdateScope: , onRepeat: function () console.log ('une répétition appelée'); , onRepeatScope: , onReverseComplete: function () console.log ('on reverse complete'); , onReverseCompleteScope: , autoRemoveChildren: false, smoothChildTiming: false, repeat: 0, repeatDelay: 0, yoyo: false, onCompleteParams: [], onReverseCompleteParams: [], onStartParams: [], onSupdateParam: ]; Maintenant que la configuration est en place et que vous comprenez ses options, vous pouvez passer votre configuration littérale d'objet personnalisé au TimelineMax () constructeur, ajoutez donc ce qui suit au bas de votre fichier:
var tmax_tl = new TimelineMax (tmax_options);
Les tweens sont créés à l'aide de méthodes telles que à(), de() et staggerFrom () Juste pour en nommer quelques-uns. Comme vous l'avez vu précédemment, nous avons pris notre objet options et l'avons passé en tant qu'argument au constructeur TimelineMax. Nous allons maintenant devoir déplacer quelques objets pour nous mouiller les pieds. Par souci de simplicité, déplaçons deux cercles à partir de la gauche et du haut de la fenêtre:
Vérifier la JS onglet dans l'exemple ci-dessus pour voir comment l'effet est obtenu. Comme indiqué précédemment, j'ai configuré le constructeur TimelineMax pour la scène ci-dessus et transmis le littéral d'objet contenant les options du scénario:
var tl = new TimelineMax (tmax_options)
Chaque cercle contient un identifiant pour moi de les référencer par:
var tl = new TimelineMax (tmax_options), circle_top = $ ('# cercle-haut'), cercle_bottom = $ ('# cercle-bas'); et puis le à() méthode est utilisée afin de contrôler l'interpolation.
tl.to (circle_top, 1, left: 100) .to (circle_bottom, 1, top: 100);
Dans à() nous disons effectivement «utilisez l'élément qui a été passé comme premier argument et déplacez-le de 100px à gauche. Puis utilisez le à() méthode enchaînée après notre première à() méthode pour faire la même chose, mais déplacez cet élément du top 100px. ”
Notez que le cercle se déplaçant du haut est déclenché une fois que le cercle se déplaçant de la gauche a terminé son mouvement (tween). Nous apprendrons dans les prochains tutoriels comment contrôler des éléments à des moments différents et plus rapidement sur la timeline en utilisant le position paramètre.
Si vous souhaitez aller de l'avant dans cette aventure d'animation, n'hésitez pas à vous rendre à la documentation de démarrage de GreenSock. Restez à l'écoute pour la suite de la série de cette aventure d'animation où je couvre des éléments tels que les libellés, les décalages, les pauses, les arguments et comment apprendre à ajuster les options à onze. Jusqu'à la prochaine fois!
