Share
Was ist TimelineMax? Was unterscheidet es von anderen GSAP-Bibliotheken (GreenSock Animation Platform)? Warum brauche ich TimelineMax über TimelineLite? Wie verstehe ich die Parameter für TimelineMax? Wenn Sie eine dieser Fragen stellen, sind Sie an der richtigen Stelle.
Willkommen zur Einführung in eine Tuts + -Serie, in der TimelineMax von GreenSock behandelt wird. Machen Sie sich bereit für eine explosive, umwerfende Serie, die Sie zu einem Animationsprofi macht.
TimelineMax ist ein JavaScript-Sequenzierungstool, das als Container für Tweens und andere Timelines fungiert. Dadurch wird es einfacher, sie als Ganzes zu steuern und ihr Timing präzise zu verwalten. TimelineMax bietet Methoden, um den Zugriff auf verschiedene Aspekte Ihrer Animation zu ermöglichen. Sie kann außerdem die Geschwindigkeit einer Timeline zur Laufzeit dynamisch anpassen und vieles mehr.
Hinweis: Tweening ist eine Abkürzung von dazwischen Frames zwischen Zuständen in erstelleneine Animationssequenz.
TimelineMax erweitert TimelineLite und bietet genau die gleiche Funktionalität sowie zusätzliche (jedoch nicht unbedingt notwendige) Funktionen wie:
Accentsconagua
wiederholenWiederholungsverzögerungYoyocurrentLabel ()tweenTo ()tweenFromTo ()getLabelAfter ()getLabelBefore ()aktiv werden() TimelineMax gibt Ihnen als Autor die Möglichkeit, Tweens auf der Timeline beliebig zu überlappen. Als Animationsprofi haben Sie die vollständige Kontrolle darüber, wo die Tweens auf der Timeline platziert werden. Die meisten anderen Animationswerkzeuge können in erster Linie ein Basic ausführen einer nach dem anderen Sequenzierung, aber nicht zulassen, dass sich Tweens überlappen. Stellen Sie sich vor, Sie fügen ein Tween an, das ein Objekt bewegt, und Sie möchten, dass es 0,5 Sekunden vor dem Ende des Tween-Objekts ausgeblendet wird. Mit TimelineMax ist es wesentlich sauberer und extrem robust, um all dies zu ermöglichen.
Wichtige Plugins wie CSSPlugin (zur Bereitstellung von CSS-Herstellerpräfixen), RoundPropsPlugin, DirectionalRotationPlugin, AttrPlugin und BezierPlugin sind in TweenMax und TimelineMax enthalten. Da TweenMax Ihnen TimelineMax und alle anderen zuvor aufgelisteten Goodies zur Verfügung stellt, empfiehlt GreenSock die Verwendung von TweenMax für die meisten Anwendungsfälle. Das Laden von TweenMax ist einfach praktischer, da eine Datei so ziemlich alles enthält, was Sie brauchen.
Um zu beginnen, müssen Sie das TweenMax-Skript herunterladen und in Ihr HTML-Dokument laden vorher zu Ihrem benutzerdefinierten Animationsskript. Glück für uns CDNJS hat eine Kopie für uns (es gibt auch eine auf GitHub).
TimelineMax ermöglicht benutzerdefinierte Konfigurationsoptionen durch die Verwendung eines Objektliteral. Lass uns untersuchen, wie das aussieht.
TimelineMax (Vars: )
Der Teil, den Sie mit sehen geschweifte Klammern ist das Objektliteral, das unsere Konfiguration enthalten wird. Das heißt, wir können einfügen Schlüsselwert Paarungen innerhalb dieser Klammern, um zu definieren, wie sich unsere Zeitleiste verhält. Die gesamte Linie TimelineMax (Vars: ) Dies wird in den TimelineMax-Dokumenten als "Konstruktor" bezeichnet.
Hier ist die gesamte TimelineMax-Konfiguration, wobei jeder Schlüssel seinen Standardwert erhält. Platzieren Sie diese ganz oben in Ihrer JavaScript-Animationsdatei (in unserem Beispiel oben "my-timelinemax-animation.js" genannt). Wir listen hier nur die gesamte Konfiguration auf, damit Sie die vielfältigen Konfigurationsmöglichkeiten von TimelineMax sehen können. Normalerweise enthält Ihr Konfigurationsobjekt nur die für Anpassungen erforderlichen Eigenschaften. Weitere Informationen zu diesen Optionen finden Sie in der TimelineMax-Dokumentation.
var tmax_options = delay: 0, pausiert: false, onComplete: function () console.log ('Animation ist abgeschlossen'); , onCompleteScope: , Tweens: [], Stagger: 0, align: 'normal', useFrames: false, onStart: function () console.log ('beim Start aufgerufen'); , onStartScope: , onUpdate: function () console.log ('bei Aktualisierung aufgerufen'); , onUpdateScope: , onRepeat: function () console.log ('bei Wiederholung aufgerufen'); , onRepeatScope: , onReverseComplete: function () console.log ('on reverse complete'); , onReverseCompleteScope: , autoRemoveChildren: false, smoothChildTiming: false, Wiederholung: 0, repeatDelay: 0, yoyo: false, onCompleteParams: [], onReverseCompleteParams: [], onStartParams: [], onStartParams: ]; Nun, da Sie die Konfiguration eingerichtet haben und ihre Optionen verstehen, können Sie Ihre benutzerdefinierte Objekt-Literal-Konfiguration an die übergeben TimelineMax () Konstruktor, fügen Sie also am Ende Ihrer Datei Folgendes hinzu:
var tmax_tl = new TimelineMax (tmax_options);
Tweens werden mit Methoden wie erstellt zu(), von() und staggerFrom () nur um ein paar zu nennen. Wie Sie zuvor gesehen haben, haben wir unser Optionsobjekt als Argument an den TimelineMax-Konstruktor übergeben. Jetzt müssen wir einige Objekte bewegen, um unsere Füße nass zu machen. Der Einfachheit halber verschieben wir zwei Kreise von links und oben im Ansichtsfenster:
Überprüf den JS Registerkarte im obigen Beispiel, um zu sehen, wie der Effekt erzielt wird. Wie bereits erwähnt, habe ich den TimelineMax-Konstruktor für die Szene oben eingerichtet und das Objektliteral mit den Optionen der Zeitleiste übergeben:
var tl = new TimelineMax (tmax_options)
Jeder Kreis enthält ein Ich würde für mich, um sie zu referenzieren durch:
var tl = new TimelineMax (tmax_options), circle_top = $ ('# circle-top'), circle_bottom = $ ('# circle-bottom'); und dann die zu() Diese Methode wird verwendet, um das Tween zu steuern.
tl.to (circle_top, 1, left: 100) .to (circle_bottom, 1, top: 100);
Innerhalb zu() Wir sagen effektiv: "Verwenden Sie das Element, das als erstes Argument übergeben wird, und verschieben Sie es aus dem linken 100px. Dann benutzen Sie die zu() Methode nach unserem ersten angekettet zu() Methode, um dasselbe zu tun, aber das Element von den oberen 100px zu verschieben. "
Beachten Sie, dass der Kreis, der sich von oben bewegt, ausgelöst wird, sobald sich der Kreis von links bewegt hat abgeschlossen seine Bewegung (Tween). In den folgenden Tutorials erfahren Sie, wie Sie Elemente zu unterschiedlichen Zeitpunkten steuern und mit der die Zeitleiste entlang der Zeitachse beschleunigen Position Parameter.
Wenn Sie auf dieser Animationsreise vorankommen möchten, können Sie die GreenSock-Dokumentation für den Einstieg beginnen. Bleiben Sie dran für das nächste in der Serie dieses Animationsabenteuers, in dem ich über Dinge wie Labels, Versatz, Pausen, Argumente und das Erlernen der Anpassung von Optionen an elf gehe. Bis zum nächsten Mal!
