Share
Plugins für GSAP eignen sich hervorragend, wenn Sie erweiterte Funktionen benötigen. Das BezierPlugin, das in diesem Lernprogramm erläutert wird, hilft beim Animieren von praktisch allen Eigenschaften (oder Eigenschaften) entlang eines gekrümmten Bezierpfads, der als Array von Punkten / Werten definiert ist. Bevor wir einsteigen, sollten wir uns einen Moment Zeit nehmen, um zu erfahren, was eine Bezier-Kurve ist und woher sie kommt.
In dieser primitiven Zeit des Handzeichnens waren Grafikdesigner mit Werkzeugen, die "French Curves" genannt wurden, bestens vertraut. Diese eigenartig geformten Teile (normalerweise aus dünnem Kunststoff) halfen Konstrukteuren bei der Erstellung eleganter Kurven, so wie wir es heute mit dem Stift sehen Werkzeug in Illustrator.
Ursprüngliches Handwerkzeug, die französische Kurve, die von vielen Grafikdesignern und Typographen verwendet wird (src: Wikipedia).
Diese komplizierten Pfade nennen wir "Bézier-Kurven". In der digitalen Welt werden sie als eine Reihe von Punkten ausgedrückt, die mathematisch berechnet werden, um Linien zu eleganten und verzierten Formen zu biegen. Insbesondere wird eine Bézier-Kurve verwendet, um glatte Kurven zu modellieren, indem eine Reihe von aufgezeichneten Punkten verwendet wird, die durch einen Pfad miteinander verbunden sind.
Bézier Curves, wie wir sie digital sehen. Das obige Beispiel wurde aus dem Stiftwerkzeug von Illustrator übernommen: Die umfassende Anleitung
Bézier Curves wurde im Jahr 1962 von dem französischen Ingenieur Pierre Bézier, der diese verzierten Pfade für die Konstruktion von Automobilkarosserien bei Renault nutzte, in großem Umfang veröffentlicht. Die erste Studie der Bézier-Kurve wurde jedoch erstmals 1959 vom Mathematiker Paul de Casteljau unter Verwendung des Algorithmus von de Casteljau entwickelt, einer numerisch stabilen Methode zur Bewertung von Bézier-Kurven bei Citroën. Vektorillustratoren haben der Automobilindustrie viel zu verdanken!
Für wahnsinnig Neugierde, hier ist eine großartige Erklärung der Bézier-Kurven, genannt Cubic Bézier Curves - Under the Hood, die detailliert erklärt, wie die Kurve konzeptionell aus mathematischen und visuellen Gründen entsteht.
Mit dem Bézier eins zu werden, macht Sie zu einem großartigen Jedi, aber nur ein echter Bézier Jedi versteht die verschiedenen Arten und Geschmacksrichtungen, zu denen Bézier-Kurven kommen. Die häufigsten Kurven sind typisch Quadratisch und Kubisch wie Sie in den meisten Anwendungsfällen sehen werden.
Bevor wir uns erneut mit GSAP beschäftigen, ist es wichtig, dass Sie bedenken, dass ich TweenMax aus zuvor genannten Gründen verwende. Das BezierPlugin ist für uns bereits verpackt!
Wie ich Ihnen am Anfang unserer GreenSock Journey gezeigt habe, instantiieren wir eine Zeitleiste, um dieser Animation eine Bühne zu geben, in der sie sich präsentieren kann, sowie eine Möglichkeit, jede Sequenz zu steuern.
Vorausgesetzt, wir haben die Timeline-Einrichtung und die Mechanismen sortiert, können wir untersuchen, wie das BezierPlugin geschrieben und verwendet wird. Beachten Sie, dass unsere Werte für die Bézier-Pfade nur eine Reihe von X- und Y-Koordinaten sind, die als kartesisches Koordinatensystem bezeichnet werden. Beim Authoring müssen Entwickler sicherstellen, dass jedes Objekt im Array übereinstimmende Eigenschaftsnamen aufweist.
var bezier_path = [x: Wert, Y: Wert, X: Wert, Y: Wert]; tl.staggerTo (Element, Dauer, Bezier: Typ: 'thru', Werte: Bezier_Pfad, Kurviness: 1, Leichtigkeit: Power1.easeInOut, Stagger_value);
Stellen wir uns vor, wir hätten auf einen SVG-Kreis gezeigt, der den Selektor passiert, wo Sie sehen Element, dann das einstellen Dauer auch. Geben x und y Werte und a Kurvigkeit von 1 führt dazu, dass unser SVG-Kreis auf einer Kreisbahn wie folgt animiert wird:
Untersuchen Sie die Quelle, um ausführlichere Informationen zur Funktionsweise zu erhalten.
Schon seit durch ist der Standard-Bézier Art, Sie müssen überhaupt keinen Typ definieren. Werte erhöhen und anpassen wie kurven kann einige wirklich interessante Pfade für Animationen erstellen. Mit dem Kreis, den wir uns oben angesehen haben, habe ich mir die Freiheit genommen, ein paar weitere SVG-Kreise hinzuzufügen und den Krümmungswert anzupassen (12, um genau zu sein).
Hier ist ein Überblick über die wahrhaft akzeptierten Bézier-Typen. Wenn Sie vorhaben, die Kurvigkeit Eigenschaft (mit der Sie die Spannung am Bézier einstellen können), müssen Sie sicherstellen, dass Sie die durch Art.
Accentsconagua
durch (Standardeinstellung): Das Plugin ermittelt, wie der Bézier mithilfe eines proprietären GreenSock-Algorithmus auf natürliche Weise durch die angegebenen Werte gezeichnet wird.weich: Die im Array angegebenen Werte wirken fast wie Magnete, die die Kurve zu sich ziehen, aber der Bézier bewegt sich normalerweise nicht durch sie hindurch.quadratisch: Definieren Sie standardmäßige quadratische Bezier-Daten (quadratische Beziers haben einen Kontrollpunkt zwischen jedem Anker).kubisch: Ermöglicht die Definition von Standard-Cubic Bezier-Daten (Cubic Béziers haben zwei Kontrollpunkte zwischen jedem Anker).thruBasic: Das ist das Gleiche wie durch Es verwendet jedoch einen weniger komplexen Algorithmus für die anfängliche Darstellung des Bezier durch die angegebenen Werte.Mit dem BezierPlugin können Entwickler zusätzlich zu den x- und y-Koordinaten auch andere Eigenschaften animieren. Sie können tatsächlich andere Eigenschaften wie Transformationen, Deckkraft und vieles mehr animieren! Es ist nicht sehr üblich, dies zu tun, aber es ist durchaus möglich. Eigenschaften wie Drehung, Skalierung und sogar benutzerdefinierte Beispiele!
Zum Beispiel könnten wir die animieren Opazität zusammen mit x und y, da ich gerade demonstriere (beachten Sie, dass jedes Objekt im Array über die Opazitätseigenschaft verfügen muss).
var bezier = [x: 0, y: 0, Deckkraft: 0, x: 0, y: 42, Deckkraft: 0, x: 42, y: 42, Deckkraft: 1, x: 42 y: 0, Deckkraft: 1, x: 0, y: 0, Deckkraft: 0];
Schauen wir uns ein paar weitere Funktionen an, wenn Sie sich sicher fühlen.
Diese Funktion dreht das Ziel automatisch entsprechend seiner Position auf dem Bézier-Pfad.
Ob schick ist das, wonach du strebst, dann sei es super schick und animieren Sie ein Objekt auf einem Bézier-Pfad, wie es Jan Paepke für sein ScrollMagic-Projekt demonstriert. Definieren Sie die Kurvenpunkte und geben Sie sie in Ihre Tween-Definition ein, um entlang einer definierten Kurve zu animieren.
Bleiben Sie dran für mein nächstes Abenteuer in dieser TimelineMax-Serie, in der ich Sie in ein anderes GSAP-Plugin namens Draggable stürze. Mit Draggable-aktivierten Zeitleisten experimentieren wir, um ein Slide-Out-Menü zu erstellen, in das es zum Öffnen gezogen und zum Schließen gezogen werden kann. Bis bald Animationsprofis!
