de Nicholas Kramer

Ghidul pentru începători al platformei de animație GreenSock

Un manual pentru a crea animații bazate pe cronologie fără a cunoaște JavaScript

Ghidul pentru incepatori al platformei de animatie GreenSock

Introducere

Platforma de animație GreenSock (GSAP pe scurt) este o puternică bibliotecă JavaScript care permite dezvoltatorilor și designerilor front-end să creeze animații robuste bazate pe cronologie. Acest lucru permite un control precis pentru secvențe de animație mai implicate, mai degrabă decât constrângerea uneori keyframe și animation proprietățile pe care le oferă CSS.

Cea mai bună parte a acestei biblioteci este că este ușoară și ușor de utilizat.

Cu GSAP, puteți începe să creați animații captivante, cu puține sau deloc cunoștințe despre JavaScript.

Acest ghid va arăta cum să configurați și să utilizați funcția TweenMax a GSAP și, de asemenea, să vă scufundați într-un pic din pluginul DrawSVG al Club GreenSock. Fiecare dintre exemplele de mai jos are un link CodePen corespunzător, astfel încât să puteți urmări într-o altă filă.

Noțiuni de bază

Înainte de codificare, trebuie mai întâi să adăugăm biblioteca GSAP în fișierul nostru HTML. Pentru a face acest lucru, va trebui să luați linkul CDN către biblioteca TweenMax. Puteți găsi link-uri către TweenMax și alte CDN-uri GSAP aici.

Notă: CDN înseamnă Content Delivery Network. Acest lucru înseamnă că, în loc să găzduiască fișierele JavaScript pe site-ul dvs., o sursă externă ca CloudFlare le poate găzdui pentru dvs.

După ce aveți linkul CDN, introduceți-l într-un fișier <script> eticheta din partea de jos a fișierului HTML astfel:

<script src=“https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

Asta este tot ce ai nevoie pentru a începe! Dacă utilizați un mediu de dezvoltare online precum CodePen, puteți instala GSAP modificând Setările stiloului.

1611627310 886 Ghidul pentru incepatori al platformei de animatie GreenSock
Faceți clic pe pictograma roată de lângă editorul de text JS și căutați TweenMax pentru ao instala în CodePen

Înțelegerea lui Tweens

Tweens sunt funcțiile de animație de bază din cadrul GSAP. Pentru a anima orice obiect HTML, trebuie să apelăm obiectul, să definim proprietățile pe care urmează să le animăm, durata animației, relaxarea animației și orice alți parametri precum temporizarea întârzierii.

De exemplu, dacă ar fi să schimbăm culoarea unui dreptunghi roșu în negru în timp ce îl mutăm în jos și în dreapta, Tween ar arăta astfel în JavaScript:

