Kom i gang med Greensock Animation Platform

Greensock Animation Platform (GSAP) giver dig mulighed for at animere alt, hvad du kan få adgang til JavaScript, herunder Dom, Canvas og CSS, samt dine egne brugerdefinerede objekter.

GSAP hjælper også med at løse browser uoverensstemmelser for lettere brugerprøvning (godt Web Hosting. Kan også hjælpe her), gør det muligt for dig at bruge objekter til at styre komplekse animationer, og løber op til 20 gange hurtigere end jQuery. Det er blevet en standard i branchen, og er blevet brugt i utallige prisvindende hjemmesider. Fik et websted at bygge? Her er vores guide til det bedste Website Builder. rundt om.

01. Indstil en grundlæggende HTML-fil

Den bedste måde at lære GSAP på er at se det i aktion. I denne vejledning lærer du om platformens nøglefunktioner med arbejdseksempler, som du kan bruge i dine projekter i dag!

Kom i gang ved at oprette en grundlæggende HTML-fil, hvor du kan falde i din JavaScript-kode. Medtag et billede med en logo. klasse. Du bruger GSAP til at animere egenskaber for at se, hvordan det virker.

 & lt; html lang = "da" & gt;
& lt; hoved & gt;
  & lt; stil & gt;
    .logo {bredde: 150px; }
  & lt; / stil & gt;
& lt; / Head & GT;
& lt; body & gt;
& lt; img class = "logo"
src = "logo.svg" / & gt;
& lt; script & gt;
// KODE HER
& lt; / script & gt;
& lt; / body & gt;
& lt; / HTML & GT; 

02. Inkluder GSAP bibliotek

Dernæst skal du tilføje GSAP til dit webprojekt. Mellem din. & lt; image & gt; og & lt; script & gt; Tags, indsæt et link til GSAP-biblioteket. Du kan downloade zip direkte fra her , eller tag det fra Github. (Hvis du har filer til at dele, skal du vælge den perfekte Sky lagring ). Filer er også hostet på Super-Fast Cloudflare CDN, så den enkleste måde er at bruge de hostede filer som denne:

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

03. ANIMATE MED TWEENING

Tweening er processen med at ændre en værdi over tid for at oprette en animation. For eksempel at flytte et objekt fra A til B, skalere det eller rotere det. Du kan også mellem dine egne brugerdefinerede værdier.

Den enkleste måde at tween en ejendom er at bruge Tweenmax.to () fungere. Dette har brug for et målobjekt, en varighed og ejendoms- / værdipar, du animerer. For at se funktionen i aktion, prøv hver af linjerne med koden nedenfor ved hjælp af logo. Som målobjektet:

 // Tween X position fra nuværende
til 400 over 2 sekunder
Tweenmax.to (". Logo", 2, {x: 400});
// Tween y position fra nuværende
til 200 og opacitet til 0, over 1
sekund
Tweenmax.to (". Logo", 1, {y: 200, opacitet: 0});
// tween x og y til 100, skala til
1,5, og roter 90 °, over 2
sekund
TweenMax.to (". Logo", 2, {x: 100, y: 100, skala: 1,5, rotation: 90}); 

04. Tween fra og fra

Du kan tween en ejendom fra sin nuværende værdi til en ny ved hjælp af til() , men du kan også tween fra en værdi til den nuværende værdi. For eksempel, hvis din logo. starter ved x position 0. Og du vil have det til at ende der, du kunne gøre dette:

 Tweenmax.from (". Logo", 2, {X: 400}); 

I dette tilfælde vil dit logo straks flytte til x = 400. og derefter mellem til x = 0. . Du kan endda definere både start- og slutværdierne, idet du ignorerer de aktuelle værdier ved hjælp af fra til() sådan her:

 Tweenmax.Fromto (". Logo", 2, {x: 400}, {x: 200}); 

05. lempelse.

Lempelse er 'stilen' af animation, som værdier overgang fra A til B. I stedet for en konstant hastighed, som kaldes 'lineært', kan du anvende funktioner til at kurve hastighedshastigheden. Starter de langsomt og gradvist fremskynder? Kommer de til et abrupt stop og hopper lidt i slutningen? I animation tilføjer disse stilarter tegn og følelser til dit arbejde. Du kan anvende en lempelsesfunktion som denne:

 Tweenmax.to (". Logo", 2, {x: 100, y: 100, rotation: 90, lethed: circ.easein}); 

06. lette funktioner og ind / ud

GSAP indeholder en række lette funktioner, som f.eks tilbage Vi Bounce. Vi elastik Vi synd Vi Circ. , og Expo. . Du har måske også bemærket, at Ease. funktionen har en ejendom af lette , som vi brugte i trin ovenfor. Du kan også bruge næppe og lempout. . Disse indikerer, hvor den lette kurve anvendes i animationen. Prøv følgende for at se resultaterne:

 // lette ud med en hoppe
TweenMax.to (". Logo", 2, {x: 100, y: 100, rotation: 90, lethed: Bounce.easeout});
// lette ind og ud med elastisk
TweenMax.to (". Logo", 2, {x: 100, y: 100, rotation: 90, lethed: elastic.easeinout}); 

07. Forsink en tween

Nogle gange vil du gerne forsinke starten på en animation, enten for at synkronisere den med en anden animation, eller for at få det til at vente på, at der opstår en begivenhed. Du kan bruge en anden GSAPs særlige egenskaber kaldet forsinke at gøre dette. Prøv følgende kode for at se, hvordan du kan forsinke tweens til specifik timing:

 Tweenmax.to (". Logo", 1, {y: 100, lethed: Bounce.easeout});
// forsinke denne tween med 1 sek
TweenMax.to (". Logo", 1, {rotation: 90, lethed: circ.easeout, forsinkelse: 1}); 

08. Tilbagekaldsfunktioner.

For at integrere animationer med din kode er det vigtigt at vide, hvornår der opstår begivenheder, især når en animation slutter eller begynder. Du kan bruge påcomplete. Begivenhed tilbagekald for dette. Du vil måske gerne vide, hvornår en tween starter, bruger onstart. . Og du vil måske også synkronisere din tween med en anden animation, eller brug Tween og dens lempelse til at opdatere et andet brugerdefineret objekt. Brug onupdate. Tilbagekald for dette. Her er hvordan du bruger tilbagekaldelsen:

 Tweenmax.to (". Logo", 1, {
Y: 100,
lethed: Bounce.easeout,
påcomplete: Tweencomplete.
});
Funktion TweenComplete () {
Console.Log ("Tween Complete");
} 

09. Tilbagekaldsparametre

Når du fyrer tilbagekaldelser, vil du måske sende information sammen med tilbagekaldelsen til den funktion, der håndterer den. Du skal muligvis videregive oplysninger om den opkalder eller specifikke værdier. Dette giver dig mulighed for at integrere dine animationer med resten af ​​din kodebase. Alle parametre passeres via Tilbagekald + "Params" , det er onupdateparams. .

I det følgende eksempel kan du spore fremskridt fra tweenet ved hjælp af søgeordet {selv} og kan se, hvordan du passerer flere parametre ved hjælp af en matrix:

 Tweenmax.to (". Logo", 1, {
Y: 100,
lethed: Bounce.easeout,
Onupdate: Tweenupdate,
Onupdateparams: ["{Self}",
"Afsluttet"]
});
Funktion Tweenupdat (Tween,
besked) {
VAR Procentdel = Tween.
fremskridt () * 100; // Fremskridt ()
er en værdi 0-1
Console.log (Procent +
"" + besked);
} 

10. Kontrol af animationer

Okay, så du kan nu oprette tweens og lette Tweens, Fire Callbacks og Parametre. Men hvordan styrer du animationer? Ofte vil du starte eller stoppe dem baseret på andre arrangementer.

Hvis du har brug for at stoppe en animation, kan du bruge pause() metode. Hvis du vil genoptage en tween, brug Genoptag() . At ødelægge helt en tween brug dræbe() . Prøv følgende og se, hvad der sker:

 // VAR for at holde reference til Tween
Var Tween = Tweenmax.to (".
logo ", 2, {y: 100, lethed: hoppe.
freeout});
// pause straks
tween.pause ();
// Start på begivenhed
Setimeout (funktion () {Tween.
genoptage ()}, 1000);
// omvendt animation på begivenhed
Setimeout (funktion () {Tween.
omvendt ()}, 3000); 

