Beginnen Sie mit der GreenSock Animation Platform

GreenSock Animation Platform-Logo

Mit der GreenSock Animation Platform (GSAP) können Sie alles animieren, auf das Sie mit JavaScript zugreifen können, einschließlich DOM, Canvas und CSS sowie Ihre eigenen benutzerdefinierten Objekte.

GSAP hilft auch dabei, Browser-Inkonsistenzen zu vereinfachen Benutzertests , ermöglicht die Verwendung komplexer Objekte zum Verwalten komplexer Animationen und läuft bis zu 20-mal schneller als jQuery. Es ist zu einem Standard in der Branche geworden und wurde auf unzähligen preisgekrönten Websites verwendet.

01. Richten Sie eine einfache HTML-Datei ein

Erste Schritte mit GSAP: Richten Sie eine einfache HTML-Datei ein



Fügen Sie dem ein Bild hinzu Logo Klasse in Ihrer HTML-Datei

Der beste Weg, um GSAP zu lernen, besteht darin, es in Aktion zu sehen. In diesem Tutorial lernen Sie die wichtigsten Funktionen der Plattform anhand von Arbeitsbeispielen kennen, die Sie heute in Ihren Projekten verwenden können!

Beginnen Sie mit dem Einrichten einer einfachen HTML-Datei, in die Sie Ihren JavaScript-Code einfügen können. Fügen Sie ein Bild mit einem Logo Klasse. Sie werden GSAP verwenden, um Eigenschaften zu animieren und zu sehen, wie es funktioniert.

wie man Schritt für Schritt einen realistischen Bären zeichnet
.logo { width:150px; } // code here

02. GSAP-Bibliothek einschließen

Als Nächstes müssen Sie Ihrem Webprojekt GSAP hinzufügen. Zwischen deinem und Tags, fügen Sie einen Link zur GSAP-Bibliothek ein. Sie können die ZIP direkt von herunterladen Hier oder nimm es von GitHub . Dateien werden auch auf dem superschnellen Cloudflare-CDN gehostet. Der einfachste Weg besteht darin, die gehosteten Dateien wie folgt zu verwenden:

03. Animieren Sie mit Tweening

Beim Tweening wird ein Wert im Laufe der Zeit geändert, um eine Animation zu erstellen. Verschieben Sie beispielsweise ein Objekt von A nach B, skalieren Sie es oder drehen Sie es. Sie können auch zwischen Ihren eigenen benutzerdefinierten Werten wechseln.

Der einfachste Weg, eine Eigenschaft zu tweeten, ist die Verwendung von TweenMax.to () Funktion. Dies erfordert ein Zielobjekt, eine Dauer und die Eigenschaften / Wert-Paare, die Sie animieren. Um die Funktion in Aktion zu sehen, probieren Sie jede der folgenden Codezeilen mit dem aus Logo als Zielobjekt:

// tween x position from current to 400 over 2 seconds TweenMax.to('.logo',2,{x:400}); // tween y position from current to 200 and opacity to 0, over 1 second TweenMax.to('.logo',1,{y:200, opacity:0}); // tween x and y to 100, scale to 1.5, and rotate 90 deg, over 2 second TweenMax.to('.logo',2,{x:100, y:100, scale:1.5, rotation:90});

04. Tween von und von bis

Beginnen Sie mit GSAP: Tween from und FromTo

Sie können sowohl Start- als auch Endwerte für das Tweening definieren

Sie können eine Eigenschaft mithilfe ihres aktuellen Werts von einem neuen Wert unterscheiden zu() , aber Sie können auch tween von ein Wert auf seinen aktuellen Wert. Zum Beispiel, wenn Ihr Logo beginnt an der 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 wechselt Ihr Logo sofort zu x = 400 und dann zwischen x = 0 . Sie können sogar sowohl den Start- als auch den Endwert definieren und dabei die aktuellen Werte ignorieren von bis() so was:

TweenMax.fromTo('.logo',2,{x:400},{x:200});

05. Lockerung

Beginnen Sie mit GSAP: Easing

Lockerung verleiht Ihren Animationen Charakter

Lockerung ist der 'Stil' der Animation, da die Werte von A nach B wechseln. Anstelle einer konstanten Geschwindigkeitsrate, die als 'linear' bezeichnet wird, können Sie Funktionen anwenden, um die Geschwindigkeitsrate zu krümmen. Beginnen sie langsam und beschleunigen sich allmählich? Kommen sie abrupt zum Stehen und hüpfen am Ende ein wenig? In der Animation verleihen diese Stile Ihrer Arbeit Charakter und Emotionen. Sie können eine Beschleunigungsfunktion wie folgt anwenden:

