Share
Was Sie erstellen werdenIn den alten Tagen der Animation Tweening war ein Begriff, der verwendet wurde, um eine Frame-für-Frame-Sequenz zu beschreiben, oder was manchmal als "In-Betweens" bezeichnet wird. An diesem Ort führt eine einzelne Bewegung zur nächsten, um eine fließende Bewegung zu erzeugen. Für diejenigen, die graue Haare haben, können Sie sich an Flash erinnern. eine Anwendung, die diesen Begriff verwendet hat, wenn auf Rahmenbewegungen Bezug genommen wird. Werfen wir einen Einblick in ein paar Beispiele und geben Sie diesem Tweening einen guten alten College-Versuch.
Für beide Beispiele in diesem Lernprogramm lade ich TweenMax.min.js, mit dem wir auf TimelineMax und alle anderen erstaunlichen Kernwerkzeuge zugreifen können, die GSAP zu bieten hat. Wenn Sie an unseren TimelineMax-Primer zurückdenken, habe ich das Laden von TweenMax.min.js als bequemer erörtert. Außerdem enthält diese eine Datei so ziemlich alles, was wir brauchen (was auch von GreenSock zu 99% empfohlen wird)..
TweenMax erweitert TweenLite um viele nützliche (aber nicht unbedingt notwendige) Funktionen wie wiederholen(), Wiederholungsverzögerung(), yoyo (), aktualisieren zu(), und mehr. TweenMax wurde zur Vereinfachung entwickelt und enthält eine einzige JavaScript-Datei, die alles enthält, was Sie normalerweise zum Animieren von DOM-Elementen benötigen. Im Wesentlichen können Autoren einzelne Bewegungen angeben, während TimelineMax verkettete Methoden akzeptiert, um einen komplexeren Satz von Tweens / Sequenzen zu erstellen.
Loader sind Objekte, die Benutzern zur Verfügung gestellt werden, wenn sie auf das Laden eines Prozesses warten. Sie geben uns die Möglichkeit, winzige Elemente in Mikrogröße zu erforschen, die komplexe oder sogar einfache Interaktionen haben können.
Werfen Sie einen Blick auf diese Demo "Perlenkette":
Lassen Sie uns die Reihenfolge aufteilen, um ein besseres Verständnis dafür zu bekommen, wie das ganze „Tweening“ funktioniert.
Zum Erstellen dieser Sequenz ist die Verwendung der Methode staggerTo erforderlich. Wenn Sie sich nicht daran erinnern, was eine Methode ist, dann empfehle ich Ihnen, sofort anzuhalten und mein Tutorial zu Mechanikern zu lesen.
Laut der Dokumentation von GreenSock kann der staggerTo () Methode:
„Twweens ein Array von Zielen auf einen gemeinsamen Satz von Zielwerten.
In unserem Fall sind diese mehreren Ziele alle Kreise innerhalb der gesamten SVG.
Accentsconagua
staggerTo akzeptiert den Selektor, den wir für die Kreise verwenden (in diesem Fall) Kreise).Dies würde folgendes ergeben: vorausgesetzt Kreise enthält drei Objekte…
timeline.staggerTo (Kreise, 15, x: 0, 0.2) // Kreis 1 beginnt zum Zeitpunkt 0 // Kreis 2 beginnt zum Zeitpunkt 0.2 // Kreis 3 beginnt zum Zeitpunkt 0.4
Um richtig anzufangen, müssen wir eine neue Zeitleiste und einige Einstellungen für unsere Konfiguration definieren.
var loader = new TimelineMax (repeat: -1, yoyo: true), Kreise = $ ('svg circle'), stagger_options = Deckkraft: 0, y: -800, ease: Elastic.easeInOut;Um diese Zeitleiste in umgekehrter Richtung wiederholen zu können, verwende ich die Yoyo Schlüssel und setzen Sie den Wert auf wahr. Dies führt wiederum dazu, dass unsere Sequenz in die entgegengesetzte Richtung abgespielt wird, sobald die Animation ihr Endbild erreicht. Um die Animation auszulösen, müssen Sie jeden Kreis innerhalb der SVG anvisieren. Genau aus diesem Grund benötigen wir eine Referenz mit jQuery.
Es gibt eine Reihe von Möglichkeiten, die von den Dokumenten vorgeschlagen werden, um Selektoren zu übergeben (lesen Sie hier mehr darüber). Für dieses Beispiel wähle ich alle Kreise gleichzeitig mit der typischen Selector-Syntax von jQuery aus. Es ist auch etwas schneller, unsere Referenz in einer Variablen zu speichern, um sie später wiederverwenden zu können kreise = $ ('svg circle').
Das stagger_options Variable ist ein Objektliteral, das die Eigenschaften enthält, um dieser Animation ihr Leben zu geben. Wir bewegen unsere Objekte mit der y Schlüssel, weil die GSAP CSSPlugin intelligent konvertiert verwandeln Werte bis Matrix Äquivalente und beschleunigt letztendlich die Dinge für uns. Es gibt eine ganze Liste von Transformationsverknüpfungs-Eigenschaften, die im Vergleich zu typischen CSS-Transformationen weit überlegen und viel einfacher zu verwenden sind:
| CSS | GSAP |
|---|---|
translateX () | x |
translateY () | y |
translateZ () | z |
drehen() | Drehung |
RotierenY () | rotationY |
RotateX () | RotationX |
scaleX () | scaleX |
scaleY () | scaleY |
skewX () | skewX |
schief () | schief |
Wir können auch die Beschleunigung (das Gefühl der Animation) steuern und verschiedene Bewegungsarten passieren. Für die visuellen Liebhaber gibt es den Easy-Visualizer von GreenSock, um ein besseres Verständnis der vielfältigen Möglichkeiten zu erhalten.
Das letzte Stück dieser Kreation ist das Anbringen der staggerTo Methode in unsere Timeline und Einfügen der zuvor definierten Variablen in der richtigen Reihenfolge für diese bestimmte Methode (Elemente, Dauer, Optionen, Staffelbetrag).
loader.staggerTo (Kreise 0,875, Stagger_Optionen 0,025);
Wenn Sie danach hungern, eine andere Sequenz zu erstellen, nachdem die Staffelungssequenz abgeschlossen ist, können Sie sicherlich eine andere Methode wie z von zu wie so:
loader.staggerTo (Kreise 0,875, Stagger_Optionen 0,025) .fromTo (Ziel: Objekt, Dauer: Anzahl, fromVars: , toVars: );
Versuchen wir es mit einem SVG, den ich "Polyman" nenne. Vor kurzem habe ich einen Artikel für CSS-Tricks über das Animieren von Polygonen geschrieben und beschlossen, dieses ähnliche Beispiel für eine weitere Tweening-Übung hier zu verwenden. Versuchen wir es mit der staggerFromTo () Methode und sehen, welche Art von Magie wir heraufbeschwören können.
Die folgende SVG-Ausgabe (XML) ist aus Gründen der Diskussion etwas abgekürzt, aber wie Sie sehen, umfasst unser SVG einige Tags. speziell
Für die anfängliche Zeitleisteneinstellung definieren wir unsere globalen Optionen mit einem Objektliteral, das die anfängliche Animation verzögert, die Sequenz wiederholt, die Animation bei Wiederholung verzögert und schließlich die Animation rückwärts wiedergibt.
var tmax_options = delay: 0.25, wiederholen: -1, repeatDelay: 0.25, yoyo: true;
Als nächstes folgt eine eher neue und undokumentierte Eigenschaft, die die Umwandlung von Transformationswerten in das SVG-Transformationsattribut erzwingt (im Gegensatz zu einem CSS-Stil)..
CSSPlugin.useSVGTransformAttr = true;
Diese Eigenschaft wurde hinzugefügt, um es den Entwicklern zu erleichtern, einen Fehler in Safari zu umgehen, bei dem sie kombiniert wurden Opazität und verwandelt sich (sowie transform: scale () zum Beispiel) würde zu einem ungeraden Ergebnis führen. Stand 1.16.0 useSVGTransformAttr ist eingestellt auf wahr automatisch und gezielt auf unseren Kumpel Safari ausgerichtet, so dass Autoren nicht mehr wie oben definiert definieren müssen.
Seit der staggerFromTo Die Methode akzeptiert separate Argumente für von und zu Positionen Ich möchte beide Objektliterale aus organisatorischen und lesbaren Gründen außerhalb der Methode einrichten.
var stagger_opts_from = Deckkraft: 0, Maßstab: 0, transformOrigin: 'center center'; var stagger_opts_to = Deckkraft: 1, Maßstab: 1, Leichtigkeit: Elastic.easeInOut, force3D: true;
Wir definieren zwei Objektliterale, weil wir alle unsere benötigen von und zu Eigenschaften, die definiert sind, damit diese Animation ihre Aufgabe erfüllt. Wenn nicht klar ist, gehen wir von den in unserem definierten Werten aus stagger_opts_from und endet mit den eingestellten Werten stagger_opts_to.
Das force3D key zwingt GSAP, einen 3D-Wert auf die Transformation des Elements anzuwenden; Bedeutung Matrix3d () anstatt Matrix(), oder translate3d () anstatt Übersetzen(). Dies führt in der Regel dazu, dass der Browser das anvisierte Element auf eine eigene Compositor-Ebene legt, wodurch effizientere Animationen vorgenommen werden können.
Standardmäßig force3D ist eingestellt auf Auto (ab 1.15.0) es ist also eigentlich gar nicht nötig, es überhaupt zu benutzen (es sei denn, Sie möchten ausdrücklich das Verhalten von wahr anstatt Auto für das Tween).
// schichtet die Ziele am Anfang des Tweens und // hält sie ggf. mithilfe einer 3D-Matrix // (für 2D- und 3D-Transformationen) auf diese Weise. force3D: true // schichtet die Ziele am Anfang des Tween und // entfernt auch die Schichtung (zurück zur 2D-Matrix oder // Transformation) am Ende des Tween. Dadurch wird verhindert, dass // Sie Hunderte von geschichteten Elementen erstellen und auf sie zugreifen (//, was die Leistung beeinträchtigen kann), und außerdem sicherstellen, dass // Text, der während des Tweens gerastert wurde, // zurückkehrt, weil er scharf ist. force3D: auto
Sie können die globale Einstellung vornehmen force3D Wert für alle Tweens mit defaultForce3D Von CSSPlugin bereitgestellte Eigenschaft:
// akzeptiert auch 'false' oder 'auto' CSSPlugin.defaultForce3D = true;
Oder Sie können dies stattdessen einstellen:
// bleibt das Element geschichtet, nachdem das Tween fertig ist timeline.to (Element, 1, x: 300, force3D: true); // bleibt das Element geschichtet, nachdem das Tween fertig ist timeline.to (Element, 1, x: 300, force3D: false);
Wenn Ihre Animation versucht, CSS-Eigenschaften zu überschreiben, müssen Sie sicherstellen, dass Ihre spezifische Spezifität nicht mit den in Ihrem JavaScript deklarierten Werten kollidiert. Andernfalls haben die systemeigenen CSS-Werte Vorrang und Ihre Animation reagiert nicht wie erwartet.
/ * Erforderliche Polyman-Styles * / .polyman-Pfad Deckkraft: 0;
Das CSS wird Polyman beim ersten Fensterladen verbergen, so dass wir unseren bärtigen Gefährten anfangs nicht so sehen, wie Sie es mit FOUT (Flash Of Unstyled Text) erleben würden..
Da der Großteil unserer Konfiguration definiert ist, können wir endlich mit dem Einrichten unserer Zeitleiste beginnen, die SVG-Pfade anvisieren und einen Staffelwert definieren (stagger_val) Und abschließen, indem festgelegt wird, wie lange die gesamte Animation dauert (Dauer).
var tl = new TimelineMax (tmax_options), path = $ ('svg.polyman path'), Stagger_val = 0.0125, duration = 1.25;Genau so und mit der zarten Welle unseres Zauberstabes und einem leichten Einhornstaub streuen wir alle erforderlichen Variablen, die als Argumente definiert wurden, in die staggerFromTo Methode!
tl.staggerFromTo (Pfad, Dauer, Stagger_opts_from, Stagger_opts_to, Stagger_val, 0);
Viola! In einer einfachen Zeile beginnt der Polyman zu atmen und wird zu einem echten Lebewesen (na ja, nicht wirklich). Ziemlich cool, huh?
Im nächsten Tutorial unserer TweenMax-Serie wird beschrieben, wie Sie einen Unterbrechungspunkt auf der Timeline erstellen. Die Animation wird automatisch angehalten, wenn der gewünschte Punkt erreicht ist. Die addPause () -Methode ist relativ neu und ermöglicht es Ihnen, eine Pause an einer beliebigen Stelle in der Timeline zu platzieren. Es ist viel genauer als die Verwendung eines Rückrufs, bei dem eine Funktion zum Anhalten der Funktion aufgerufen wird (was Sie zuvor tun mussten addPause () bestehender). Bis zum nächsten Mal fröhliches Tweening!
Ein besonderer Dank geht an die Leser, die diese GreenSock-Reise mitmachen!
