Nu voi dezasambla toate bibliotecile pentru piese de schimb și nu voi scrie codul. În schimb, o să mă uit la toate bibliotecile din punctul de vedere al unei persoane care lucrează mai mult cu CSS, dar ar dori să știe ce îi poate oferi JS în termeni de animație DOM. Deci, voi căuta instrumente care manipulează perfect DOM prin adăugarea și eliminarea dinamică a stilurilor și / sau claselor CSS pentru a crea o animație, cu o sintaxă care va fi familiarizată cu dezvoltatorul CSS.
Animație în rețea
După cum explică Sarah Draesner, în animația web trebuie să diferențiezi animația de interfață / utilizator și animația independentă.
Studiul a demonstrat că o persoană percepe lumea mult mai bine pe baza imaginilor în mișcare. Adică, înțelegem mai bine și asimilăm informațiile atunci când este prezentată sub forma unei mișcări ceva, mai degrabă decât sub forma unor imagini simple sau a unei serii de imagini statice.
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
În contrast, animație independentă ... "Folosită pentru a ilustra conceptul în corpul paginii, alături de ea sau separat." Sarah Draesner - din diapozitivele de la conferința CSS
Sarah ilustrează gândul ei în demonstrația CodePen.
Diferența este foarte importantă. În timpul animației interfeței, încercați să ajutați utilizatorii să realizeze anumite acțiuni care sunt în concordanță cu obiectivele site-ului. Și când creați o animație independentă, încercați să descoperiți conceptul cel mai complet posibil.
Cu toate acestea, ambele tipuri de animație ar trebui să aducă plăcerea oamenilor. De aceea, atunci când creați o animație, totul depinde de performanță și disponibilitate. Acesti factori sunt rezultatul unei animatii care va incanta, va irita sau chiar va provoca dureri.
Astăzi, CSS ne poate oferi tranziții și animații fără probleme. Cu toate acestea, JS are încă prioritate în problema creării de animații. Dar de ce? Acum putem face animații pe CSS pur, de ce ar trebui cineva să folosească JS pentru asta?
Pentru a vă ajuta să alegeți dintre CSS și JS, Rachel Dets a compilat o listă de diferențe. Animația poate fi:
Static: animația de la început până la final trece fără nici o logică de ramură. De exemplu, puteți aduce încărcătoare în CSS. O astfel de animație poate fi scrisă în CSS pur;
Cu păstrarea stării: un bun exemplu este bara laterală, care se deschide și se închide făcând clic pe buton. Acest tip de animație poate fi scris în CSS cu mici interspersoane de JS pentru a adăuga și elimina clasele responsabile de starea animației;
Dinamică: această animație se poate termina în moduri diferite. Depinde de acțiunile utilizatorului, de evenimentele din DOM, de starea de animație a altor elemente din document etc. Acest tip de animație nu poate fi creat utilizând CSS, atunci cel mai bun prieten al tău este JS.
În plus față de animația dinamică, JS poate fi utilizat dacă vă aflați într-una din următoarele situații:
trebuie să conectați sau să împărțiți animația în mai multe elemente. În acest caz, fiecare animație trebuie să înceapă după terminarea celei anterioare. Acest lucru se poate face pe CSS pur prin setarea proprietății de întârziere peste tot. Dar dacă trebuie să înlocuiți o singură valoare, este extrem de incomod să rescrieți toate celelalte;
doriți să animați grafica SVG. Aici principalul dezavantaj este că animația CSS în SVG nu este acceptată în toate browserele;
Dacă proiectul dvs. ar trebui să suporte browsere mai vechi, în care animația CSS nu funcționează, o soluție fiabilă cu privire la JS va oferi un sprijin bun.
Înlocuirea perspectivelor: API Animații web
W3C lucrează la o specificație care va combina animația CSS, SVG și JS într-o singură limbă unificată fără a fi nevoie să se conecteze alte biblioteci JS. API se numește Animații Web și este excelent pentru crearea de animații dinamice, în care CSS nu se poate opune nimic. Puteți citi un articol introductiv util în aplicația Web Animations API de la Dudley Storey direct pe SitePoint.
Lucrul pe API Animații pe Web este destul de constant, iar pentru browserele care nu acceptă API, există un polifil.
Totul suna minunat si incurajez pe toti sa experimenteze cu WAAPI. Cu toate acestea, la momentul redactării, suportul pentru browser este amestecat și specificația poate fi schimbată. Deci, dacă WAAPI nu este potrivit pentru proiectul dvs. acum, puteți trece la bibliotecile JS.
Biblioteci pentru animație dinamică DOM
Rețeaua este plină de biblioteci JS pentru animație. La momentul scrierii, cele mai populare au fost GreenSock sau GSAP (GreenSock Animation Platform) și Velocity.js.
Principalele caracteristici ale Anime
Anime-ul a venit din animația japoneză, din computer și manualul Anime.js ... "O bibliotecă JS flexibilă, dar ușor de animat. Funcționează cu CSS, Transformări individuale, atribute SVG, DOM și obiecte JS. "
Anime.js acceptă următoarele browsere: Chrome, Safari, Opera, Firefox, Internet Explorer 10+
Atât de multe biblioteci, de ce anime?
"GSAP este capabil de mult mai mult decât Anime. Dar această bibliotecă este mult mai dificilă. Scopul meu a fost - de a păstra API ușor să se concentreze pe ceea ce am cu adevărat nevoie (de mai multe temporizări, caracteristici de control de redare de animație ...) menținând în același timp cea mai mică greutate posibilă (9kb în formă minifitsirovannom) ".
Hacker News
Pe scurt, Anime vă convine perfect dacă doriți să creați elemente de animație dinamice HTML și SVG, care nu au nevoie de toate funcțiile GSAP sau de alte biblioteci mari.
Cum se utilizează Anime.js
Mai jos, am scris câteva linii de cod care ilustrează cum se conectează Anime.js. Majoritatea animațiilor vor fi încetinite pentru demonstrații.
Conectarea Anime.js nu este diferită de jQuery sau de orice altă bibliotecă JS.
Descărcați fișierul .zip din pagina proiectului în GitHub. extrageți fișierele și scrieți anime.min.js în eticheta script în interiorul html:
Sau puteți face acest lucru în npm sau Bower:
O animație pe un singur element: o minge de bouncing
După instalarea programului Anime.js în proiect, puteți începe cu cel mai simplu tip de animație: doar un singur element, mingea sărind în sus și în jos. Primul pas este de a apela anime, trecând un obiect cu un set de setări de animație. Structura standard:
Acum este necesar să specificăm obiectul, să îl umplem cu instrucțiuni despre animație, tipul de animație, durata acestuia etc.
Obiectivele proprietăților țintă răspund în Anime pentru elementul pe care doriți să-l animați. Puteți specifica un selector CSS, așa cum am făcut mai sus, sau una dintre opțiunile de mai jos:
Elementul DOM, de exemplu, document.querySelector ('. Ball');
Nodelist, de exemplu, document.querySelectorAll ("Ball");
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
JS, de exemplu, ['.ball'].
Dacă aveți nevoie să înregistrați mai mult de o valoare în proprietatea țintă, adică veți aplica animația la mai multe elemente, puteți utiliza o matrice:
A doua proprietate din exemplul de mai sus deplasează elementul vertical folosind translateY, această proprietate va fi familiară celor care au lucrat cu CSS. Tiffany Brown și alți dezvoltatori sfătuiesc să utilizeze traducerea și scalarea pentru a muta și redimensiona elementele, mai degrabă decât proprietățile care sunt responsabile pentru poziția, lățimea sau înălțimea elementului. Această abordare îmbunătățește performanța și calitatea animației, deoarece pagina din browser nu se reconstruiește.
Următoarea proprietate din exemplul de mai sus este durata. Acesta este responsabil pentru durata de animație în Anime. Dacă aveți mai multe animații la intervale diferite, veți avea nevoie și de proprietatea de întârziere.
Proprietatea buclă din Anime este responsabilă de numărul de repetări ale animației. În mod implicit, este setat la false, adică animația începe o dată. Animația poate fi loopată cu valoarea adevărată, puteți specifica și numărul exact de repetări, specificând numărul necesar.
Proprietatea de direcție, reprezentată atât în CSS, cât și în Anime, poate fi setată la aceleași valori ca dublul CSS: normal, invers și alternativ. Ultima valoare comută animația de la cea normală la cea opusă, este perfectă pentru o minge de bouncing.
În cele din urmă, ultima proprietate din cod este relaxată. Viteza de animație este constantă? Poate animația ar trebui să înceapă încet și să se accelereze spre sfârșit? Trebuie să adaug o revenire la sfârșit? Funcția corectă de animație este unul dintre ingredientele cheie ale animației lustruite și spectaculoase.
Toate funcțiile de animație pot fi vizualizate folosind codul de mai jos:
Adăugați cea de-a doua animație pe bilele de bouncing
Să presupunem că doriți ca mingea să se micșoreze puțin când atingeți partea inferioară a recipientului. În Anime, puteți face acest lucru adăugând parametri de animație speciali în formularul de obiecte JS. Pe exemplul mingii, iată cum se poate face:
În codul de mai sus, se adaugă o nouă proprietate scaleX, ceea ce face ca bilele să fie mai largi. Valoarea însăși este specificată sub forma unui obiect literal cu anumite chei, cu care puteți controla animația.
Tasta de valoare vă permite să modificați lățimea elementului pe axa orizontală, iar durata și întârzierea sunt responsabile de durata animației și de punctul de început după terminarea animației anterioare.
Dacă inspectați un element în panoul dvs. de dezvoltatori preferat, puteți vedea modul în care Anime animă elementul adăugând un atribut inline stilului și actualizând dinamic valorile proprietății transformate.
Animație secvențială a două elemente: lovi cu piciorul mingea
Codul de mai jos reprezintă un exemplu în care puteți anima două elemente. În cazul nostru, acestea sunt două imagini. Cea de-a doua animație începe după prima.
Mingea începe să se miște numai după impact. În Anime.js, puteți specifica o animație suplimentară utilizând metoda completă (), în care, în cazul nostru, este stocat un al doilea obiect cu instrucțiuni pentru animarea mingii.
Desigur, în CSS puteți crea o versiune statică a animației. Vor fi necesare mai multe cadre cheie și o funcție bizară cubică Bézier. În acest caz, JS nu este deloc necesar, iar animația va fi netedă și va funcționa nativ. Demo pe CSS pur:
Activați, întrerupeți și reporniți animația
Anime.js vă permite să începeți, să opriți și să reporniți animația utilizând metodele .play (). pauză () și .restart (). De exemplu, așa puteți controla animația mingii.
În cod trebuie să faceți câteva comentarii:
Pentru a controla atât lovitura cât și mingea folosind butoanele, am creat două obiecte diferite. Ar fi posibil să se pună mingea în animație greva de animație, dar experiența a arătat că, atunci când butoanele de comandă numai animația principală, și anume, accident vascular cerebral;
astfel încât animația să nu pornească automat după încărcarea completă a paginii, trebuie să setați redarea automată la falsă;
și, în sfârșit, pentru a începe animația, trebuie doar să apelați metoda .play () pe obiectele kickBall și movingBall.
Rularea animației și a pauzei poate fi recreată rapid folosind proprietățile CSS ale stării animației-play și ale vârfului JS. Cu toate acestea, în acest fel, nu va fi posibil să se recreeze repornirea animației după finalizarea acesteia sau să se înceapă animația inversă din orice punct.
Animați atributele inline ale SVG utilizând Anime.js
Ultimul demo arată cum să animați atributele graficei inline SVG. De data aceasta, ca un exemplu, va fi un pisoi drăguț care se joacă cu o minge.
Demo-ul folosește clase CSS pentru diferite căi și forme, din care este desenată pisica SVG. Este mult mai ușor să căutați elemente în cod.
Așa puteți anima ochiul pisicii:
Codul de mai sus omite ochiul pisicii, schimbând valoarea atributului cy al cercului - elevul pisicii.
Dacă observați, ochii se mișcă succesiv. Am făcut acest lucru pentru a vă arăta un alt mod de a crea o animație secvențială în Anime.js. Proprietatea de întârziere poate fi un număr, dar și o funcție. Dacă utilizați funcția, ca și în codul de mai sus, puteți controla programatic începutul animației. Funcția verifică dacă elementul care urmează să fie animat este primul (la poziția zero în matricea țintă), adică ochiul stâng, apoi animația va fi amânată cu 300 ms. Dacă elementul nu este primul, întârzierea va fi rezultatul înmulțirii indexului elementului (adică 1) cu 500ms.
concluzie
Am început acest articol cu o scurtă trecere în revistă a modului în care animația este utilizată pe web. Apoi, am discutat când să folosim JS și când animația CSS. Rapid a trecut prin API Animații Web.
De asemenea, am introdus Anime.js, prima bibliotecă din această serie. Ți-am arătat posibilitățile și ai creat un demo.
Îmi place foarte mult să lucrez cu Anime.js: capabilitățile sale acoperă multe utilizări, sintaxa este destul de simplă și puteți crea efecte netede și frumoase folosind biblioteca.
Pentru cei care anterior nu au știut despre bibliotecă, aș spune că singurele documente - l README.md fișier de pe GitHub.
În secțiunea de întrebări despre GitHub veți găsi câteva răspunsuri pentru dvs. În spatele subiectului se urmărește în mod activ creatorul Anime, Julian Garnier.
Ediție: Comanda webformself.
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Articole similare
Trimiteți-le prietenilor: