Greensock pour les débutants (partie 2): la chronologie de GSAP & # x27;

Greensock (GSAP) TimeLineMax: maîtrise des animations Web complexes

Ce tutoriel se plonge dans TimeLineMax de Greensock, un outil puissant pour gérer des animations Web complexes. Nous couvrirons les concepts et les techniques clés pour élever vos compétences d'animation.

Concepts clés:

• Animations de rationalisation: TimeLineMax simplifie des séquences d'animation complexes en coordonnant plusieurs préadolescents, éliminant le besoin de réglages de retard manuel.
• Effets synchronisés: Les tweens dans une chronologie sont intrinsèquement synchronisés, jouant séquentiellement sauf si explicitement positionné.
• Contrôle de synchronisation précise: Les paramètres de position (par exemple, =1, -=0.5) fournissent un contrôle granulaire sur les temps de début de Tween par rapport aux autres dans la chronologie.
• Amélioration de la lisibilité du code: L'utilisation d'étiquettes comme paramètres de position améliore la clarté et la maintenabilité du code, en particulier dans les scénarios complexes.
• Conception modulaire avec des délais imbriqués: Chronologies de nidification dans un calendrier maître favorise le code modulaire organisé, simplifiant les mises à jour et la maintenance.

Pourquoi utiliser TimeLineMax?

Dans les animations plus simples, des tweens individuels avec des propriétés de retard suffisent. Cependant, à mesure que la complexité augmente, la gestion des retards de tween individuels devient lourde. TimelineMax résout cela en fournissant un mécanisme de contrôle centralisé.

Considérez deux tweens:

1. Une mise à l'échelle du cercle et la rotation.
2. Le texte apparaît.

Sans TimelineMax, la coordination de leur synchronisation nécessite des ajustements de retard manuel sur le deuxième Tween. TimelineMax élimine ce besoin.

coordonnées des tweens avec TimeLinemax

TimeLineMax agit comme un conteneur pour les préadolescents. Les tweens dans une chronologie exécutent séquentiellement par défaut. Le code suivant démontre un exemple de base:

const tl = new TimelineMax();
tl.set('.example__title', { scale: 0.2, autoAlpha: 0 })
 .set('.example__ball', { scale: 0.2 })
 .to('.example__ball', 0.5, { rotationX: 360, rotationY: 180, scale: 1, ease: Elastic.easeIn.config(2, 1) })
 .to('.example__title', 0.5, { autoAlpha: 1, scale: 1, ease: Back.easeOut.config(4) });

Remarquez le séquençage automatique - aucun retard manuel n'est nécessaire.

Paramètres de position et étiquettes

Pour un contrôle plus précis, utilisez les paramètres de position:

• =1: démarre un Tween 1 seconde après le précédent.
• -=0.5: démarre un tween 0,5 seconde avant le précédent.
• 1: commence un tween à l'heure absolue de 1 seconde.

Les étiquettes améliorent encore la lisibilité:

tl.addLabel('animationStart');
tl.to(element, 0.5, { x: 100 }, 'animationStart');
tl.to(otherElement, 1, { y: 100 }, 'animationStart+=2'); //Starts 2 seconds after 'animationStart'

chronologies maître et organisation

Pour les animations complexes, les délais de nid dans une chronologie maître:

function animationPart1() {
  const tl = new TimelineMax();
  // Add tweens here...
  return tl;
}

const masterTimeline = new TimelineMax();
masterTimeline.add(animationPart1(), 'part1');
// Add more nested timelines...

Cette approche modulaire améliore l'organisation du code et la maintenabilité.

Fonctionnalités supplémentaires TimeLineMax:

• pause sur charge: new TimelineMax({ paused: true });
• Contrôle de lecture: play(), pause(), reverse(), restart(), resume()
• Contrôle de vitesse: timeScale()
• Démarrage de lecture précise: seek() avec les étiquettes

Conclusion:

TimeLinemax de Greensock vous permet de créer des animations Web sophistiquées et bien organisées. En maîtrisant ses fonctionnalités, vous pouvez créer des expériences très interactives et visuellement attrayantes. Explorez les exemples de code fournis pour l'application et l'expérimentation pratiques. Restez à l'écoute pour la partie 3!

Questions fréquemment posées (FAQ): (celles-ci sont déjà traitées dans le texte d'origine, mais reformulé pour plus de clarté et de concision)

• Contrôle de vitesse: Utilisez timeScale() pour ajuster la vitesse d'animation. timeScale(2) double la vitesse; timeScale(0.5) Rassure de moitié.
• Ajout d'étiquettes: Utilisez addLabel("labelName") pour ajouter des étiquettes pour un positionnement précis.
• pause / reprise: utiliser pause() et resume() pour contrôler la lecture de l'animation.
• Timelines imbriquées: Oui, les délais de nidification sont pris en charge pour la modularité.
• REVERSION ANIMATIONS: Utilisez reverse() pour lire des animations à l'arrière.
• boucle: Utilisez repeat() pour faire boucle les animations (par exemple, repeat(3) pour trois répétitions).
• stupéfiant: Utiliser staggerTo(), staggerFrom(), ou staggerFromTo() pour les animations échelonnées.
• Synchronisation des animations: Ajouter des animations à la même position de chronologie pour les synchroniser.
• Positionnement relatif: Utiliser = et -= dans les paramètres de position pour la synchronisation relative.
• Contrôle de progression: Utiliser progress() pour obtenir ou définir les progrès de l'animation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!