Share
In diesem Lernprogramm erfahren Sie, wie Sie Animationen bei Bedarf mit einer aufgerufenen Methode steuern addPause (). Bereit? Setzen?… Leichte Pause… Lass uns gehen!
Das addPause () method ist eine Kontrollmethode, die es Entwicklern ermöglicht, eine Pause überall auf ihrer Zeitleiste. Es ist weitaus präziser als die Verwendung einer Rückruffunktion, die eine andere Funktion unterbricht (etwas, das zuvor erforderlich war) addPause () bestehender).
Diese Steuermethode kann auch einen speziellen Rückruf einfügen, der die Wiedergabe der Zeitleiste zu einem bestimmten Zeitstempel oder Label anhält. Dadurch wird sichergestellt, dass der virtuelle Abspielkopf, wenn er sich etwas über die Pausenposition hinaus bewegt, an die genaue Stelle zurückversetzt wird.
Die Syntax für addPause ist geradeaus. So wie wir andere Methoden schreiben .zu(), das .addPause () Die Methode ist ähnlich geschrieben und akzeptiert Argumente, die in Klammern übergeben werden können. Wenn Sie mit den Methoden nicht vertraut sind, können Sie zu meinem anderen GreenSock-Artikel über die GSAP-Mechanik gehen. Ich warte hier auf Ihre Rückkehr.
timeline.addPause (2);
Durch das Hinzufügen des obigen Codes wird Ihre Animation genau an der 2-Sekunden-Marke der Timeline angehalten. Wenn Sie sich nicht sicher sind, was eine Zeitleiste ist und wie sie instanziiert werden soll, sollten Sie einen vorherigen Artikel lesen, den ich am Anfang von TimelineMax schrieb.
Sie können auch eine Pause in Bezug auf Etiketten einfügen. Wenn Sie gelesen haben, erinnern Sie sich vielleicht, dass wir im Artikel über Mechanik bereits über Etiketten gesprochen haben.
Accentsconagua
timeline.addPause ("yourLabel");Wenn nun Ihre Timeline auf das Label "yourLabel" stößt, wird eine Pause bei "yourLabel" eingefügt.
In diesem Beispiel wird 3 Sekunden nach „yourLabel“ eine Pause eingefügt. Wenn diese Pause eintritt, wird ein Anruf bei angefordert Ihre Funktion wird stattfinden.
timeline.addPause ("yourLabel + = 3", yourFunction);Wenn Sie eine Pause von genau 4 Sekunden einfügen möchten, rufen Sie an Ihre Funktion, übergeben Sie zwei Parameter, param1 und param2 und Binden Sie den aktuellen Bereich schließlich an den Rückruf. Sie können dies wie folgt tun:
timeline.addPause (4, yourFunction, ["param1", "param2"], this);
Hier sind einige lustige Beispiele, um Ihre Füße nass zu machen, indem Sie Pausen für eine Zeitleiste einfügen. Die Herausforderung für Sie besteht darin, jeden zuvor genannten Ansatz zu ergreifen und zu versuchen, sie selbst umzusetzen.
Hier ein gutes Beispiel, basierend auf einer Demo von Carl Schoof, die einen linearen Ansatz und eine perfekte Darstellung der typischen Verwendung mit dem addPause () Kontroll-Methode.
Eine typische Verwendung von addPause () ist eine lineare Erfahrung in mehrere Abschnitte aufzuteilen:
Jedes Mal, wenn Sie auf die Nächster Schaltfläche wird die Zeitleiste angezeigt abspielen() bis es das nächste trifft addPause () Punkt.
Hier ist eine Demo namens „Bubble Emitter“, mit der Sie nach Belieben mit Pause-Einfügungen experimentieren können. Klick es!
Suchen Sie in Zeile 90 des JavaScript-Bedienfelds nach dieser auskommentierten Zeile:
createBubbles (Wanne) .addPause (0.25);
Kommentieren Sie dies und interagieren Sie mit der Demo, um das zu sehen addPause Die Wiedergabe erfolgt während der Wiedergabe der Animation. Hinweis: Die Animation hält 0,25 Sekunden in der Animationssequenz an.
Ich habe auch einige Kommentare in dieser Demo hinterlassen (dank Jack Doyles Hilfe), in denen erklärt wird, wie dieser Effekt noch performanter gemacht werden kann!
Diese SVG-Demo von Chris Gannon ist ein hervorragendes Beispiel für das DrawSVG-Plugin und eignet sich hervorragend zum Erkunden addPause. Sie können auch verwenden addPause um jede der Bewegungen zu entdecken, die Chris anwendet, um die Wirkung zum Leben zu erwecken.
Fügen Sie dieses Snippet in Zeile 26 des JavaScript-Bedienfelds der Demo ein.
.addPause ()
Wie ich bereits erwähnt habe, verwendet Chris 'Demo das drawSVG-Plugin, das wir in einem früheren Artikel betrachtet haben. Für diejenigen, die nicht vertraut sind, ist DrawSVG ein besonders nützliches Plugin, das die Animation von SVG-Strichen unterstützt. Ich empfehle Ihnen dringend, es weiter zu erkunden, wenn Sie Zeit haben.
Einfach, weil Chris 'Sachen so gut sind. Wie wäre es, wenn wir einem seiner Demos ein paar Pausen hinzufügen? Das ist perfekt:
Wenn Sie sich für diese Demo entscheiden, löschen Sie alle JavaScript-Dateien, die Chris geschrieben hat, und Sie sehen die gesamte SVG-Datei und wie er das DrawSVG-Plugin zum Erstellen dieser Sequenz verwendet hat.
Dies ist die SVG-GrafikUm unser Experiment zu beginnen, fügen Sie der Zeile 60 des JavaScript-Bedienfelds der CodePen-Demo den folgenden Ausschnitt hinzu:
tl.addPause (1.15);
Haben Sie bemerkt, dass die Animation 1,15 Sekunden nach der Bewegung unterbrochen wurde? Ziemlich cool, huh?
Nun zum nächsten Trick. Ersetzen Sie die Zeilen 44-47 durch folgende, um der Zeitleiste ein Label hinzuzufügen:
.to (Bögen, 2, drawSVG: '0% -5%', Leichtigkeit: Linear.easeNone). add ('archesLabel')Fügen Sie mit dem obigen Code den folgenden Ausschnitt um die Linie 60 ein, um unser Experiment abzuschließen. Sehen Sie sich die Animationspause genau an dem zuvor definierten „archesLabel“ an.
tl.addPause ('archesLabel')Nachdem Sie die addPause () -Methode besprochen und in einer Reihe von Demos damit herumgespielt haben, ist es an der Zeit zu sehen, ob Sie sie anwenden können. Wenn Sie lernen, wie Sie mit einer einfachen Umschalttaste für Wiedergabe / Pause eine GSAP-Animation (Tweens oder Timelines) steuern können, kann dies sehr praktisch sein, insbesondere wenn Sie versuchen, eine bestimmte Vorgehensweise bzw. Technik zu erlernen.
In dem folgenden Video geht Carl Schoff durch die Grundlagen und erklärt, wie man den Umschaltknopf in der Demo macht.
In unserem nächsten GreenSock-Abenteuer erfahren Sie, worum es beim Bezier Tweening geht! Wir untersuchen, was ein Bezier-Pfad ist, und schauen uns einige Beispiel-Demos an, die zeigen, wie man einen Bezier-Pfad animiert. Bis zum nächsten Mal glücklich animieren!