TweenLite.to(“#rectangle”, 2, {  left:100,   top: 75,   backgroundColor:"#000000",   ease: Power4.easeIn});
Ghidul pentru incepatori al platformei de animatie GreenSock
Această tween ne oferă un dreptunghi care se mișcă în diagonală și își schimbă culoarea.

Să descompunem acest lucru:

TweenLite anunță fișierul nostru JavaScript că vrem să animăm folosind GSAP. .to Metoda imediat după aceea înseamnă că dorim ca obiectul nostru să fie animat de la starea sa statică originală definită de HTML și CSS până la starea finală animată definită de JavaScript.

Puteți utiliza .from metoda în schimb pentru a inversa acest lucru. Vom acoperi acest aspect puțin mai târziu în acest articol.

Apoi, definim obiectul pe care dorim să îl animăm. În cazul nostru, este un obiect HTML cu ID-ul dreptunghiului. Arată așa “#rectangle”, în codul nostru. Trebuie să ne asigurăm că avem obiectul înfășurat în ghilimele și că folosim # pentru a indica faptul că apelăm la un ID. Orice ID ar putea merge aici atâta timp cât este un element definit în HTML. De asemenea, rețineți că și virgula care urmează citatului final este importantă. Fără ea, animația nu va rula.

2, după ID-ul elementului definește durata animației în secunde. Deci, în acest caz, definim durata animației ca fiind de 2 secunde. Dacă am vrea să fie o jumătate de secundă, am schimba valoarea în 0.5, in schimb.

Parametrii din paranteze reprezintă oricare dintre proprietățile pe care doriți să le animați. În acest exemplu, animăm left top și background-color Proprietăți CSS. Observați cum fiecare dintre aceste proprietăți diferite folosește camelCase pentru a le apela în locul notării tipice cu cratimă folosită cu CSS. Puteți adăuga aici câte proprietăți diferite doriți, atâta timp cât le separați cu virgule după valoarea lor.

Ultima proprietate numită este cea a animației ease. GSAP este livrat cu o grămadă de opțiuni de relaxare diferite pe care le puteți adăuga la animații.

În animația noastră de mai sus, numim Power4 ușurați-l și setați-l la easeIn la animație. Puteți vedea întreaga gamă de opțiuni de relaxare în documentație aici. Dacă nu sunteți familiarizați cu relaxarea, asigurați-vă că verificați un articolul anterior care explică diferite funcții de relaxare în profunzime.

În cele din urmă, trebuie să închideți parantezele și parantezele Tween-ului pentru a preveni orice erori și a permite rularea animației. Nu uitați să includeți punctul și virgula pentru a termina funcția JavaScript.

Tween este baza de bază pentru animațiile GSAP. Puteți experimenta cu un exemplu al acestui Tween în CodePen aici.

Tweens sunt minunate dacă doriți să faceți animații unice, dar dacă doriți să creați secvențe în mai mulți pași, cronologiile sunt cea mai bună alternativă.

Animații cronologie

Dacă ați folosit vreodată un software de animație sau prototipuri ca Dupa efecte sau Principiu, sunteți deja familiarizați cu animațiile din cronologie. Cronologiile tradiționale sunt de obicei o serie de animații care apar una câte una sau concomitent. Cronologiile din GSAP nu diferă.

Ghidul pentru incepatori al platformei de animatie GreenSock
O vizualizare a unei cronologii în After Effects. Cronologiile GSAP nu sunt mult diferite.

Pentru a apela o cronologie, trebuie mai întâi să definiți o variabilă în partea de sus a fișierului JavaScript ca nouă TimelineLite:

var tl = new TimelineLite;

Pentru a descompune această linie de cod bucată cu bucată, știți asta var este scurt pentru variabilă. Dacă nu sunteți familiarizați cu ce este o variabilă, gândiți-vă la aceasta ca la o prescurtare pentru o bucată de cod mai mare. În acest caz, am definit o nouă variabilă ca tl și setați-l egal la new TimelineLite. Aceasta înseamnă că de fiecare dată când introducem tl în codul nostru, va reprezenta un nou TimelineLite.

Rețineți că putem înlocui tl pentru orice text pe scurt am dori. eu folosesc tl pentru că e scurt pentru timeline. Acest lucru este util deoarece, dacă avem mai multe linii de timp în fișierul nostru, putem oferi fiecărei o variabilă unică pentru a preveni confuzia.

Să recreăm acum prima noastră animație folosind TimelineLite in loc de TweenLite pentru a vedea cum funcționează acest lucru.

var tl = new TimelineLite;
tl.to(“#rectangle”, 2, {  x:100,  y:75, backgroundColor: “#000000”, ease: Power4.easeIn})
1611627311 242 Ghidul pentru incepatori al platformei de animatie GreenSock
Observați cum redă exact aceeași animație ca și tween-ul anterior.

Veți observa că acest lucru nu este mult diferit de al nostru TweenLite animație de sus. Singura diferență reală este că, în loc să declare TweenLite.to folosim tl.to in schimb. De asemenea, veți observa că folosim acum x și y coordonate în loc de left și top Proprietăți CSS. Acestea se comportă mai mult sau mai puțin la fel.

De asemenea, observați cum nu există punct și virgulă la sfârșitul parantezei. Acest lucru se datorează faptului că vom adăuga o a doua animație la această cronologie, legându-le împreună.

Pentru această a doua animație, să facem scala dreptunghiului cu 150% și să devenim gri după finalizarea primei animații. Pentru a face acest lucru, vom adăuga un alt bloc de cod sub prima noastră animație. În total, va arăta astfel:

var tl = new TimelineLite;
tl.to(“#rectangle”, 2, {  x:100,  y: 75, backgroundColor: “#000000”, ease: Power4.easeIn})
.to(“#rectangle”, 1, { scaleX: 1.5, scaleY: 1.5, backgroundColor: “#454545”, ease: Back.easeOut.config(1.7)});
1611627311 299 Ghidul pentru incepatori al platformei de animatie GreenSock
Acum legăm două animații împreună într-o cronologie.

Puteți vedea că acest al doilea bloc de cod nu are tl.to la începutul cronologiei. În schimb, are doar .to.

Acest lucru se datorează faptului că mai multe animații dintr-o singură cronologie pot fi legate împreună, atâta timp cât nu le separă punct și virgulă.

Punctul și virgula semnifică sfârșitul unei cronologii și trebuie utilizat numai la sfârșitul ultimei animații dintr-o cronologie.

De asemenea, veți observa că folosim două proprietăți noi, scaleX și scaleY. Aceste proprietăți se comportă exact cum sună, cresc dimensiunea unui obiect cu o sută. În acest caz, 1,5 este echivalent cu 150%.

În cele din urmă, folosim o funcție de relaxare unică numită aici Back.easeOut.config(1.7). Această ușurință oferă un ritm natural animației noastre, depășind valoarea dorită și apoi revenind la valoarea finală. Putem vedea în cazul acestei animații cum dreptunghiul crește puțin mai mare de 150% și apoi se redimensionează înapoi după aceea.

Animarea mai multor obiecte cu TimelineLite

Cronologiile nu se limitează la animarea unui obiect. Puteți anima mai multe obiecte într-o cronologie adăugând ID-urile corespunzătoare în diferite funcții.

De exemplu, dacă ar fi să creăm un obiect HTML al unui cerc și să-l estompăm după ce dreptunghiul nostru este mai mare, codul nostru ar arăta astfel:

var tl = new TimelineLite;
tl.to(“#rectangle”, 2, {  x:100,  y: 75, backgroundColor: “#000000”, ease: Power4.easeIn})
.to(“#rectangle”, 1, { scaleX: 1.5, scaleY: 1.5, backgroundColor: “#454545”, ease: Back.easeOut.config(1.7)})
.from(“#circle”, 1, { opacity: 0,});
1611627311 350 Ghidul pentru incepatori al platformei de animatie GreenSock
Acest ultim bloc de cod are acum un cerc decolorat la sfârșitul animației noastre.

Am adăugat un al treilea bloc de coduri în animația noastră care apelează cercul.

Rețineți, de asemenea, cum folosim acum .from metodă. Aceasta înseamnă că animația noastră de cerc începe cu 0% opacitate și apoi ajunge la 100% opacitate.

Puteți vedea acest lucru în acțiune atunci când animația noastră are cercul ascuns, deoarece începe cu 0% opacitate. După ce dreptunghiul își schimbă culoarea și se ridică, cercul se estompează la 100% opacitate, așa cum se intenționează.

Puteți vedea cum funcționează TimelineLite în acest exemplu CodePen aici. Vă încurajez să încercați să adăugați elemente noi la HTML și să încercați să creați secvențe mai complicate și unice cu instrumentele furnizate. De asemenea, puteți arunca o privire asupra documentației complete GSAP TimelineLite aici pentru a afla despre alte metode și proprietăți.

DrawSVG

Împreună cu funcțiile gratuite TweenLite și TimelineLite, GSAP oferă și conținut premium care vă permite să manipulați SVG-urile cu ușurință. Din fericire, aceste pluginuri sunt disponibile pentru a le juca gratuit pe CodePen căutându-le în setările stiloului (pictograma roată de lângă editorul de text JS).

Pluginul DrawSVG facilitează animarea liniilor unui SVG. Pentru a arăta acest lucru, vom avea un SVG de unicorn într-o glugă cu desen. Puteți urmări împreună cu CodePen corespunzător aici.

1611627312 359 Ghidul pentru incepatori al platformei de animatie GreenSock
Rezultatul final al animării liniilor SVG.

Mai întâi, trebuie să exportăm SVG-ul nostru și să-l importăm în editorul nostru de text.

Pentru o detaliere cuprinzătoare despre cum să exportați corect SVG-uri, consultați un articol anterior aici.

În continuare, trebuie să le oferim fiecărei căi individuale un ID, astfel încât să le putem apela pe fiecare din cronologia noastră. Acest lucru poate dura ceva timp dacă aveți un SVG complicat cu o serie de linii de animație diferite. Din motive de simplitate, voi numi prima cale #unicorn1 și denumiți următoarea cale #unicorn2 și așa mai departe până când toți au un ID unic.

<!––An example of a path with an ID--><path id=”unicorn1" class=”st0" d=”M371.8,252.4c0,0,2.8,1.8,5,1.2"/>

Acum, că toate căile noastre au un ID, putem să intrăm și să începem să ne dezvoltăm animația cronologică. Ca și înainte, trebuie să creăm o variabilă care va funcționa ca a noastră TimelineLite variabil:

var unicorndraw = new TimelineLite();

În acest caz, vom folosi variabila unicorndraw.

Ultimul pas pe care trebuie să-l facem este să creăm o animație TimelineLite care apelează fiecare dintre căile individuale:

unicorndraw.from(“#unicorn1, #unicorn2, #unicorn3, #unicorn4, #unicorn5, #unicorn6, #unicorn7, #unicorn8, #unicorn9, #unicorn10, #unicorn11, #unicorn12, #unicorn13, #unicorn14, #unicorn15, #unicorn16, #unicorn17, #unicorn18, #unicorn19, #unicorn20, #unicorn21, #unicorn22, #unicorn23, #unicorn24, #unicorn25, #unicorn26, #unicorn27, #unicorn28, #unicorn29, #unicorn30, #unicorn31, #unicorn32, #unicorn33, #unicorn34, #unicorn35, #unicorn36, #unicorn37, #unicorn38, #unicorn39, #unicorn40, #unicorn41, #unicorn42, #unicorn43, #unicorn44, #unicorn45, #unicorn46, #unicorn47, #unicorn48, #unicorn49, #unicorn50, #unicorn51, #unicorn52, #unicorn53, #unicorn54, #unicorn55, #unicorn56, #unicorn57, #unicorn58, #unicorn59, #unicorn60, #unicorn61, #unicorn62, #unicorn63”, 3, {drawSVG:”0", delay:”1"})

Puteți vedea cum este așa cum a fost precedentul nostru .from TimelineLite animație dinainte. Apelăm la obiectele noastre individuale (în acest caz, apelăm mai multe la un moment dat, astfel încât să se animeze toate simultan) și definim durata animației ca 3 secunde.

Singura diferență este că în interiorul parantezelor, acum îl folosim drawSVG: “0”. Aceasta apelează pluginul drawSVG și definește fiecare cale pentru a avea o valoare de 0. Deoarece folosim un .from metoda, căile încep cu o valoare 0 și apoi se animă la 100% în 3 secunde.

1611627313 341 Ghidul pentru incepatori al platformei de animatie GreenSock
Puteți juca cu diferite valori pentru a obține un stil unic de animație.

Cealaltă bucată de cod din paranteze este delay: “1”. Aceasta determină cât timp va aștepta animația să se execute în câteva secunde. În acest caz, afirmăm că animația va aștepta o secundă înainte de executare.

Acesta este cel mai rapid mod de a începe cu pluginul drawSVG, dar puteți manipula valorile în multe moduri diferite pentru a obține unele efecte interesante. Pentru a afla mai multe despre acest plugin, consultați GSAP site.

Gânduri finale

GSAP facilitează crearea și manipularea propriilor animații cronologice, chiar dacă nu înțelegeți prea puțin sau deloc JavaScript. Aceasta a fost o cantitate mică din diferite animații pe care le puteți face cu GSAP. Verificați Greensock’s site pentru a afla mai multe despre bibliotecă și pentru a experimenta diferite tehnici de animație.

Nicholas Kramer este designer la care lucrează în prezent Butoi în New York. El rezolvă problemele de proiectare pentru companii, ajutându-le să simplifice ideile și să comunice valoarea clienților.

Ține legătura! Dribbble | LinkedIn | Site-ul web