Beginnen Sie mit der GreenSock-Animationsplattform

Mit GreenSock Animationsplattform (GSAP) können Sie alles animieren, was Sie mit JavaScript mit JavaScript einschließlich DOM, CANVAS und CSS, sowie Ihre eigenen benutzerdefinierten Objekte animieren können.

GSAP hilft auch, Browser-Inkonsistenzen für einfacher zu lösen Benutzertest (gut Web-Hosting Kann auch hier helfen), können Sie Objekte verwenden, um komplexe Animationen zu verwalten, und läuft bis zu 20-mal schneller als jQuery. Es ist in der Branche zum Standard geworden und wurde in unzähligen preisgekrönten Websites verwendet. Bekam eine Seite zum Bau? Hier ist unser Leitfaden zum Besten Webseitenersteller um.

01. Richten Sie eine grundlegende HTML-Datei ein

Der beste Weg, GSAP zu lernen, ist, es in Aktion zu sehen. In diesem Tutorial erfahren Sie über die wichtigsten Funktionen der Plattform mit den Arbeitsbeispielen, die Sie heute in Ihren Projekten verwenden können!

Erfahren Sie, indem Sie eine grundlegende HTML-Datei einrichten, in der Sie in Ihrem JavaScript-Code fielen können. Fügen Sie ein Bild mit einem ein Logo Klasse. Sie verwenden GSAP, um Eigenschaften animieren, um zu sehen, wie es funktioniert.

 & lt; html lang = "de" & gt;
& lt; head & gt;
  & lt; style & gt;
    .logo {Breite: 150px; }
  & lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; img class = "logo"
src = "logo.svg" / & gt;
& lt; script & gt;
// Code hier.
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt; 

02. Fügen Sie die GSAP-Bibliothek ein

Als nächstes müssen Sie GSAP Ihrem Webprojekt hinzufügen. Zwischen dir & lt; bild & gt; und & lt; script & gt; Tags, fügen Sie einen Link in die GSAP-Bibliothek ein. Sie können den Reißverschluss direkt von herunterladen Hier oder schnappen Sie es aus Github (Wenn Sie Dateien zum Teilen haben, wählen Sie das perfekte Cloud-Speicherung. ). Dateien werden auch auf der super-Fast CloudFlare CDN gehostet, sodass die einfachste Weise die gehosteten Dateien so verwenden soll:

 & lt; Skript SRC = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/tweMax.min.js" & gt; & lt; / script & gt; 

03. Animieren mit Tweening

Das Tweening ist der Prozess des Änderns eines Werts im Laufe der Zeit, um eine Animation zu erstellen. Wenn Sie beispielsweise ein Objekt von A bis B bewegen, oder drehen. Sie können auch zwischen Ihren eigenen benutzerdefinierten Werten sein.

Der einfachste Weg in Tween einer Immobilie ist die Verwendung der Tweenmax.to () Funktion. Dies erfordert ein Zielobjekt, eine Dauer und die Eigenschafts- / Wertpaare, die Sie animieren. Um die Funktion in Aktion anzuzeigen, probieren Sie jede der Codezeilen unter Verwendung der Logo Als Zielobjekt:

 // Tween X Position von Strom
auf 400 über 2 Sekunden
Tweenmax.to (". Logo", 2, {x: 400});
// Tween y Position von der aktuellen
bis 200 und Deckkraft auf 0 über 1
zweite
Tweenmax.to (". Logo", 1, {y: 200, Deckkraft: 0});
// Tween x und y bis 100, Maßstab bis
1,5 und drehen Sie 90 Grad über 2
zweite
TweenMax.to (". Logo", 2, {x: 100, y: 100, Maßstab: 1,5, Rotation: 90}); 

04. Tween aus und von von

Sie können eine Immobilie von seinem aktuellen Wert auf ein neues verwenden zu() , aber Sie können auch zwingen von ein Wert auf seinen aktuellen Wert. Wenn Sie zum Beispiel Ihre Logo startet mit x Position 0. Und Sie möchten, dass es dort endet, Sie könnten dies tun:

 TweenMax.From (". Logo", 2, {x: 400}); 

In diesem Fall bewegt sich Ihr Logo sofort zu x = 400. und dann zwischen x = 0. . Sie können sogar sowohl die Start- als auch die Endwerte definieren, um die aktuellen Werte mitzusetzen von bis() so was:

 TweenMax.fromto (". Logo", 2, {x: 400}, {x: 200}); 

05. Lockerung.

Lockerung ist der "Stil" der Animation, da die Werte von A bis B. Anstelle einer konstanten Geschwindigkeitsrate, die als "linear" bezeichnet wird, die Funktionen anwenden, um die Geschwindigkeitsrate zu krümmen. Beginnen sie langsam und beschleunigen sie allmählich? Kommen sie zu einem abrupten Anschlag und springen am Ende ein wenig? In Animation fügen diese Stile Charakter und Emotion an Ihre Arbeit hinzu. Sie können eine Lockerfunktion so anwenden:

 TweenMax.to (". Logo", 2, {x: 100, y: 100, rotation: 90, leichtigkeit: circ.easeein}); 

06. Funktionen und In / Out

GSAP enthält eine Vielzahl von Lockerfunktionen, wie z zurück , prallen , elastisch , Sünde , umkreisen , und Messe . Möglicherweise haben Sie auch bemerkt, dass das Leichtigkeit Funktion hat eine Eigenschaft von ärgerlich , was wir in dem obigen Schritt verwendet haben. Sie können auch verwenden Entschuldigung und ärgerlich. . Diese geben an, wo die Lockerkurve in der Animation angewendet wird. Probieren Sie das Folgende aus, um die Ergebnisse anzuzeigen:

 // Mit einem Bounce leiten
Tweenmax.to (". Logo", 2, {x: 100, y: 100, Rotation: 90, Leichtigkeit: Bounce.Easeout});
// In und raus mit elastisch
TweenMax.to (". Logo", 2, {x: 100, y: 100, Rotation: 90, Leichtigkeit: elastisch.ebeeinigt}); 

07. Verzögern Sie ein Tween

Manchmal möchten Sie den Start einer Animation verzögern, entweder um es mit einer anderen Animation zu synchronisieren oder darauf zu warten, bis ein Ereignis auftritt. Sie können ein anderes GSAP-Special-Eigenschaften namens verwenden verzögern um dies zu tun. Testen Sie den folgenden Code, um zu sehen, wie Sie Tweens für ein bestimmtes Timing verzögern können:

 TweenMax.to (". Logo", 1, {y: 100, Leichtigkeit: Bounce.Easeout});
// Verzögern Sie dieses Tween um 1 Sek
TweenMax.to (". Logo", 1, {Rotation: 90, Leichtigkeit: zirk.eeTout, Verzögerung: 1}); 

08. Rückruffunktionen

Um Animationen mit Ihrem Code zu integrieren, ist es wichtig, zu wissen, wann Ereignisse auftreten, insbesondere wenn eine Animation endet oder beginnt. Du kannst den ... benutzen oncomplete Ereignis Rückruf dafür. Sie möchten vielleicht wissen, wann ein Tween beginnt, verwenden am Start . Und Sie möchten Ihre Tween auch mit einer anderen Animation synchronisieren, oder verwenden Sie die Tween und deren Erleichterung, um ein anderes benutzerdefiniertes Objekt zu aktualisieren. Benutze das onupdate Callback dafür. So verwenden Sie den Rückruf:

 TweenMax.to (". Logo", 1, {
y: 100,
Leichtigkeit: Bounce.eeTout,
oncomplete: TweenComplete.
});
Funktion TweenComplete () {
console.log ("Tween Complete");
} 

09. Callback-Parameter

Beim Brennen von Callbacks möchten Sie möglicherweise Informationen zusammen mit dem Rückruf an die Funktion, die es behandelt, Informationen übergeben. Möglicherweise müssen Sie Informationen über den Anrufer oder den spezifischen Werten weitergeben. Auf diese Weise können Sie Ihre Animationen mit dem Rest Ihrer Codebasis integrieren. Alle Parameter werden über übergeben Callback + "params" , das ist onupdateparams. .

Im folgenden Beispiel können Sie den Fortschritt des Tween mit dem Schlüsselwort verfolgen {selbst} und kann sehen, wie Sie mehrere Parameter mit einem Array weitergeben können:

 TweenMax.to (". Logo", 1, {
y: 100,
Leichtigkeit: Bounce.eeTout,
onupdate: tweenupdate,
onupdateparams: ["{self}",
"abgeschlossen"]
});
Funktion TweenUpdate (Tween,
Botschaft) {
VAR-Prozentsatz = Tween.
Fortschritt () * 100; // Fortschritt()
ist ein Wert 0-1
console.log (Prozentsatz +
"" + Nachricht);
} 

10. Animationen steuern

Okay, Sie können jetzt Tweens erstellen und die Tweens, Feuerrückrufe und Parameter lindern. Aber wie kontrollst du Animationen? Oft möchten Sie sie basierend auf anderen Ereignissen starten oder anhalten.

Wenn Sie eine Animation anhalten müssen, können Sie das verwenden Pause() Methode. Wenn Sie einen Tween wieder aufnehmen möchten, verwenden Sie weitermachen() . Einen Tween-Gebrauch total zerstören töten() . Probieren Sie das Folgende aus und sehen Sie, was passiert:

 // var, um auf Tween Bezug zu halten
VaR Tween = TweenMax.to (".
Logo ", 2, {y: 100, Leichtigkeit: Bounce.
Easeout});
// Pause sofort?
tween.pause ();
// Beginnen Sie mit der Veranstaltung
Settimeout (Funktion () {Tween.
Lebenslauf ()}, 1000);
// Reverse Animation auf Ereignis
Settimeout (Funktion () {Tween.
umgekehrt ()}, 3000); 

11. CSS und CSSPLUGIN

Das CSSPlugin ist bei der Verwendung enthalten Tweenmax. . Es ist ein riesiger Zeitschoner, indem er Verhaltensweisen über Browsern normalisiert und automatisch erkennt, wenn es für Animationen benötigt wird. CSSPlugin kann mit Color Tweens, SVG-Animationen und optimierter Leistung mit Caching und anderen internen Tricks umgehen - und es ist oft effizienter, Positionen über CSS zu übersetzen.

Sie haben dies bereits in Aktion gesehen, wenn Sie das verwendet haben Opazität und Position Animationen. Es funktioniert ohne spezielle Codierung!

12. 2D- und 3D-Transformationen

Mit CSS-Transformationen können Sie skalieren, übersetzen und verschieben. Sie arbeiten sowohl in 2D als auch in 3D, um schnell schöne Effekte zu erstellen. GSAP enthält eingebaute Transformationseigenschaften wie X. , y. , Drehung , Rotationx. , Rotation , skewx und Rahmen . Versuchen Sie, das folgende Tween an Ihr Bild anzuwenden, anstatt diejenigen, die wir bereits ausprobiert haben:

 TweenMax.to (". Logo", 3, {
x: 100,
y: 100,
Maßstab: 1.5,
Rotationy: 360,
Leichtigkeit: Bounce.Easeout}); 

13. Zeitpläne

Sobald Sie sich über ein oder zwei Tweens überschreiten, fragen Sie sich vielleicht, wie Sie mehrere Animationen verwalten können. GSP enthält A. Zeitleiste Objekt, um genau das zu tun. Sie hängen Twesen an Zeitleiste Objekt und kann das verwenden Position Parameter nach dem Tween zu Zeit. Sie können zweier nach dem anderen laufen lassen oder Lücken haben oder sogar überlappen. Fügen Sie Ihrem HTML ein paar weitere Bilder hinzu logo2. und logo3. beziehungsweise.

Um zu sehen, wie es funktioniert, probieren Sie das Folgende aus Zeitleiste Code:

 // Erstellen Sie eine Timeline-Instanz
var tl = neuer timelinemax ();
tl.add (tweenmax.to (". logo", 1,
{x: 50}););
// Beachten Sie das Finale "0", um zu machen
Dieser beginnt um 0 Sek.
tl.add (tweenmax.to (". logo2", 1,
{y: 100}), "0");
// Beachten Sie das "+.25", um dies zu machen
Eins beginnt bei 0,25 s
tl.add (tweenmax.to (". logo3", 1,
{rotationy: 180, y: 50,
X: 50}), "+. 25"); 

14. Timeline Control.

Neben der Steuerung von Animationen möchten Sie möglicherweise auch Zeitlinien steuern. Glücklicherweise können Sie pausieren, wieder aufnehmen und umkehren, wie Sie mit Animationen können. Sie können der Timeline auch Parameter hinzufügen wiederholen , yoyo. und fügen Sie Callbacks für die gesamte Timeline hinzu. Sie können auch die Geschwindigkeit eines Timeline mit der Zeitstrahl Eigentum. Ersetzen Sie Ihre Timeline-Deklaration mit dem folgenden Code, um zu sehen, wie es funktioniert:

 var tl = neuer timelininemax ({
// In unendlich wiederholen
Wiederholen: -1,
YOYO: TRUE,}); 

15. Eigenschaften abrufen und festlegen

Ein Merkmal, das wirklich nützlich ist, ist, die Eigenschaften von Tweens und Zeitplänen zu erhalten und einzustellen. Auf diese Weise können Sie den Gesamtfortschritt und die Dauer kennenlernen oder andere Informationen über ein GSAP-Objekt sammeln. In diesem Codebeispiel können Sie erhalten die Dauer der Zeitleiste und dann einstellen seine Dauer, um es zu ändern. Dies funktioniert auch für Tweens. Es ist eine weitere großartige Möglichkeit, in Echtzeit auf Ereignisse zu reagieren und Animationen in der Fliege zu ändern. Fügen Sie nach Ihrem vorherigen Timeline-Code das Folgende hinzu:

 // Holen Sie sich die aktuelle Dauer von
die Timeline
console.log (tl.dy ());
// Legt die Dauer auf 5 Sekunden fest
Nach einem 2 Sekunden warten
Settimeout (Funktion () {
tl.dauer (5);
}, 2000); 

Dieser Artikel wurde ursprünglich im Creative Web Design Magazine Webdesigner veröffentlicht. Ausgabe 279 kaufen oder abonnieren .

Weiterlesen:

• Supercharge SVG-Animationen mit GSAP
• Exportieren Sie After Effects-Animationen an HTML5
• So erstellen Sie Animationen, die für alle Geräte skaliert werden