Share
Ce que vous allez créerAux vieux jours de l'animation interpolation était un terme utilisé pour décrire une séquence image par image, ou ce que l'on appelle parfois «entre-deux». C'est l'endroit où un seul mouvement mène au suivant pour créer un mouvement fluide. Pour ceux qui ont les cheveux gris, rappelez-vous Flash; une application qui a utilisé ce terme en référence aux mouvements de cadre. Jetons un regard perspicace sur quelques exemples et donnons à ce truc entre deux un bon vieux collège à essayer.
Dans les deux exemples de ce didacticiel, je vais charger TweenMax.min.js, ce qui nous donnera accès à TimelineMax et à tous les autres outils de base incroyables proposés par GSAP. Si vous repensez à notre introduction à TimelineMax, j'ai discuté du chargement de TweenMax.min.js, car il est plus pratique. En outre, ce fichier contient à peu près tout ce dont nous avons besoin (ce qui est également recommandé par GreenSock dans 99% des cas)..
TweenMax étend TweenLite en ajoutant de nombreuses fonctionnalités utiles (mais non essentielles) telles que répéter(), Délai de répétition(), yo-yo(), mise à jour de(), et plus. TweenMax a été conçu pour la commodité, fournissant un fichier JavaScript unique contenant tout ce dont vous avez généralement besoin pour animer des éléments DOM. Cela permet essentiellement aux auteurs de spécifier des mouvements uniques, alors que TimelineMax accepte les méthodes chaînées pour créer un ensemble plus complexe de tweens / séquences.
Les chargeurs sont les objets donnés aux utilisateurs lorsqu'ils attendent le chargement d'un processus. Ils nous donnent le pouvoir d'explorer de minuscules micro-éléments pouvant avoir des interactions complexes, voire simplistes. De plus, ils sont parfaits à créer..
Jetez un coup d'œil à cette démonstration «String of Pearls»:
Décomposons la séquence pour mieux comprendre le fonctionnement de cette "interpolation".
Pour créer cette séquence, il faudra utiliser la méthode staggerTo. Si vous ne vous rappelez pas quelle méthode est alors je vous encourage à vous arrêter tout de suite et à lire mon tutoriel sur la mécanique.
Selon la documentation de GreenSock, le décalerTo () méthode:
“Ajoute un tableau de cibles à un ensemble commun de valeurs de destination.
Dans notre cas, ces cibles multiples seront chacun des cercles de l’ensemble du SVG..
Accentsconagua
chanceler acceptera le sélecteur que nous utilisons pour les cercles (dans ce cas cercles).Cela entraînerait ce qui suit: en supposant cercles contient trois objets…
timeline.staggerTo (cercles, 15, x: 0, 0,2) // le cercle 1 commence à l'heure 0 // le cercle 2 commence à l'heure 0.2 // le cercle 3 commence à l'heure 0.4
Pour bien commencer, nous devrons définir un nouveau scénario et quelques paramètres pour notre configuration..
var loader = new TimelineMax (repeat: -1, yoyo: true), circles = $ ('svg circle'), stagger_options = opacité: 0, y: -800, facilité: Elastic.easeInOut;Pour que cette chronologie se répète dans le sens inverse, j'utilise le yo-yo clé et en mettant sa valeur à vrai. Là encore, notre séquence sera lue dans le sens opposé une fois que l’animation aura atteint sa dernière image. Pour déclencher l'animation, il faudra cibler chaque cercle à l'intérieur du SVG et nous aurons besoin d'une référence utilisant la puissance de jQuery..
Les docs ont indiqué un certain nombre de façons de passer des sélecteurs (n'hésitez pas à en savoir plus à ce sujet ici). Pour cet exemple, je sélectionnerai tous les cercles en même temps en utilisant la syntaxe de sélecteur typique de jQuery. Il est également un peu plus rapide de stocker notre référence dans une variable pour une utilisation ultérieure. cercles = $ ('cercle svg').
le stagger_options variable est un littéral d'objet contenant les propriétés permettant de donner sa vie à cette animation. Nous déplaçons nos objets en utilisant le y clé parce que le GSAP CSSPlugin convertit intelligemment transformer valeurs à matrice équivalents et, finalement, accélère les choses pour nous. Il existe toute une liste de propriétés abrégées de transformation qui sont bien supérieures et beaucoup plus faciles à utiliser par rapport aux transformations CSS classiques:
| CSS | GSAP |
|---|---|
translateX () | X |
traduireY () | y |
translateZ () | z |
tourner() | rotation |
rotationY () | rotationY |
rotationX () | rotationX |
scaleX () | scaleX |
scaleY () | échelleY |
skewX () | skewX |
Skew () | pince |
Nous pouvons également contrôler l’assouplissement (la sensation de l’animation) et passer dans différents types de mouvement. Pour les amateurs de visuels, vous pouvez consulter le visualiseur de facilité de GreenSock pour mieux comprendre la multitude de possibilités disponibles..
La dernière pièce de cette création est la fixation du chanceler méthode à notre chronologie et insertion des variables définies précédemment et dans le bon ordre pour cette méthode particulière (éléments, durée, options, montant échelonné).
loader.staggerTo (cercles, 0,875, options de décalage, 0,025);
Si vous avez envie de créer une autre séquence une fois la séquence décalée terminée, vous pouvez certainement enchaîner une autre méthode telle que de à ainsi:
loader.staggerTo (cercles, 0.875, stagger_options, 0.025) .fromTo (cible: Object, durée: Nombre, fromVars: , toVars: );
Essayons cela avec un SVG que j'appelle «Polyman». Récemment, j'ai écrit un article pour CSS-Tricks sur l'animation de polygones et ai décidé d'utiliser cet exemple similaire pour un autre exercice d'interpolation ici. Essayons d'utiliser le staggerFromTo () méthode et voir quel genre de magie nous pouvons évoquer.
La sortie SVG suivante (XML) est légèrement abrégée aux fins de discussion, mais comme vous le verrez, notre SVG comprend quelques balises; Plus précisément
Pour la configuration initiale de la chronologie, nous allons définir nos options globales à l'aide d'un littéral d'objet qui retardera l'animation initiale, répétera la séquence, retardera l'animation et répétera la lecture et finalement jouera l'animation à l'envers..
var tmax_options = delay: 0.25, repeat: -1, repeatDelay: 0.25, yoyo: true;
Next up est une propriété relativement nouvelle et non documentée qui oblige les valeurs de transformation à être placées dans l'attribut de transformation SVG (par opposition à un style CSS)..
CSSPlugin.useSVGTransformAttr = true;
Cette propriété a été ajoutée pour aider les développeurs à résoudre plus facilement un bogue dans Safari qui associe opacité et se transforme (tel que transformer: scale () par exemple) produirait un résultat étrange. À partir de 1.16.0 useSVGTransformAttr est réglé sur vrai automatiquement et spécifiquement ciblé sur notre ami Safari, il n'est donc plus nécessaire que les auteurs définissent ce que j'ai décrit ci-dessus.
Depuis le décalé de méthode accepte des arguments séparés pour de et à positions J'aime installer les deux littéraux d'objet en dehors de la méthode à des fins d'organisation et de lisibilité.
var stagger_opts_from = opacité: 0, échelle: 0, transformationOrigin: 'center center'; var stagger_opts_to = opacité: 1, échelle: 1, facilité: Elastic.easeInOut, force3D: true;
Nous définissons deux littéraux d’objet car nous avons besoin de tous nos de et à propriétés définies afin que cette animation fasse son travail. S'il n'est pas clair que nous partons des valeurs définies dans notre stagger_opts_from et se terminant par les valeurs définies dans stagger_opts_to.
le force3D key force GSAP à appliquer une valeur 3D à la transformation de l'élément; sens matrix3d () au lieu de matrice(), ou translate3d () au lieu de Traduire(). Cela se traduit généralement par le fait que le navigateur place l'élément ciblé sur sa propre couche de composition, ce qui permet des mises à jour plus efficaces avec des animations..
Par défaut force3D est réglé sur auto (à partir de 1.15.0), il n’est donc pas nécessaire de l’utiliser du tout (à moins que vous ne souhaitiez spécifiquement le comportement de vrai au lieu de auto pour cette interpolation).
// couche les cibles au début de l'interpolation et // les conserve de cette façon en utilisant une matrice 3D le cas échéant // (pour les transformations 2D et 3D). force3D: true // couche les cibles au début de l'interpolation et // les supprime également (retour à une matrice 2D ou // transformations) à la fin de l'interpolation également. Ceci vous empêche // de créer et de vous accrocher à des centaines d'éléments superposés // (ce qui peut dégrader les performances) et vous permet également de vous assurer que le texte // qui a peut-être été pixellisé au cours de la interpolation redevient // net. force3D: auto
Vous pouvez définir le global force3D valeur pour tous les tweens en utilisant le defaultForce3D propriété fournie par CSSPlugin:
// accepte également 'false' ou 'auto' CSSPlugin.defaultForce3D = true;
Ou vous pouvez définir ceci sur une base par interpolation à la place:
// conservera l'élément superposé une fois que l'interpolation est terminée timeline.to (element, 1, x: 300, force3D: true); // conservera l'élément superposé une fois que l'interpolation est terminée timeline.to (element, 1, x: 300, force3D: false);
Si votre animation tente de remplacer les propriétés CSS, vous devez vous assurer que votre spécificité particulière n'entre pas en collision avec ce qui est déclaré dans votre JavaScript. Dans le cas contraire, les valeurs CSS natives auront priorité et votre animation ne réagira pas comme prévu..
/ * Styles requis pour les polymères * / .polyman path opacity: 0;
Les CSS ci-dessus masqueront Polyman lors du chargement initial de la fenêtre. Par conséquent, nous ne verrons pas initialement notre compagnon barbu comme vous le feriez avec ce que l’on appelle communément FOUT (Flash Of Unstyled Text)..
Puisque la majorité de notre configuration est définie, nous pouvons enfin commencer à configurer notre timeline, en ciblant les chemins SVG, en définissant une valeur échelonnée (stagger_val) Et terminer en définissant combien de temps durera toute l’animation (durée).
var tl = new TimelineMax (tmax_options), path = $ ('svg.polyman path'), stagger_val = 0.0125, duration = 1.25;Juste comme cela et avec la vague délicate de notre baguette magique et une légère pincée de poussière de licorne, nous transmettons toutes les variables requises qui ont été définies comme arguments dans la décalé de méthode!
tl.staggerFromTo (chemin, durée, stagger_opts_from, stagger_opts_to, stagger_val, 0);
Alto! En une simple ligne, Polyman commence à respirer et à devenir un être vivant (enfin, pas vraiment). Assez cool hein?
Dans le prochain tutoriel de notre série TweenMax, nous verrons comment créer un point de pause sur la timeline, de sorte que l'animation se met automatiquement en pause lorsqu'elle atteint le point souhaité. La méthode addPause () est relativement nouvelle et vous permet de placer une pause n'importe où dans un scénario. C'est beaucoup plus précis que d'utiliser un rappel qui appelle une fonction pour la mettre en pause (ce que vous deviez faire avant addPause () existant). Jusqu'à la prochaine fois, bonne interpolation!
Un merci spécial aux lecteurs qui ont suivi ce voyage GreenSock!
