Începeți cu platforma de animație cu Greensock

Platforma Greensock Animație (GSAP) vă permite să animați ceva ce puteți accesa cu JavaScript, inclusiv DOM, Canvas și CSS, precum și propriile obiecte personalizate.

GSAP ajută, de asemenea, să rezolve inconsecvențele browserului pentru mai ușor Testarea utilizatorului (bun web hosting Poate ajuta aici și aici, vă permite să utilizați obiecte pentru a gestiona animațiile complexe și rulează de până la 20 de ori mai repede decât JQuery. A devenit un standard în industrie și a fost folosit în nenumărate site-uri premiate. Ai un site de construit? Iată ghidul nostru pentru cei mai buni Builder de site-uri web în jurul.

01. Configurați un fișier HTML de bază

Cea mai bună modalitate de a învăța GSAP este să o vedeți în acțiune. În acest tutorial veți afla despre caracteristicile cheie ale platformei cu exemple de lucru pe care le puteți folosi astăzi în proiectele dvs.!

Începeți prin configurarea unui fișier HTML de bază, unde puteți scădea codul JavaScript. Includeți o imagine cu a siglă clasă. Veți folosi GSAP pentru a anima proprietăți pentru a vedea cum funcționează.

 & html lang = "en" & gt;
& lt; head & gt;
  & lt; stil & gt;
    .logo {lățime: 150px; }
  & lt; / stil & gt;
& lt; / head & gt;
& lt; corp & gt;
& lt; img clasa = "logo"
src = "logo.svg" / & gt;
& lt; script & gt;
// cod aici
& lt; / script & gt;
& lt; / corp & gt;
& lt; / html & gt; 

02. Includeți biblioteca GSAP

Apoi, va trebui să adăugați GSAP la proiectul dvs. web. Între dvs. & lt; image & gt; și & lt; script & gt; Etichete, introduceți un link către Biblioteca GSAP. Puteți descărca zipul direct de la Aici , sau luați-o de la Github. (Dacă aveți fișiere pe care doriți să le împărtășiți, alegeți perfect Stocare in cloud ). Fișierele sunt găzduite și pe Super-Fast Cdn Cloudflare, deci cea mai simplă modalitate este de a utiliza fișierele găzduite astfel:

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

03. Animați cu Tweening

Tweening este procesul de schimbare a unei valori în timp pentru a crea o animație. De exemplu, mutarea unui obiect de la A la B, scalarea acesteia sau rotirea acestuia. De asemenea, puteți întreba propriile dvs. valori personalizate.

Cea mai simplă modalitate de a avea o proprietate este de a folosi Tweenmax.to () funcţie. Acest lucru are nevoie de un obiect țintă, o durată și perechile de proprietate / valoare pe care le animați. Pentru a vedea funcția de acțiune, încercați fiecare dintre liniile de cod de mai jos folosind siglă ca obiect țintă:

 // Tween X Poziția de la curent
la 400 peste 2 secunde
Tweenmax.to ("logo", 2, {x: 400});
// Tween y poziția de la curent
la 200 și opacitatea la 0, peste 1
al doilea
Tweenmax.to ("logo", 1, {y: 200, opacitate: 0});
// Tween x și y la 100, scară la
1.5 și rotiți 90 de grade, peste 2
al doilea
Tweenmax.to ("logo", 2, {x: 100, y: 100, scară: 1.5, rotație: 90}); 

04. Tween de la și de la

Puteți întreba o proprietate de la valoarea curentă la o nouă utilizare la() , dar tu poți, de asemenea, Tween din o valoare la valoarea sa actuală. De exemplu, dacă dvs. siglă începe la poziția x 0. Și vrei să se termine acolo, ai putea face asta:

 Tweenmax.Din ("logo", 2, {x: 400}); 

În acest caz, logo-ul dvs. se va deplasa imediat la x = 400. și apoi Tween x = 0. . Puteți chiar să definiți atât valorile de început cât și cele finale, ignorând valorile curente folosind de la catre() ca aceasta:

 Tweenmax.Do ("logo", 2, {x: 400}, {x: 200}); 

05. relaxare

Realizarea este "stilul" de animație, ca valori tranziția de la A la B. În loc de o viteză constantă de viteză, care se numește "liniară", puteți aplica funcții pentru a curba rata de viteză. Încep să accelereze încet și treptat? Ei ajung la o oprire bruscă și sare puțin la sfârșit? În animație, aceste stiluri adaugă caracterul și emoția la munca ta. Puteți aplica o funcție de relaxare ca aceasta:

 Tweenmax.to ("logo", 2, {x: 100, y: 100, rotație: 90, ușurință: Circ.easein}); 

06. Funcțiile de relaxare și în / ieșire

GSAP include o varietate de funcții de relaxare, cum ar fi înapoi , sări , elastic , păcat , Circ. , și Expo. . S-ar putea să fi observat, de asemenea, că uşura funcția are o proprietate de ușurează , pe care am folosit-o la pasul de mai sus. De asemenea, puteți utiliza Evaluare și Lazinout. . Acestea indică în cazul în care curba de relaxare este aplicată în animație. Încercați următoarele pentru a vedea rezultatele:

 // ușurința cu o săritură
Tweenmax.to ("logo", 2, {x: 100, y: 100, rotație: 90, ușurință: bounce.easeout});
// relaxați și ieșiți cu elastic
Tweenmax.to ("logo", 2, {x: 100, y: 100, rotație: 90, ușurință: elastic.easeinout}); 

07. Întârzieți un Tween

Uneori veți dori să întârzieți începerea unei animații, fie să o sincronizați cu o altă animație, fie să o faceți să aștepte ca un eveniment să apară. Puteți utiliza proprietățile speciale ale unui alt GSAP întârziere pentru a face acest lucru. Încercați următorul cod pentru a vedea cum puteți întârzia Tweens pentru moment specific:

 Tweenmax.to ("logo", 1, {y: 100, ușurință: bounce.easeout});
// întârzierea acestui tween cu 1 sec
Tweenmax.to ("logo", 1, {rotație: 90, ușurință: Circ.easeout, întârziere: 1}); 

08. Funcții de apel invers

Pentru a integra animațiile cu codul dvs., este important să știți când apar evenimente, mai ales atunci când o animație se termină sau începe. Puteți utiliza onComplete eveniment de apel pentru acest lucru. Poate doriți să știți când începe un Tween, folosind onstart. . Și este posibil să doriți, de asemenea, să vă sincronizați Tween cu o altă animație sau să utilizați Tween și relaxarea sa de a actualiza un alt obiect personalizat. Folosește Onupdate apel invers pentru aceasta. Iată cum utilizați apelul:

 Tweenmax.to ("logo", 1, {
Y: 100,
Ușurința: Bounce.easeout,
onComplete: tweencomplete
});
Funcție tweencomplete () {
consola.log ("Tween completă");
} 

09. Parametrii de apel invers

Când ardeți apelurile de apel, este posibil să doriți să transmiteți informații împreună cu apelul în funcție de funcția care o ocupă. Este posibil să trebuiască să transmiteți informații despre valorile apelantului sau specifice. Acest lucru vă permite să vă integrați animațiile cu restul bazei de coduri. Toți parametrii sunt transferați prin callback + "Params" , acesta este onupdateparams. .

În exemplul următor, puteți urmări progresul Tween utilizând cuvântul cheie {de sine} și poate vedea cum să treci mai mulți parametri folosind o matrice:

 Tweenmax.to ("logo", 1, {
Y: 100,
Ușurința: Bounce.easeout,
Onupdate: Tweenupdate,
OnupdateParams: ["{sine}",
"efectuat"]
});
Funcția Tweenupdate (Tween,
mesaj) {
procentaj var = tween.
progres () * 100; // progres ()
este o valoare 0-1
consola.log (procentaj +
"" + mesaj);
} 

10. Controlul animațiilor

Bine, puteți crea acum Tweens și puteți ușura Tweens, apelurile de incendiu și parametrii. Dar cum controlați animațiile? Deseori doriți să începeți sau să le opriți pe baza altor evenimente.

Dacă trebuie să opriți o animație, puteți folosi pauză() metodă. Dacă doriți să reluați un Tween, utilizați relua() . Pentru a distruge în totalitate o utilizare cu două ani ucide() . Încercați următoarele și vedeți ce se întâmplă:

 // VAR pentru a ține referința la Tween
var tween = tweenmax.to (".
Logo ", 2, {Y: 100, Ușurință: Bounce.
ușurință});
// pauza imediat
tween.pause ();
// Începeți la eveniment
SetTimeout (funcția () {Tween.
Reluați ()}, 1000);
// Animație inversă la eveniment
SetTimeout (funcția () {Tween.
Reverse ()}, 3000); 

11. CSS și CSSPlugin

CSSPlugina este inclusă când utilizați Tweenmax. . Este un economizor de timp imens, în faptul că normalizează comportamentele din browsere și detectează automat atunci când este necesar pentru animații. CSSPlugin poate gestiona Tweens color, animații SVG și performanțe optimizate cu cache și alte trucuri interne - și este adesea mai eficient pentru a traduce pozițiile prin CSS.

Ați văzut deja acest lucru în acțiune când ați folosit opacitate și poziţie animații. Funcționează fără nici o codificare specială!

12. Transformări 2D și 3D

Transformările CSS vă permit să scalați, rotiți traducerea și înclinarea. Lucrează în ambele 2D și 3D pentru a crea rapid efecte frumoase. GSAP include proprietăți de transformare încorporate, cum ar fi X , Y. , rotație , Rotationx. , Rotationy. , Skewx. și scară . Încercați să aplicați următoarele rânduri în imaginea dvs. în loc de cele pe care le-am încercat deja:

 Tweenmax.to ("logo", 3, {
X: 100,
Y: 100,
scară: 1,5,
Rotația: 360,
Ușurință: Bounce.easeout}); 

13. Timelines.

Odată ce vă deplasați dincolo de unul sau doi Tweens, vă puteți întreba cum să gestionați mai multe animații. GSAP include A. Cronologie obiect pentru a face exact acest lucru. Aprindeți Tweens la Cronologie obiect și poate folosi poziţie parametrul după întrebării lor. Puteți avea Tweens rulați unul după altul sau aveți lacune sau chiar să le suprapuneți. Adăugați un cuplu mai multe imagini în HTML cu clase logo2. și logo3. respectiv.

Pentru a vedea cum funcționează, încercați următoarele Cronologie cod:

 // Creați o instanță de cronologie
var tl = noul timelinemax ();
tl.add (tweenmax.to ("logo", 1,
{x: 50}));
// notați finala "0" pentru a face
acest lucru începe la 0 sec.
tl.add (tweenmax.to ("logo2", 1,
{y: 100}), "0");
// notați "+.25" pentru a face acest lucru
un început la .25 sec
tl.add (tweenmax.to ("logo3", 1,
{Rotationy: 180, Y: 50,
X: 50}), "+ 25"); 

14. Controlul cronologului

Pe lângă controlul animațiilor, este posibil să doriți și să controlați termenele. Din fericire, puteți întrerupe, relua și inversa la fel ca și cum puteți cu animații. De asemenea, puteți adăuga parametri la cronologia la repeta , yoyo. și adăugați apeluri de apel pentru întreaga cronologie. De asemenea, puteți controla viteza unei cronometre folosind Timescale. proprietate. Încercați să înlocuiți declarația dvs. de cronologie cu următorul cod pentru a vedea cum funcționează:

 VAR TL = New Timelinemax ({
// repetați infinit
Repetați: -1,
YOYO: TRUE,}); 

15. Obțineți și setați proprietățile

O caracteristică care este într-adevăr utilă este obținerea și stabilirea proprietăților Tweens și Timelines. În acest fel, puteți cunoaște progresul și durata generală sau puteți aduna alte informații despre un obiect GSAP. În acest exemplu de cod puteți obține durata cronologiei și apoi a stabilit durata sa de ao schimba. Acest lucru funcționează la fel pentru Tweens, de asemenea. Este o altă modalitate excelentă de a reacționa în timp real la evenimente și de a modifica animațiile în zbor. Adăugați următoarele după codul anterior de cronologie:

 // Obțineți durata curentă a
Cronologia
consola.log (tl.duration ());
// stabilește durata la 5 secunde
După o așteptare de 2 secunde
SetTimeout (funcția () {
tl.durarea (5);
}, 2000); 

Acest articol a fost inițial publicat în Creative Web Design Magazine Web Designer. Cumpăra problema 279. sau Abonati-va .

Citeste mai mult:

• SuperCraft Animații SVG cu GSAP
• Export după efecte animații la HTML5
• Cum să creați animații pe scară pentru toate dispozitivele