TweenMax.to('.logo',2,{x:100, y:100, rotation:90, ease:Circ.easeIn});

06. Lockerungsfunktionen und In / Out

Beginnen Sie mit GSAP: Erleichtern von Funktionen und In / Out

Mit GSAP stehen zahlreiche Lockerungsoptionen zur Auswahl

GSAP enthält eine Vielzahl von Beschleunigungsfunktionen, wie z zurück , prallen , elastisch , ohne , Zirkus , und Messe . Möglicherweise haben Sie auch bemerkt, dass die Leichtigkeit Funktion hat eine Eigenschaft von easyIn , die wir im obigen Schritt verwendet haben. Sie können auch verwenden easyOut und easyInOut . Diese geben an, wo die Beschleunigungskurve in der Animation angewendet wird. Probieren Sie Folgendes aus, um die Ergebnisse zu sehen:

// easing Out with a bounce TweenMax.to('.logo',2,{x:100, y:100, rotation:90, ease:Bounce.easeOut}); // easing In and Out with elastic TweenMax.to('.logo',2,{x:100, y:100, rotation:90, ease:Elastic.easeInOut});

07. Verzögern Sie ein Tween

Manchmal möchten Sie den Start einer Animation verzögern, entweder um sie mit einer anderen Animation zu synchronisieren oder um sie auf das Eintreten eines Ereignisses warten zu lassen. Sie können die speziellen Eigenschaften eines anderen GSAP verwenden verzögern um dies zu tun. Probieren Sie den folgenden Code aus, um zu sehen, wie Sie Tweens für ein bestimmtes Timing verzögern können:

TweenMax.to('.logo',1,{y:100, ease:Bounce.easeOut}); // delay this tween by 1 sec TweenMax.to('.logo',1,{rotation:90, ease:Circ.easeOut,delay:1});

08. Rückruffunktionen

Um Animationen in Ihren Code zu integrieren, ist es wichtig zu wissen, wann Ereignisse auftreten, insbesondere wenn eine Animation endet oder beginnt. Du kannst den ... benutzen onComplete Ereignisrückruf dafür. Vielleicht möchten Sie wissen, wann ein Tween beginnt am Start . Möglicherweise möchten Sie Ihr Tween auch mit einer anderen Animation synchronisieren oder das Tween und seine Beschleunigung verwenden, um ein anderes benutzerdefiniertes Objekt zu aktualisieren. Verwenden Sie die onUpdate Rückruf dafür. So verwenden Sie den Rückruf:

Unterschied zwischen meinem Reisepass und meinem Reisepass ultra
TweenMax.to('.logo',1,{ y:100, ease:Bounce.easeOut, onComplete:tweenComplete }); function tweenComplete() { console.log('tween complete'); }

09. Rückrufparameter

Wenn Sie Rückrufe auslösen, möchten Sie möglicherweise Informationen zusammen mit dem Rückruf an die Funktion übergeben, die sie verarbeitet. Möglicherweise müssen Sie Informationen über den Anrufer oder bestimmte Werte übergeben. Auf diese Weise können Sie Ihre Animationen in den Rest Ihrer Codebasis integrieren. Alle Parameter werden über übergeben Rückruf + 'Params' , das ist onUpdateParams .

Im folgenden Beispiel können Sie den Fortschritt des Tweens mithilfe des Schlüsselworts verfolgen {selbst} und kann sehen, wie mehrere Parameter mithilfe eines Arrays übergeben werden:

