În acest articol, vom analiza elementele de bază ale animației în jQuery. astfel încât să puteți folosi pentru a dezvolta pagini complexe. Animația este funcționalitatea de bază a elementelor interactive de design web.
Designul site-ului joacă un rol important în atragerea vizitatorilor în permanență. Designul interactiv atrage mai multă atenție decât designul obișnuit static.
Folosirea practică a animației în jQuery
jQuery este utilizat pe scară largă pentru a dezvolta elemente interactive, cum ar fi glisoare, meniuri, scrollers și altele. Înainte de a merge direct la animație, vă recomand să examinați următoarele exemple practice de implementare, ilustrând puterea animației în jQuery.
- Glisare laterală atunci când derulează;
- Mergeți cadre imagine folosind jQuery;
- Animație "Vise de noapte";
- Animarea deschiderii cortinei cu jQuery;
- Creați un meniu plutitor de navigare utilizând jQuery.
Tu, ca începător, nu poți repeta imediat ceea ce este dat în aceste exemple. Prin urmare, vom înțelege în continuare elementele de bază ale animației din jQuery din punctul de vedere al începătorilor.
Descărcați codul sursă Demo
Introducere în elementele de bază ale animației în jQuery
Putem ascunde / afișa elementul folosind afișarea atributelor CSS sau vizibilitatea. jQuery simplifică procesul introducând două funcții de ascundere și de afișare. Luați în considerare următorul cod pentru a afișa și a ascunde elementul HTML.
În mod ideal, trebuie să netezim procesul de ascundere și de afișare a elementelor, folosind animația pentru a îmbunătăți experiența utilizatorului. jQuery oferă două metode integrate pentru afișarea și ascunderea elementelor cu animații simple.
- Dizolvarea - realizează procesul de dizolvare treptată a unui element HTML, schimbând proprietatea de opacitate;
- Slip - realizează extinderea / compresia treptată a elementului HTML, schimbând înălțimea acestuia.
Să vedem cum să aplicăm aceste metode pentru a afișa și a ascunde elemente cu efect de animație.
jQuery încapsulează complexitatea animației oferind metode construite pentru rezolvarea diferitelor sarcini de web design.
dizolvare
Dizolvarea este de obicei implementată utilizând funcțiile fadeIn și fadeOut. Valoarea proprietății opacității elementului este mărită de funcția fadeIn și redusă de funcția fadeOut. De asemenea, putem trece intervalul de timp al dizolvării, după cum se arată în următorul exemplu:
alunecare
Funcțiile de alunecare pentru a obține efectul animației modifică înălțimea elementului, în loc de transparență. Funcțiile au o sintaxă similară și funcționează similar cu funcțiile de dizolvare.
În acest caz, slideUp este folosit pentru ascundere și slideDown este folosit pentru a afișa elemente. Următorul cod arată modul principal de utilizare a funcțiilor de alunecare:
Noțiuni de bază cu jQuery Animate
Cei mai mulți începători consideră că dezvoltarea animației este o sarcină destul de dificilă. Acest lucru este cu siguranță dificil dacă începeți cu o ardezie curată. jQuery încapsulează toată complexitatea furnizând o singură funcție care controlează toate tipurile de animație.
În general, animația este creată prin modificarea valorilor atributelor CSS. După ce ați reușit să animați funcția jQuery. construirea unei animații complexe va fi o sarcină simplă. Să începem prin examinarea șablonului pentru funcția animată:
Acest cod ilustrează modelul de utilizare al funcției animate. Primul parametru conține toate proprietățile și valorile CSS.
Următorul parametru opțional determină durata animației. Al treilea parametru specifică metoda de stretching (tipul de animație), iar ultimul parametru specifică funcția anonimă care se numește atunci când animația se termină.
După ce ne uităm la modul de utilizare, putem continua să creăm ceva practic cu animația jQuery.
Animarea unor părți ale imaginii
În această secțiune, vom examina modul în care puteți afișa o imagine aplicând animația în părțile sale individuale. Mai întâi trebuie să împărțim imaginea în câteva mici. Puteți utiliza tehnica de partajare a imaginilor prezentată în acest articol: "Crearea unui puzzle folosind jQuery și PHP".
Iată imaginea pe care o vom folosi pentru animație:
În codul sursă pentru acest articol, veți găsi 12 imagini obținute după separare. Fiecare imagine va avea o dimensiune de 150 cu 150 de pixeli. Ele sunt împărțite în două rânduri de 6 bucăți. Toate cele 6 imagini ale fiecărui rând vor fi afișate în colțul din dreapta al paginii, folosind următorul cod:
Iată 12 imagini aranjate în două rânduri folosind două clase CSS img_item și img_item2. Acum, să ne uităm la CSS pentru poziționarea imaginilor:
Conform codului de mai sus, toate imaginile din fiecare rând vor fi ascunse și plasate una peste alta, folosind poziționarea absolută. Acum ne putem uita la codul jQuery pentru a genera o imagine folosind animație:
Deci, avem doi selectori pentru selectarea elementelor din clasele img_item și img_item2. Apoi aplicăm funcția animată elementelor individuale pentru a modifica fără probleme valoarea proprietății de opacitate la 1, iar proprietatea stângă este schimbată în raport cu poziția părții anterioare a imaginii. De fapt, animația va fi aplicată în toate părțile imaginii în același timp, iar rezultatul este ceva de genul:
Putem folosi efecte similare în interiorul glisantelor, screensaverelor, galeriilor de imagini. Iată o demonstrație a exemplului anterior.
Acum știți elementele de bază ale funcției animate. Să analizăm mai atent aspectele legate de animație, în special pentru setări mai detaliate.
Dezvoltarea unei secvențe de efecte
În exemplul anterior, animația a fost aplicată tuturor elementelor imediat după încărcarea paginii. Dar, uneori, trebuie să aplicăm efecte secvențial, când animația fiecărui element începe după ce animația elementului anterior a fost finalizată. Deci, să încercăm să încărcăm aceeași imagine folosind o serie de efecte. Să începem cu HTML:
Singura diferență față de versiunea anterioară este utilizarea unei clase CSS în locul a două clase pentru serie. Această implementare va genera rândurile folosind codul jQuery, în loc de codare tare folosind clase CSS.
CSS pentru implementarea acestui exemplu va fi același ca în cazul precedent. Acum, uitați-vă la codul jQuery pentru a crea o secvență de efecte:
După încărcarea paginii, selectăm toate elementele de imagine utilizând clasa img_item. Apoi, trecem aceste elemente la funcția animateImg pentru a crea animația. Următorul cod demonstrează implementarea funcției animateImg:
Funcția animateImg utilizează patru parametri. Primul parametru definește colecția de elemente de imagine. Al doilea și al treilea parametru determină valorile proprietăților de la stânga și de sus pentru poziționarea pe ecran.
Inițial, aceste două valori sunt setate la 0 pentru a poziționa imaginea în colțul din stânga sus al ecranului. Al patrulea parametru este numărul de ordine al imaginii pentru împărțirea lor în rânduri.
În primul rând, verificăm dacă se ajunge la sfârșitul matricei de elemente, utilizând condiția dacă. Apoi selectați imaginea din matrice în funcție de numărul secvenței specificat.
Apoi, numim funcția animată cu o durată de 1500 milisecunde. În cele din urmă, mărim numărul secvenței pentru a selecta următorul element din matrice.
În acest exemplu, avem două rânduri de câte 6 imagini fiecare. Prin urmare, folosim diviziunea prin modulul numărului ordinal pentru a verifica dacă am ajuns la sfârșitul seriei. În acest caz, creștem valoarea de vârf pentru următoarea imagine pentru a crea dinamic rânduri.
În cele din urmă, numim recursiv funcția animateImg. Pentru a trece prin toate elementele și pentru a genera o imagine completă. Următoarea imagine prezintă succesiunea efectelor în acțiune.
Aici veți găsi o demonstrație a exemplului anterior.
După cum puteți vedea, am folosit funcția de animație pentru a realiza animația elementului următor. Prin urmare, fiecare etapă a animației începe după terminarea celei anterioare. Putem realiza o funcționalitate similară prin utilizarea coadă de funcții animate.
Efectele lanțurilor
Până acum am creat un efect pentru fiecare element. În sarcini mai complexe, trebuie să combinăm mai multe efecte pentru fiecare element dintr-un lanț. Deci, haideți să schimbați exemplul anterior adăugând lanțurile de efecte:
Putem crea lanțuri de efect pentru un element prin apelarea funcției animate de mai multe ori utilizând notația punctului. În exemplul anterior, începem o altă animație după prima, folosind funcția .animate. Putem adăuga orice număr de efecte folosind această tehnică. Există o demonstrație a unui lanț de efecte.
concluzie
În acest articol, am analizat cum să construim animații utilizând funcția animată jQuery. Ne-am uitat la diverse metode practice de aplicare a animației pe anumite părți ale unei imagini pentru a genera o imagine completă.
Acum puteți continua să studiați metodele îmbunătățite de animație din jQuery enumerate în lista următoare:
- Efecte cozile;
- Gestionarea procesului de animație;
- Gestionarea pașilor de animație;
Traducerea articolului "Ghidul pentru începători pentru a lucra cu animația jQuery" a fost pregătită de echipa prietenoasă a proiectului Saitostroenie de la A la Z.
Articole similare
Trimiteți-le prietenilor: