CSS animații sunt la îndemână atunci când aveți nevoie pentru a face tranziții de proprietăți în foile dvs. de stil. În plus, arată performanțe extraordinare din cutie - fără a adăuga o bibliotecă la pagină. Cu toate acestea, atunci când utilizați tranziții CSS pentru a propulsa un proiect bogat de mișcare (similar cu ceea ce vedeți în versiunile recente de iOS și Android), ele devin prea greu de gestionat sau funcțiile lor sunt pur și simplu greșite.
Viteză și GSAP
Dacă jQuery este prezent pe pagina dvs., puteți utiliza Velocity și GSAP în același mod ca și $ .animate () jQuery. De exemplu, $ element.animate (
Aceste două biblioteci funcționează, de asemenea, când jQuery nu este prezent pe pagină. Aceasta înseamnă că, în loc să combinați apelul de animație într-un lanț în elementul jQuery al obiectului - așa cum este arătat simplu - ați trece elementul (ele) țintă la apelul de animație:
/ * Aceste animații devin automat un lanț. * /
viteză # 40; Element. # 123; opacitate. 0.5 # 125;. 1000 # 41; ;
viteză # 40; Element. # 123; opacitate. 1 # 125;. 1000 # 41; ;
Animația acestei căi nu are lipsă de performanță (cache-ul este animat într-o variabilă, mai degrabă decât să faci în mod repetat o interogareSelectorAceastă probă pentru același element).
(Sugestie: Cu pachetul Velocity UI, puteți crea propriile animații proprii de alocare și de a le da nume personalizate care pot fi folosite în viitor ca primul parametru documentația Velocity Velocity vezi UI Pack pentru mai multe informații ...)
Velocitatea apelului-procesare-pentru-o singura data, are un imens avantaj: daca folositi promisiuni cu animatiile voastre Velocity, atunci fiecare apel de viteza va returna un obiect promis eficient. Puteți afla mai multe despre lucrul cu promisiunile din articolul lui Jake Archibald. Ele sunt incredibil de puternice.
În cazul GSAP, expresia API orientată spre obiect vă permite să plasați animațiile pe o cronologie, oferindu-vă control asupra programării și sincronizării. nu vă limitați la animații asemănătoare lanțului; Aveți posibilitatea să inserați termenele de timp, să faceți suprapunerea animației etc.:
var tl = noua TimelineMax # 40; # 41; ;
/ * GSAP inserează cadre intermediare în lanțul implicit, dar puteți specifica punctele de inserție exacte în linia de timp, inclusiv offsetul relativ. * /
tl
. la # 40; Element. 1. # 123; opacitate. 0.5 # 125; # 41;
. la # 40; Element. 1. # 123; opacitate. 1 # 125; # 41; ;
Animația este, în esență, un proces experimental în care trebuie să jucați cu sincronizare și relaxare pentru a obține sentimentul potrivit de care are nevoie aplicația. Desigur, chiar dacă considerați că designul este perfect, clientul va cere adesea schimbări non-banale. În aceste situații, fluxul de lucru gestionat devine important.
În timp ce tranzițiile CSS sunt destul de ușor de inserat într-un proiect pentru efecte cum ar fi hovering, ele devin imposibil de gestionat atunci când încercați să organizați chiar și animații moderat complexe. De aceea, CSS oferă animație de cadre cheie, care vă permite să grupați logica animației în secțiuni.
Cu toate acestea, dezavantajul fundamental al API cheie cheie este că trebuie să definiți partiții în procente care nu sunt intuitive. De exemplu:
@ keyframes myAnimation # 123;
0% # 123;
opacitate. 0;
transformare. scară # 40; 0. 0 # 41; ;
# 125;
25% # 123;
opacitate. 1;
transformare. scară # 40; 1. 1 # 41; ;
# 125;
50% # 123;
transformare. traduce # 40; 100px. 0 # 41; ;
# 125;
100% # 123;
transformare. traduce # 40; 100px. 100px # 41; ;
# 125;
# 125;
#box # 123;
animație. myAnimation 2.75s;
# 125;
Ce se întâmplă dacă clientul vă cere să faceți animația translateX o secundă mai mult? Aceasta necesită restaurarea matematicii și modificarea tuturor (sau majorității) procentelor.
Velocity are propriul pachet UI. pentru a face față complexității multi-animației, iar GSAP oferă termene nestablete. Aceste funcții permit caracteristici complet noi ale fluxului de lucru.
Dar să nu mai predăm despre fluxul de operații și să ne scufundăm în exemple amuzante de animație.
Utilitatea fizică în proiectul de mișcare întâlnește principiul de bază al ceea ce face pentru UX: interfețele care plutesc în mod natural de la intrarea utilizatorului - cu alte cuvinte, interfețele care aderă la o mișcare asemănătoare cu lumea reală.
GSAP oferă plug-in-uri de fizică care se adaptează la limitele interfeței cu utilizatorul. De exemplu, ThrowPropsPlugin urmărește viteza dinamică a degetului unui utilizator sau mouse-ului, iar când utilizatorul se declanșează, ThrowPropsPlugin selectează viteza corespunzătoare și determină oprirea naturală a elementului. Animația rezultată este un cadru intermediar standard care poate fi controlat de timp (întrerupt, inversat etc.):
Viteza oferă un tip de simplificare bazată pe fizica elasticității. De obicei, cu simplificarea opțiunilor, treci în tipul de simplificare numit; de exemplu, ușurință. easy-in-out sau easeInOutSine. Cu fizica elasticității, treceți o matrice cu două elemente, constând în forța și valorile frecarii (în paranteze de mai jos):
viteză # 40; Element. # 123; la stânga. 500 # 125;. # 91; 500. 20 # 93; # 41; ; // 500 tensiune, 20 frecare
animație CSS este transformată într-o singură componentă, scara, revoluția, rotația și perspectivă - sunt conținute într-o singură proprietate CSS și, prin urmare, nu pot fi animate independent folosind durate diferite, parametrii și animație întârziere.
Atât Velocity, cât și GSAP vă permit să animați individual componentele de conversie:
// GSAP
/ * Prima animație * /
TweenMax. la # 40; Element. 1. # 123; x. 500 # 125; # 41; ;
/ * Activați o animație secundară (concurentă) după 500 ms * /
TweenMax. la # 40; Element. 2. # 123; rotație. 45 de întârziere. 0.5 # 125; # 41; ;
Rezumă
Citiți mai departe
Trimiteți-le prietenilor: