Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. TimelineMax
Webdesign

TimelineMax: Une introduction

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called The Beginner’s Guide to TimelineMax.
TimelineMax: Understanding the Mechanics

French (Français) translation by Federicco Ancie (you can also view the original English article)

Qu'est-ce que TimelineMax? Qu'est-ce qui le différencie des autres bibliothèques GreenSock Animation Platform (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 à l’introduction à la série Tuts+ consacrée à TimelineMax de GreenSock. Préparez-vous à une série explosive qui vous aidera à devenir un pro de l'animation.

Qu'est-ce que TimelineMax?

TimelineMax est un outil de séquencement JavaScript qui sert de conteneur pour les tweens et autres calendriers, facilitant ainsi leur contrôle global et la gestion précise de leur timing. TimelineMax fournit des méthodes permettant d'accéder à plusieurs aspects de votre animation. Il peut également ajuster dynamiquement la vitesse de la timeline au moment de l’exécution, et bien plus encore.

Note: l'interpolation est une abréviation de inbetweening; créer des images entre les états dans une séquence d'animation.

TimelineMax étend TimelineLite, offrant exactement les mêmes fonctionnalités avec des fonctionnalités supplémentaires (mais non essentielles) telles que:

  • repeat
  • repeatDelay
  • yoyo
  • currentLabel()
  • tweenTo()
  • tweenFromTo()
  • getLabelAfter()
  • getLabelBefore()
  • et getActive()

Avantages et fonctionnalités

TimelineMax vous permet, en tant qu'auteur, de faire en sorte que les tweens se chevauchent autant que vous le souhaitez. En tant que professionnel de l'animation, vous avez un contrôle complet sur l'emplacement des tweens sur la timeline. La plupart des autres outils d’animation peuvent principalement exécuter un séquençage de base unique, mais ne peuvent pas se chevaucher. Imaginez-vous d’ajouter une interpolation qui déplace un objet et que vous souhaitiez qu’il commence à s’éteindre 0,5 seconde avant la fin de cette interpolation? Avec TimelineMax, c’est beaucoup plus propre et extrêmement robuste pour que tout cela se produise.

Pour plus de commodité, les principaux plugins tels que CSSPlugin (pour fournir des préfixes de fournisseurs CSS), RoundPropsPlugin, DirectionalRotationPlugin, AttrPlugin et BezierPlugin sont tous inclus avec TweenMax et TimelineMax. Étant donné que TweenMax vous fournira TimelineMax et tous les autres avantages listés précédemment, GreenSock recommande d'utiliser TweenMax pour la plupart des cas d'utilisation. Le chargement de TweenMax est plus pratique car un fichier contient à peu près tout ce dont vous avez besoin.

Installation

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 a une copie disponible pour nous (il y en a aussi une sur GitHub).

Config

TimelineMax permet d'utiliser des options de configuration personnalisées en utilisant un littéral d'objet. Explorons à quoi cela ressemble.

La partie que vous voyez en utilisant les accolades {} est le littéral d’objet qui contiendra notre configuration. Cela signifie que nous pouvons insérer des paires key:value dans ces accolades pour définir le comportement de notre scénario. La ligne entière TimelineMax(vars:{}) est ce que l’on appelle dans les documents TimelineMax le «constructeur».

Voici la configuration TimelineMax complète avec chaque clé étant donnée sa valeur par défaut. Placez-le tout en haut de votre fichier d'animation JavaScript (appelé «my-timelinemax-animation.js» dans notre exemple ci-dessus). Nous ne listons ici que la configuration complète pour que vous puissiez voir la variété d'options de configuration qu'offre TimelineMax. En général, 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.

Maintenant que vous avez la configuration en place et que vous en comprenez les options, vous pouvez passer votre configuration littérale d'objet personnalisée au constructeur TimelineMax(), donc ajoutez ce qui suit au bas de votre fichier:

Votre première animation

Les tweens sont créés à l'aide de méthodes telles que to(), from() et staggerFrom() pour n'en citer que quelques-unes. Comme vous l'avez vu précédemment, nous avons pris notre objet options et l'avons transmis en tant qu'argument au constructeur TimelineMax. Maintenant, nous devons déplacer quelques objets pour nous mouiller les pieds. Par souci de simplicité, déplaçons deux cercles de la gauche et du haut de la fenêtre:

Vérifiez l'onglet JS dans l'exemple ci-dessus pour voir comment l'effet est atteint. Comme indiqué précédemment, j'ai configuré le constructeur TimelineMax pour la scène ci-dessus et l'ai passé dans le littéral d'objet contenant les options du scénario:

Chaque cercle contient un id pour que je puisse les référencer par:

et puis la méthode to() est utilisée pour contrôler l'interpolation.

Dans to(), nous disons “utilisez l’élément qui est passé comme premier argument et déplacez-le de la gauche 100px. Ensuite, utilisez la méthode to() enchaînée après notre première méthode to() pour faire la même chose, mais déplacez cet élément des 100 derniers pixels.

Prenez note 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 didacticiels comment contrôler les éléments à différents moments et à différentes vitesses sur la ligne de temps en utilisant le paramètre de position.

La prochaine fois

Si vous souhaitez avancer dans cette aventure, n'hésitez pas à vous rendre sur la documentation de démarrage de GreenSock. Restez à l'affût de la suite dans cette série d'aventures d'animation où je couvre des choses telles que les étiquettes, les décalages, les pauses, les arguments et apprendre à modifier les options à onze. Jusqu'à la prochaine fois!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.