11. CSS og CSSplugin

CSSplugin er inkluderet, når du bruger Tweenmax. . Det er en enorm tidsbesparende, idet den normaliserer adfærd på tværs af browsere og automatisk registrerer, når det er nødvendigt for animationer. CSSplugin kan håndtere farve tweens, SVG animationer og optimeret ydeevne med caching og andre interne tricks - og det er ofte mere effektivt at oversætte positioner via CSS.

Du har allerede set dette i handling, når du brugte Gennemsigtighed og position animationer. Det virker uden nogen speciel kodning!

12. 2D og 3D-transformer

CSS-transformationer gør det muligt for dig at skalere, rotere Oversæt og Skew. De arbejder i både 2D og 3D for hurtigt at skabe smukke effekter. GSAP indeholder indbyggede transformationsegenskaber som f.eks x Vi Y. Vi rotation Vi rotationx Vi rotation Vi SKEWX. og vægt . Prøv at anvende følgende mellem til dit billede i stedet for dem, vi allerede har forsøgt:

 Tweenmax.to (". Logo", 3, {
X: 100,
Y: 100,
Skala: 1,5,
Rotation: 360,
Lethed: Bounce.easeout}); 

13. TIMELINES.

Når du flytter ud over en eller to TWEEN'er, kan du undre sig over, hvordan du håndterer flere animationer. GSAP indeholder A. tidslinje. objekt at gøre præcis det. Du tilføjer tweens til tidslinje. objekt og kan bruge position parameter efter tween til tiden dem. Du kan få tweens køre en efter den anden, eller har huller eller endda overlapper dem. Tilføj et par flere billeder til din HTML med klasser logo2. og logo3. henholdsvis.

For at se, hvordan det virker, prøv følgende tidslinje. kode:

 // Opret en tidslinjeinstans
var tl = ny timelinemax ();
tl.add (Tweenmax.to (". logo", 1,
{x: 50}));
// Bemærk den endelige "0" for at gøre
Denne starter ved 0 sek.
tl.add (Tweenmax.to (". logo2", 1,
{y: 100}), "0");
// Bemærk "+.25" for at gøre dette
en start på .25 sek
tl.add (Tweenmax.to (". logo3", 1,
{Rotationy: 180, Y: 50,
X: 50}), "+. 25"); 

14. Tidslinjekontrol

Ud over at kontrollere animationer, kan du måske også kontrollere tidslinjer. Heldigvis kan du sætte pause, genoptage og vende om, ligesom du kan med animationer. Du kan også tilføje parametre til tidslinjen til gentage Vi yoyo. og tilføj tilbagekaldelser for hele tidslinjen. Du kan også styre en tidslinjens hastighed ved hjælp af tidsskala ejendom. Prøv at erstatte din tidslinjekerklæring med følgende kode for at se, hvordan det virker:

 var tl = ny timelinemax ({
// Gentag uendeligt
Gentag: -1,
YOYO: TRUE,}); 

15. Få og sæt egenskaber

En funktion, der er virkelig nyttig, får og sætter egenskaber af tweens og tidslinjer. På den måde kan du lære de samlede fremskridt og varighed at kende eller samle andre oplysninger om et GSAP-objekt. I dette kodeeksempel kan du få varigheden af ​​tidslinjen og derefter sæt Dens varighed for at ændre den. Dette virker også det samme for tweens. Det er en anden fantastisk måde at reagere i realtid til begivenheder, og ændre animationer på flugt. Tilføj følgende efter din tidligere tidslinje kode:

 // få den aktuelle varighed af
tidslinjen
console.log (tl.duration ());
// Indstiller varigheden til 5 sekunder
Efter en 2 sec vente
Setimeout (funktion () {
tl.duration (5);
}, 2000); 

Denne artikel blev oprindeligt offentliggjort i Creative Web Design Magazine Web Designer. Køb problem 279. eller abonnere .

Læs mere:

• SuperCharge SVG animationer med GSAP
• Eksporter efter effekter animationer til HTML5
• Sådan oprettes animationer, der skala for alle enheder