Aan de slag met GreenSock-animatieplatform

Met GreenSock Animation Platform (GSAP) kunt u iets animeren dat u kunt openen met JavaScript, waaronder DOM, Canvas en CSS, evenals uw eigen aangepaste objecten.

GSAP helpt ook bij het oplossen van browserinconsistenties voor eenvoudiger Gebruikers testen (mooi zo web hosting Kan hier ook helpen), kunt u objecten gebruiken om complexe animaties te beheren en loopt u tot 20 keer sneller dan jQuery. Het is een standaard geworden in de industrie en is gebruikt in talloze bekroonde websites. Heb je een site om te bouwen? Hier is onze gids voor de beste website bouwer in de omgeving van.

01. Stel een standaard HTML-bestand in

De beste manier om GSAP te leren, is het in actie te zien. In deze tutorial leer je over de belangrijkste kenmerken van het platform met werkende voorbeelden die je vandaag in je projecten kunt gebruiken!

Aan de slag door een standaard HTML-bestand in te stellen, waar u in uw JavaScript-code kunt vallen. Een afbeelding opnemen met een logo klasse. U gebruikt GSAP om eigenschappen te animeren om te zien hoe het werkt.

 & LT; HTML LANG = "EN" & GT;
& LT; HOOFD & GT;
  & LT; STYLE & GT;
    .logo {breedte: 150px;​
  & LT; / STYLE & GT;
& LT; / HOOFD & 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. Omvat GSAP-bibliotheek

Vervolgens moet u GSAP toevoegen aan uw webproject. Tussen je & LT; Afbeelding & GT; en & lt; script & gt; Tags, plaats een link naar de GSAP-bibliotheek. U kunt de ZIP direct downloaden van hier , of pak het van Github (Als je bestanden hebt om te delen, kies dan de perfecte cloud opslag ​Bestanden worden ook gehost op de Super-Fast Cloudflare CDN, dus de eenvoudigste manier is om de gehoste bestanden zoals deze te gebruiken:

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

03. Animeer met tweening

Tweening is het proces van het veranderen van een waarde in de loop van de tijd om een ​​animatie te maken. Bijvoorbeeld, het verplaatsen van een object van A tot B, het schalen of het draaien ervan. U kunt ook uw eigen aangepaste waarden tussenlopen.

De eenvoudigste manier om een ​​woning te tween, is om de Tweenmax.to () functie. Dit heeft een doelobject, een duur en de eigenschap / waardeparen nodig die u animeert. Om de functie in actie te zien, probeer dan elk van de onderstaande regels van de code met behulp van de logo Als het doelobject:

 // tween x positie van stroom
tot 400 meer dan 2 seconden
Tweenmax.to (". Logo", 2, {x: 400});
// tween y positie van stroom
tot 200 en dekking tot 0, ouder dan 1
tweede
Tweenmax.to (". Logo", 1, {y: 200, dekking: 0});
// tween x en y tot 100, schaal naar
1.5, en draai 90 °, over 2
tweede
Tweenmax.to (". Logo", 2, {x: 100, y: 100, schaal: 1.5, rotatie: 90}); 

04. Tween van en van TO

U kunt tussen de huidige waarde van een eigendom tussen een nieuwe waarde gebruiken naar() , maar je kunt ook tween van een waarde voor de huidige waarde. Bijvoorbeeld, als uw logo begint op x-positie 0 En je wilt dat het daar eindigt, je zou dit kunnen doen:

 tweenmax.van (". Logo", 2, {x: 400}); 

In dit geval zal uw logo onmiddellijk naar toe gaan x = 400 en dan tween tot x = 0 ​U kunt zelfs zowel de start- als eindwaarden definiëren, waarbij de huidige waarden worden genegeerd van naar() zoals dit:

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

05. versoepelen

Vermindering is de 'stijl' van animatie, zoals waarden overgang van A tot B. in plaats van een constante snelheidsnelheid, die 'lineair' wordt genoemd, kunt u functies toepassen om de snelheid van de snelheid te curveren. Beginnen ze langzaam en versnellen geleidelijk? Komen ze tot een abrupte stop en stuiteren ze een beetje aan het einde? In animatie voegen deze stijlen karakter en emotie toe aan je werk. U kunt een versoepelingsfunctie als volgt toepassen:

 Tweenmax.to (". Logo", 2, {x: 100, y: 100, rotatie: 90, gemak: Circ.easein}); 

06. Functies versoepelen en in / uit

GSAP bevat een verscheidenheid aan versoepelingsfuncties, zoals terug ​ stuiteren ​ elastisch ​ zonde ​ rekken , en expo ​Misschien heb je het ook gemerkt dat de gemak Functie heeft een eigenschap van vergemakkelijken , dat we in de bovenstaande stap gebruikten. Je kan ook gebruiken mesout en vergemakkelijking ​Deze geven aan waar de versoepelingscurve wordt toegepast in de animatie. Probeer het volgende om de resultaten te zien:

 // verslaafd met een stuiter
Tweenmax.to (". Logo", 2, {x: 100, y: 100, rotatie: 90, gemak: bounce.easeout});
// versoepelen in en uit met elastiek
Tweenmax.to (". Logo", 2, {x: 100, y: 100, rotatie: 90, gemak: Elastic.Eleinout}); 

07. Vertraging van een tween

Soms wil je het begin van een animatie uitstellen, om het te synchroniseren met een andere animatie, of om het te laten wachten op een gebeurtenis om op te treden. U kunt de speciale eigenschappen van een andere GSAP gebruiken vertraging om dit te doen. Probeer de volgende code uit om te zien hoe u tweens kunt uitstellen voor specifieke timing:

 Tweenmax.to (". Logo", 1, {y: 100, gemak: bounce.easeout});
// vertraging deze tween met 1 sec
Tweenmax.to (". Logo", 1, {rotatie: 90, gemak: Circ.Easeout, vertraging: 1}); 

08. CALLBACK-functies

Om animaties met uw code te integreren, is het belangrijk om te weten wanneer evenementen optreden, vooral wanneer een animatie eindigt of begint. Je kunt de oncomplete Evenement callback hiervoor. Misschien wil je weten wanneer een tween begint, met onstart ​En misschien wil je je tween ook synchroniseren met een andere animatie, of gebruik je de Tween en de versoepelen van een ander aangepast object. Gebruik de onupdate Terugbellen hiervoor. Hier is hoe u de callback gebruikt:

 tweenmax.to (". Logo", 1, {
y: 100,
Gemak: Bounce.Eleout,
Oncomplete: Tweencomplete
​
Functie tweencomplete () {
console.log ("Tween compleet");
} 

09. Callback-parameters

Bij het afvuren van callbacks wilt u mogelijk informatie doorgeven samen met de callback aan de functie die het verwerkt. Mogelijk moet u informatie over de beller of specifieke waarden doorgeven. Hiermee kunt u uw animaties integreren met de rest van uw codebasis. Alle parameters worden doorgegeven via Callback + "Params" , dat is onupdateparams ​

In het volgende voorbeeld kunt u de voortgang van de tween volgen met behulp van het sleutelwoord {zelf} en kan zien hoe u meerdere parameters kunt passeren met behulp van een array:

 tweenmax.to (". Logo", 1, {
y: 100,
Gemak: Bounce.Eleout,
onupdate: tweenupdate,
onupdateparams: ["{self}",
"voltooid"]
​
Functie tweenupdate (Tween,
bericht) {
var percentage = tween.
vooruitgang () * 100; // vooruitgang ()
is een waarde 0-1
console.log (percentage +
"" + bericht);
} 

10. Animaties regelen

Oké, dus je kunt nu tweens maken en de tweens, brand callbacks en parameters vergemakkelijken. Maar hoe bestuurt u animaties? Vaak wil je ze starten of stoppen op basis van andere evenementen.

Als u een animatie moet stoppen, kunt u de pauze() methode. Als u een tween wilt hervatten, gebruikt u hervat() ​Om een ​​tween-gebruik volledig te vernietigen doden() ​Probeer het volgende uit en kijk wat er gebeurt:

 // var om de verwijzing naar Tween te houden
var tween = tweenmax.to (".
logo ", 2, {y: 100, gemak: stuiteren.
Ease-out});
// pauzeer onmiddellijk
tween.pause ();
// start op evenement
SetTimeout (functie () {tween.
hervatten ()}, 1000);
// omgekeerde animatie op evenement
SetTimeout (functie () {tween.
achteruit ()}, 3000); 

11. CSS en CSSPLUGIN

De CSSPlugin is opgenomen wanneer u gebruikt Tweenmax ​Het is een enorme time-saver, in dat het gedrag normaliseert over browsers en automatisch detecteert wanneer het nodig is voor animaties. CSSPlugin kan kleurenverennen, SVG-animaties en geoptimaliseerde prestaties met caching en andere interne trucs aanhouden - en het is vaak efficiënter om posities via CSS te vertalen.

Je hebt dit al in actie gezien toen je de opaciteit en positie animaties. Het werkt zonder enige speciale codering!

12. 2D en 3D-transformaties

CSS-transformaties stellen u in staat om te schalen, te draaien en scheef. Ze werken in zowel 2d als 3D om snel mooie effecten te maken. GSAP bevat ingebouwde transformatie-eigenschappen zoals X ​ y ​ rotatie ​ rotatie ​ rotatie ​ skewx en schaal ​Probeer de volgende tween toe te passen in uw afbeelding in plaats van die we al hebben geprobeerd:

 tweenmax.to (". Logo", 3, {
x: 100,
y: 100,
Schaal: 1.5,
Rotationy: 360,
Gemak: Bounce.Eleout}); 

13. Tijdlijnen

Zodra u verder gaat dan een of twee tweens, vraagt ​​u zich misschien af ​​hoe u meerdere animaties kunt beheren. GSAP omvat een tijdlijn object om precies dat te doen. Je voegt tweeën toe aan de tijdlijn object en kan de positie parameter na de tween tot tijd hen. Je kunt een tweens laten rennen na de andere, of hiaten hebben, of zelfs overlappen. Voeg een paar meer afbeeldingen toe aan je HTML met klassen logo2 en logo3 respectievelijk.

Om te zien hoe het werkt, probeer dan het volgende tijdlijn code:

 // Maak een tijdlijninstantie
var tl = nieuwe timelinemax ();
tl.add (tweenmax.to (". logo", 1,
{x: 50}));
// Let op de laatste "0" om te maken
Deze start op 0 sec.
tl.add (tweenmax.to (". logo2", 1,
{y: 100}), "0");
// Let op de "+.25" om dit te maken
één start bij .25 sec
tl.add (tweenmax.to (". logo3", 1,
{Rotationy: 180, Y: 50,
X: 50}), "+. 25"); 

14. Tijdlijnbesturing

Naast het beheersen van animaties, wil je misschien ook tijdlijnen beheersen. Gelukkig kun je pauzeren, hervatten en omkeren, net zoals je kunt met animaties. U kunt ook parameters toevoegen aan de tijdlijn aan herhaling ​ yoyo en voeg callbacks toe voor de hele tijdlijn. U kunt ook de snelheid van een tijdlijn beheersen met behulp van de tijdschaal eigendom. Probeer uw tijdlijnverklaring te vervangen door de volgende code om te zien hoe het werkt:

 Var TL = NIEUW TIMELINEMAX ({
// herhaal oneindig
Herhaal: -1,
YOYO: TRUE,}); 

15. Get en stel eigenschappen in

Eén functie die echt nuttig is, is het krijgen en instellen van eigenschappen van tweens en tijdlijnen. Op die manier kunt u de algehele voortgang en duur leren kennen of andere informatie verzamelen, over een GSAP-object. In dit codevoorbeeld kun je krijgen de duur van de tijdlijn en dan instellen de duur ervan om het te veranderen. Dit werkt ook hetzelfde voor Tweens. Het is een andere geweldige manier om in realtime te reageren op evenementen en het aanpassen van animaties on the fly. Voeg het volgende toe na uw vorige tijdlijncode:

 // Krijg de huidige duur van
de tijdlijn
console.Log (tl.duration ());
// Stelt de duur in op 5 seconden
Na een 2 sec-wacht
SetTimeout (functie () {
tl.Duratie (5);
}, 2000); 

Dit artikel is oorspronkelijk gepubliceerd in Creative Web Design Magazine Web Designer. Koop Issue 279 of inschrijven ​

Lees verder:

• Supercharge SVG-animaties met GSAP
• Exporteren na effectanimaties naar HTML5
• Hoe animaties te maken die schaal voor alle apparaten