TweenMax.to('.logo',1,{ y:100, ease:Bounce.easeOut, onUpdate: tweenUpdate, onUpdateParams:['{self}', 'completed'] }); function tweenUpdate(tween, message) { var percentage = tween. progress() * 100; // progress() is a value 0-1 console.log(percentage + ' ' + message); }

10. Animationen steuern

Okay, Sie können jetzt Tweens erstellen und die Tweens vereinfachen, Rückrufe und Parameter auslösen. Aber wie steuern Sie Animationen? Oft möchten Sie sie basierend auf anderen Ereignissen starten oder stoppen.

Wenn Sie eine Animation stoppen müssen, können Sie die verwenden Pause() Methode. Wenn Sie ein Tween fortsetzen möchten, verwenden Sie weitermachen() . Um einen Tween-Einsatz komplett zu zerstören töten() . Probieren Sie Folgendes aus und sehen Sie, was passiert:

// var to hold reference to tween var tween = TweenMax.to('. logo',2,{ y:100, ease:Bounce. easeOut }); // pause immediately tween.pause(); // start on event setTimeout(function(){tween. resume()},1000); // reverse animation on event setTimeout(function(){tween. reverse()},3000);

11. CSS und CSSPlugin

Beginnen Sie mit GSAP: CSS und CSSPlugin

Das CSSPlugin erkennt automatisch, wann es für Animationen benötigt wird

Das CSSPlugin ist bei Verwendung enthalten TweenMax . Dies spart viel Zeit, da es das Verhalten in allen Browsern normalisiert und automatisch erkennt, wenn es für Animationen benötigt wird. CSSPlugin kann Farb-Tweens, SVG-Animationen und optimierte Leistung mit Caching und anderen internen Tricks verarbeiten - und es ist oft effizienter, Positionen über CSS zu übersetzen.

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

So verwischen Sie Bilder in Photoshop CS6

12. 2D- und 3D-Transformationen

Beginnen Sie mit GSAP: 2D- und 3D-Transformationen

GSAP enthält integrierte Transformationen, mit denen Sie die Übersetzung skalieren, drehen und verschieben können

Mit CSS-Transformationen können Sie die Übersetzung skalieren, drehen und verschieben. Sie arbeiten sowohl in 2D als auch in 3D, um schnell schöne Effekte zu erzielen. GSAP enthält integrierte Transformationseigenschaften wie z x , Y. , Drehung , RotationX , RotationY , skewX und Rahmen . Versuchen Sie, das folgende Tween auf Ihr Bild anzuwenden, anstatt auf das, was wir bereits versucht haben:

TweenMax.to('.logo', 3, { x:100, y:100, scale:1.5, rotationY:360 , ease:Bounce.easeOut });

13. Zeitpläne

Beginnen Sie mit GSAP: Timelines

Mit dem Timeline-Objekt von GSAP können Sie mehrere Animationen verwalten

Sobald Sie über ein oder zwei Tweens hinausgehen, fragen Sie sich möglicherweise, wie Sie mehrere Animationen verwalten können. GSAP enthält a Zeitleiste Objekt, genau das zu tun. Sie hängen Tweens an die Zeitleiste Objekt und kann die verwenden Position Parameter nach dem Tween, um sie zu messen. Sie können Tweens nacheinander laufen lassen oder Lücken haben oder sie sogar überlappen. Fügen Sie Ihrem HTML-Code mit Klassen ein paar weitere Bilder hinzu logo2 und logo3 beziehungsweise.

Probieren Sie Folgendes aus, um zu sehen, wie es funktioniert Zeitleiste Code:

//create a timeline instance var tl = new TimelineMax(); tl.add( TweenMax.to('.logo', 1, {x:50}) ); // note the final '0' to make this one start at 0 sec. tl.add( TweenMax.to('.logo2', 1, {y:100} ),'0' ); //note the '+.25' to make this one start at .25 sec tl.add( TweenMax.to('.logo3', 1, {rotationY:180, y:50, X:50}),'+.25' );

14. Timeline-Steuerung

Neben der Steuerung von Animationen möchten Sie möglicherweise auch die Zeitleisten steuern. Glücklicherweise können Sie wie bei Animationen pausieren, fortsetzen und rückgängig machen. Sie können der Timeline auch Parameter hinzufügen wiederholen , yoyo und fügen Sie Rückrufe für die gesamte Zeitleiste hinzu. Sie können die Geschwindigkeit einer Timeline auch mit der Taste steuern Zeitstrahl Eigentum. Versuchen Sie, Ihre Timeline-Deklaration durch den folgenden Code zu ersetzen, um zu sehen, wie es funktioniert:

var tl = new TimelineMax({ // repeat infinitely repeat:-1, yoyo:true, });

15. Eigenschaften abrufen und festlegen

Eine wirklich nützliche Funktion ist das Abrufen und Festlegen von Eigenschaften von Tweens und Timelines. Auf diese Weise können Sie den Gesamtfortschritt und die Gesamtdauer eines GSAP-Objekts kennenlernen oder andere Informationen 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 im laufenden Betrieb zu ändern. Fügen Sie nach Ihrem vorherigen Timeline-Code Folgendes hinzu:

// get the current duration of the timeline console.log(tl.duration()); //sets the duration to 5 seconds after a 2 sec wait setTimeout(function(){ tl.duration(5); }, 2000);

Dieser Artikel wurde ursprünglich im kreativen Webdesign-Magazin Web Designer veröffentlicht. Ausgabe 279 kaufen oder abonnieren .

Weiterlesen: