Share
Was Sie erstellen werdenBereit für einige Definitionen? Mechanik ist definiert als ein Bereich, der sich mit dem Verhalten von Objekten beschäftigt, die Kräften oder Verschiebungen ausgesetzt sind, und den nachfolgenden Auswirkungen dieser Objekte auf ihre Umgebung. EIN Zeitleiste ist eine Möglichkeit, eine Liste von Ereignissen in chronologischer Reihenfolge anzuzeigen, die manchmal als Projektartefakt bezeichnet wird. Lassen Sie uns die beiden Bereiche überbrücken, um zu lernen, wie Sie unsere Animationen steuern und konfigurieren können, als ob wir wirklich wissen, was wir tun.
Weitere Definitionen kommen: der Begriff Syntax verweist direkt auf die Regeln und Prinzipien, die die Struktur regeln. Wie wir in unserem vorherigen Tutorial besprochen haben, lautet die JavaScript-Syntax zum Einrichten einer TimelineMax-Animation wie folgt:
var config = ; var tmax_tl = new TimelineMax (config);
Hier habe ich eine neue Timeline mit der definiert TimelineMax () Konstruktor und bestanden die Konfig Objekt als Argument. Wenn Sie sich daran erinnern, wird dieses Argument als "Objektliteral" bezeichnet Schlüsselwert Paarungen bezüglich unserer Konfigurationseinstellungen. Das TimelineMax () Konstruktor ist das, was zum Instanziieren einer neuen TimelineMax-Instanz verwendet wird.
Denken Sie daran, wenn Sie sich an die Syntax gewöhnen, die folgenden Zeilen sind gleich. Bedeutung beide sind identisch (die letzte Zeile dient der Bequemlichkeit).
tmax_tl.add (TweenLite.to (Element, 1, left: 100, Opazität: 0,5))); tmax_tl.to (Element, 1, left: 100, Opazität: 0,5);
Wenn Sie wie ich sind, werden Sie sich wahrscheinlich an alle Parameter erinnern, die für die TimelineMax-Konfigurationsoptionen akzeptiert wurden. Zum Glück finden Sie hier eine vollständige Liste der Konfigurationsoptionen und -eigenschaften.
Neben der tatsächlichen Konfiguration stehen auf unserer Timeline auch Eigenschaften zur Verfügung. Wenn ich zum Beispiel folgendes geschrieben habe:
var config = repeat: -1, delay: 1, repeatDelay: 0; var tmax_tl = new TimelineMax (config); console.log (tmax_tl.vars);
Die Konsole würde das gesamte Protokoll protokollieren Konfig Variable (dargestellt durch tmax_tl.vars) als Objekt und erlaube mir, jeden eingestellten Schlüssel / Wert zu überprüfen. Es gibt eine ganze Liste von Eigenschaften für Ihre Timeline, in die Sie hier eintauchen können, um weitere Informationen zu erhalten.
Probieren Sie dies aus Spaß und prüfen Sie dann die Ausgabe Ihrer DevTools-Konsole:
console.log (tmax_tl.timeline);
Sie sollten eine ähnliche Ausgabe wie der folgende Screenshot sehen:
Versuchen Sie, diese nächste Eigenschaft in der Konsole zu melden, und achten Sie darauf, dass Ihre Gedanken durchgebrannt werden (die Konsole sollte einen numerischen Wert melden):
console.log (tl.timeline._timeScale);
Das wahre Geheimnis für das Erstellen erstaunlicher Animationssequenzen mit präzisem Timing besteht im Verständnis der Positionsparameter. Dieser superflexible Parameter steuert die Platzierung von Tweens, Labels, Callbacks, Pausen und sogar verschachtelten Zeitleisten, sodass Sie alles, überall und in beliebiger Reihenfolge platzieren können!
Wenn Sie sich beispielsweise den folgenden Code ansehen, sehen Sie, dass der Positionsparameter das letzte Argument für den Parameter ist zu() Methode.
tmax_tl.to (Ziel, Dauer, Variablen, Position)
Hier ist ein Beispiel, wie das alles aussieht. Achten Sie genau auf die Kommentare, die erklären, wie das Positionsargument die Sequenz anordnet. Wir platzieren auch Methoden nacheinander: Was wird bezeichnet? Verkettung.
tmax_tl.to (Element, 1, x: 200) .to (Element, 1, y: 200, '+ = 1') // 1 Sekunde nach Ende des vorherigen () Tween .to (Element, 1, Drehung: 360, '- = 0,5') // 0,5 Sekunden vor dem Ende von () zwischen (1) (Element, 1, Skala: 4, 6); // Genau 6 Sekunden ab Beginn der Zeitleiste
Sie können sich das Positionsargument als eine Möglichkeit vorstellen, die Platzierung eines Tweens auf der Timeline zu steuern (standardmäßig ist dies das Ende der Timeline und wird als dargestellt.) '+ = 0'). Verwenden Sie eine Zahl, um eine absolute Zeit in Sekunden anzugeben. Die Präfixe wie '+ =' oder '- =' helfen, den Einfügepunkt relativ zum zu verschieben Ende der Zeitleiste. Zum Beispiel, '+ = 2' würde das Tween zwei Sekunden nach dem Ende platzieren und eine Lücke von zwei Sekunden lassen.
Wenn Sie fertig sind, twittern Sie den CodePen-Link an @greensock, damit Sie sich besonders fühlen können.
Sie können sich Beschriftungen als eine Möglichkeit vorstellen, Markierungen in Ihre Animation einzufügen, damit Sie später in der Sequenz auf genaue Punkte verweisen können. Dies könnte ein Punkt sein, an dem #objectX bewegt sich dann 100px von oben #objectY hat eine überlappende Interaktion 0,5 Sekunden in die #objectX Sequenz.
Stellen Sie bei der Verwendung von Labels sicher, dass Sie einen Zeichenfolgewert verwenden, um anzugeben, wo ein Tween platziert werden soll, und das Position Timing-Argument einschließen, um den Ausführungspunkt zu steuern.
Accentsconagua
// Tweens werden an und relativ zur Position eines Labels eingefügt var tmax_tl = new TimelineMax (); tmax_tl.to ('# green', 1, x: 750) // blueGreenSpin-Label 1 Sekunde nach Ende der grünen Sequenz hinzufügen… add ('blueGreenSpin', '+ = 1') .to ('# blue') , 2, x: 750, Rotation: 360, 'blueGreenSpin') // Tween bei blueGreenSpin-Label .to hinzufügen ('# orange', 2, x: 750, Rotation: 360, 'blueGreenSpin + = 0,5') ; // Tween 0,5 Sekunden nach dem blueGreenSpin-Label einfügen Hinweis: Die meisten Methoden tragen Null als Standardwert für das Positionsargument ('+ = 0').
Wenn Sie ein Label definieren, das noch nicht vorhanden ist, wird es vor dem Einfügen des Tweens automatisch am Ende der Timeline hinzugefügt. Dies kann sehr praktisch sein.
Methoden helfen uns, den Zweck unserer gewünschten Aktion (en) auszuführen, oder anders ausgedrückt, die Aktion, die wir für jede Sequenz auf unserer Timeline ausführen möchten.
Lassen Sie uns aus wissenschaftlichen Gründen eine Methode schreiben, die ein einzelnes Objekt mit einer ID von nimmt #objectA und bewegen Sie es auf die rechte Seite des Bildschirms. So würde das mit der to () -Methode aussehen:
/ * .to (Ziel: [Objekt || Array], Dauer: Anzahl, Vars: Objekt, Position: *) * / tmax_tl.to ($ ('# objectA'), 1, left: '100px') ; Das Wichtigste, das Sie anhand des obigen Codes beachten sollten, ist die Tatsache, dass wir auch die Hilfe von CSS benötigen (Position: absolut) um unsere Anfrage auszuführen (Objekt verschieben). Denken Sie daran, dass Elemente in Webland eine statische Position haben. Wenn Sie also ein Objekt mit dem oben beschriebenen Ansatz verschieben möchten, müssen Sie sicherstellen, dass die entsprechenden CSS-Eigenschaften vorhanden sind. Andernfalls wird nichts passieren.
Es ist höchste Zeit, dass Sie etwas anderes zu analysieren hatten, denken Sie nicht?
Die folgende Demo verwendet die zu() Methode, um jeden Kreis eines Laders zu steuern (Sie könnten einen einfacheren Ansatz verwenden, aber es gibt einen Punkt für diesen Wahnsinn). Versuchen Sie, die äußeren Kreise und den mittleren Kreis in ihrer Bewegung unter Verwendung des Positionstiming-Arguments zu verschieben. Ziel der Übung ist es, visuell zu verstehen, wie der Positionsparameter eine Überlappung Ihrer Tweens während der Sequenz ermöglicht. Wie Sie im folgenden .gif sehen können, wird das Tween jedes Kreises zur gleichen Zeit ausgelöst. Versuchen Sie, dieser Animation etwas Würze zu verleihen, indem Sie die Sequenz überlappen, wie Sie es in der animierten GIF gesehen haben, die für das Intro dieses Beitrags verwendet wurde. Viel Glück, lass uns wissen, wie es dir geht!
// Letztes Argument ist Position Timing. // Verwenden Sie dieses Argument, um die Sichtbarkeit der umgebenden Kreise zu verschieben. Tmax_tl.to ($ ('svg> circle: nth-of-type (1)'), 1, tween_options_to, 0) .to ($ ('svg> circle: n-ter-Typ (2) '), 1, tween_options_to, 0) .to ($ (' svg> Kreis: n-th-Typ (3) '), 1, tween_options_to, 0) .to ($ (' svg> circle: nth-of-type (4) '), 1, tween_options_to, 0) .to ($ (' svg> circle: nth-of-type (5) '), 1, tween_options_to, 0) .to ($ ('svg> Kreis: n-ter-Typ (6)'), 1, tween_options_to, 0) .to ($ ('svg> Kreis: n-t-Typ (7)'), 1, tween_options_to, 0) 
Sehen Sie sich den Stift an, verzahnen Sie ihn und machen Sie beim Timing herum Wenn Sie auf dieser Animationsreise vorankommen möchten, können Sie sich mit der GreenSock-Dokumentation fortfahren. Informieren Sie sich speziell über TweenLite und TweenMax. Bleiben Sie dran für die nächste Ausgabe dieser Serie, die die wunderbare Welt des Tweenings abdeckt! Ich hoffe dich bald wieder zu sehen!
