Malo animacije može začiniti svako dosadno sučelje. U današnjem članku naučit ćete kako ga pravilno koristiti pomoću jQueryja.

Uvod

Animacija je koncept koji obično izaziva različite reakcije ljudi. Neki ga smatraju korisnim, dok drugi osuđuju njegovu prekomjernu upotrebu. Bez obzira na to, kada se koristi ispravno, animacija često krasi korisničko sučelje i čini ga čišćim i življim. U današnjem članku ćemo nakratko pogledati osnove jQueryja, zatim ćemo naučiti kako stvoriti našu prvu animaciju, naučit ćemo kako izgraditi razni efekti, a zatim ćemo izraditi animaciju koja se može koristiti u stvarnim projektima.

Korak 1. Osnove jQueryja

jQuery je JavaScript biblioteka koja ima za cilj pomoći razvojnim programerima stvoriti bogate, interaktivne web stranice i korisnička sučelja koristeći što manje koda.

Tipičan redak koda izgleda ovako:

$ (DOM element) .nešto ();

Rastavimo svaki dio:

• $ - Skraćenica za jQuery objekt... Ako koristite više okvira u isto vrijeme na istoj stranici, umjesto znaka $, koristite skraćenicu jQuery: jQuery (DOM element) .something ();
• (DOM element)- Element s kojim ćete nešto učiniti. Ovo je jedan od ključne značajke jQuery. Za dobivanje možete koristiti CSS birače željeni predmet... Ovdje se mogu koristiti svi selektori koji rade u CSS datoteci. ID-ovi, klase, pseudo-klase, bilo što.
• .nešto ()- Što želite učiniti s dobivenim predmetom. To može biti bilo što, od skrivanja elementa do postavljanja AJAX zahtjeva rukovaocu događaja.

Danas ćemo pogledati samo animaciju i efekte povezane s njenom funkcionalnošću.

Korak 2. Korištenje ugrađenih efekata

jQuery pruža veliki broj ugrađene metode koje možete koristiti odmah iz kutije. To su metode za prikazivanje/skrivanje elemenata, s raznim varijacijama uključujući pomicanje elementa i promjenu njegove neprozirnosti. Također možete koristiti brojne metode preklopiti koji mijenjaju vidljivost elementa.

Prije nego pogledamo svaku od ovih metoda, pogledajte osnovni format za pozivanje svake metode:

$ ("# element"). efekt ();

Iznad je osnovna jQuery paradigma, koju prvo dobivamo nužni element korištenjem CSS selektora. Zatim samo pozivamo bilo koju od ugrađenih metoda.

Iako se većina metoda može pozvati bez parametara, često je potrebno prilagoditi njihovu funkcionalnost. Svaka od metoda ima najmanje dva parametra: ubrzati i uzvratiti poziv.

ubrzati- definira trajanje animacije u sekundama. Možete proslijediti jedno od sljedećeg kao vrijednost ključne riječi: sporo, normalno ili brzo; ili postavite vrijeme u milisekundama.

uzvratiti poziv Funkcija je koja se izvršava nakon dovršetka animacije. Možete ga koristiti za bilo što, na primjer, uputiti AJAX poziv u pozadini, ažurirati dio korisničko sučelje i mnogo više. Ograničeni ste samo vašom maštom.

• pokazati/sakriti- Metode za prikazivanje i skrivanje elementa. Prihvaća brzinu i povratni poziv kao parametre.
• preklopiti- Metoda kojom se manipulira prikazom elementa, ovisno o Trenutna država element. Odnosno, ako je skriveno, onda ga prikazuje i obrnuto. Koristi metode prikazivanja i skrivanja.
• spusti se/povuci gore- Sasvim očite metode. Promjenom visine elementa stvara se klizna animacija koja prikazuje ili skriva element.
• slideToggle- Poprilično isto što i metoda prebacivanja, osim što koristi metode slideDown / slideUp za prikaz / skrivanje elementa.
• nestati u/izblijediti- Promijenite prozirnost elementa kako biste stvorili efekt blijeđenja.
• fadeTo- Mijenja prozirnost elementa prema proslijeđenoj vrijednosti. Kao što možete pretpostaviti, potreban je dodatni parametar neprozirnosti, gdje je 0 potpuna transparentnost a 1 je potpuno neproziran.

Kao dodatna funkcionalnost, metoda preklopiti, može uzeti kao parametar izraz koji odlučuje hoće li prikazati element ili ga sakriti.

Na primjer, ako želite promijeniti samo stavke popisa koje imaju klasu posljedica, vaš će kod izgledati ovako:

$ ("li"). preklopni ($ (ovo) .hasClass ("efekt"));

Jednostavno rečeno, funkcija preklopiti provjerava izraz koji mu je proslijeđen kao parametar, a ako je istinit, onda isključuje vidljivost elementa. Izraz koji smo proslijedili u primjeru provjerava ima li element određenu klasu.

Korak 3. Izradite vlastitu animaciju

Vrlo često ugrađene metode ne odgovaraju vašim potrebama, u tom slučaju ćete najvjerojatnije htjeti stvoriti vlastite efekte. Pomoću jQueryja to možete lako učiniti.

Za stvaranje osobnog efekta animacije potrebna vam je metoda animirati... izgleda ovako:

$ ("# neki element"). animirati ((svojstvo: vrijednost),);

Metoda animirati je vrlo slična bilo kojoj drugoj metodi po tome što se koristi na potpuno isti način. Dobivamo element i zatim mu prosljeđujemo neke parametre. Prihvaćeni parametri su ono što je metoda animirati različiti od unaprijed postavljenih efekata.

Parametri brzine i povratnog poziva obavljaju iste funkcije kao u prethodnim metodama. Objekt sa svojstvima koja se sastoje od određenog broja parova ključ/vrijednost je ono što ovu metodu čini jedinstvenom. Prodajete svako svojstvo koje želite animirati zajedno s konačnim rezultatom. Na primjer, pretpostavimo da želite animirati širinu elementa kako bi se promijenila na 90% njegove trenutne vrijednosti. To se može učiniti na sljedeći način:

$("# somelement").animate ((width: "90%"), 350, function () (upozorenje ("Animacija je završila izvođenje.");));

Gornji primjer koda animira promjenu širine na 90%, a zatim prikazuje poruku da je animacija dovršena.

Imajte na umu da niste ograničeni u količini. Možete dodati animaciju velikom nizu svojstava, uključujući neprozirnost, margine, padding, obrube, veličine fonta. Metoda animirati, također je prikladan jer može raditi s bilo kojim mjernim jedinicama. Pikseli, ems, postoci - sve radi. Tako će čak i donji primjer zamagljenog koda raditi. Istina neće izgledati baš jasno.

$ ("# somelement"). animirati ((širina: "90%" veličina fonta: "14em", visina: "183px", neprozirnost: 0,8, marginTop: "2cm", marginLeft: "0.3in", borderBottom: "30mm ",), 350, funkcija () (upozorenje (" Animacija je završila izvođenje. ");));

Kada se specificira svojstvo koje se sastoji od nekoliko riječi, piše se bez crtice, a prvo slovo druge riječi mora biti veliko. Ova se snimka bitno razlikuje od uobičajene CSS sintaksa pa svakako pokušajte to zapamtiti. Na primjer, nekretnina obrub-vrh, treba napisati borderTop.

Bilješka: jQuery vam omogućuje samo animiranje numeričkih vrijednosti svojstava. To znači da ne možete animirati svojstva boja koristeći samo jQuery. Ali nije tako loše. Uz malu pomoć jQuery korisničkog sučelja, možete vrlo jednostavno dodati animacije u boji.

Korak 4. Postavljanje efekta

Ako pogledate jednostavan efekt na demo stranici, možda ste primijetili malu pogrešku. Ponavljano pomicanje miša iznad elementa rezultira dugim redom ponavljajućih efekata animacije. Rezultat je neugodan učinak trzanja.

Najlakši način za rješavanje ovog problema je korištenje metode Stop, neposredno prije početka animacije. Ova metoda savršeno čisti red čekanja i animacija radi normalno.

Na primjer, ovo je vaš normalni kod:

$ ("# someelement") .lebdjeti (funkcija () ($ (ovo) .animirati ((vrh: 20), "brzo");), funkcija () ($ (ovo) .animirati ((vrh: 0) , "brzo");));

Koristeći metodu Stop kako biste spriječili nepotrebna ponavljanja animacije, vaše novi kod izgledat će ovako:

$ ("# someelement") .hover (funkcija () ($ (ovo) .stop (). animirati ((vrh: 20), "brzo");), funkcija () ($ (ovo) .stop () .animirati ((vrh: 0), "brzo";));

Vrlo jednostavno, zar ne? Ali ova metoda ima jedan mali problem. Fast motion ne proizvodi učinak ponavljanja, ali dolazi po cijenu nepotpune animacije. Ako želite u potpunosti riješiti ovaj problem, potreban vam je dodatak kao što je hoverFlow.

Korak 5. Dodavanje realizma - ublažavanje

Ako želite dodati malo više realizma, potrebna vam je dodatna kontrola nad brzinom kojom se animacija izvodi. Tu nam olakšavanje dolazi u pomoć. Olakšavanje kontrolira ubrzanje i usporavanje animacije tijekom vremena.

Metoda koja popuštanje koristi prema zadanim postavkama, tzv zamahnuti, ugrađen je u osnovnu funkcionalnost jQueryja. Dodatak za ublažavanje Roberta Pennera omogućuje vam korištenje nekoliko različitih efekata.

Postoji samo jedno upozorenje kada dolazi o korištenju osobnih učinaka ublažavanja: možete ih koristiti samo zajedno s specijalni efekti animacije, odnosno s metodom animirati ()... Nakon što povežete dodatak, vrlo je jednostavno koristiti bilo koju metodu ublažavanja tako što ćete je proslijediti kao parametar:

$ ("# somelement"). animirati ((širina: "90%" visina: "183px",), 550, "easeInElastic");

Možete provjeriti kako različiti efekti ublažavanja izgledaju na djelu na demo stranici u odgovarajućem odjeljku. Iako neki efekti možda nisu prikladni za sve situacije, vaša će animacija izgledati puno privlačnije kada ispravna upotreba neke metode ublažavanja.

Korak 6. Uspon - jQuery UI

Nadogradnja na jQuery korisničko sučelje donosi nam niz bitnih značajki. Zapravo, za korištenje dodatne funkcije, ne treba ti kompletna knjižnica... Za dobivanje željenu funkcionalnost, potrebni su vam ugrađeni efekti. Ne srž samog korisničkog sučelja, samo datoteka s ugrađenim efektima, koja teži oko 10 kilobajta.

Najviše važne funkcije Knjižnica jQuery UI efekata pruža podršku za animaciju boja, ublažavanje i prijelaze klasa.

Ako se sjećate, već sam rekao da se u jQueryju animacije mogu primijeniti samo na brojčane vrijednosti... Uz jQuery korisničko sučelje, možete zaboraviti na ovo ograničenje. Sada možete jednostavno animirati boja pozadine element, boja okvira i slično. Također, umjesto stvaranja zasebnih funkcija za nove značajke, jQuery UI jednostavno proširuje osnovnu funkcionalnost. animirati... To jest, ako ste uključili biblioteku na svoju stranicu, tada možete koristiti uobičajenu metodu animirati a on će za vas obaviti sav prljavi posao.

Na primjer, ako želite animirati boju obruba elementa pri lebdenju, vaš bi kod izgledao ovako:

$ (". blok"). lebdjeti (funkcija () ($ (ovo) .animirati ((borderColor: "crna"), 1000);), funkcija () ($ (ovo) .animirati ((borderColor: "crvena "), 500;));

Prijelazi klasa odgovorni su za animiranje između klasa. Korištenje osnovna knjižnica jQuery ako uklonite, a zatim dodate modificiranje klase izgled element, to se događa odmah. Kada imate na raspolaganju UI biblioteku, možete proći Dodatne opcije koji kontroliraju brzinu animacije, metodu popuštanje i uzvratiti poziv... Ova je funkcionalnost, kao i prethodne, izgrađena na vrhu postojećeg jQuery API-ja kako bi se olakšao proces prijelaza.

Korak 7. Napravite svoj prvi, pravi učinak

Svi gore navedeni primjeri samo su demo verzije funkcionalnosti. Bilo bi lijepo koristiti ih za stvaranje pravog efekta. To je ono što ćemo učiniti. Naš učinak neće biti nešto radikalan ili poseban, ali uz njegovu pomoć naučit ćete stečeno znanje primijeniti u praksi.

Pretpostavimo da trebamo prikazati sliku unutar koje će se dva odjeljka pojaviti pri lebdenju mišem. Gornji dio će sadržavati naslov slike, a donji dio će sadržavati njezin Kratki opis... Znam da možeš pronaći velika količina razni dodaci koji rade istu stvar, ali danas ćemo to učiniti od nule. Nije tako teško kao što zvuči. Zapravo, vrlo je jednostavno i dovoljno brzo. Počnimo.

HTML

Prvo, potrebna nam je HTML baza.

Za ovaj učinak moramo razmišljati o strukturi svakog elementa. Svaki element bit će umotan u div, s klasom artikal... Unutar diva bit će smještena tri elementa: slika i dva diva koja sadrže naziv i opis slike.

Ostali dijelovi su prilično jednostavni. Moramo povezati jQuery biblioteku, jQuery UI i datoteku koja sadrži naš osobni kod na stranicu. Zapamtite da su nam potrebni samo jQuery UI efekti, ako želite uključiti više efekata, trebat će vam posebna montaža, koji se može preuzeti ovdje.

Ovako će naša stranica izgledati u ovoj fazi.

CSS

.item (položaj: relativan; margina: 20px 60px 40px 0; overflow: hidden;) .item .title, .item .desc (pozadina: # 000; boja: #fff; pozicija: apsolutna; prikaz: blok; širina: 638px ; neprozirnost: 0,4;) .item .title (gore: 0; veličina fonta: 16px; padding: 12px 10px 25px 0; poravnanje teksta: desno desno;) .item .desc (dolje: 0; veličina fonta: 12px; padding: 5px 0 15px 10px;)

Ovdje treba obratiti pažnju na nekoliko stvari. Svaki element ima skup svojstava položaj u vrijednosti srodnika, tako da je lako smjestiti druge unutar ovog elementa. Također, blokovima je dodijeljeno svojstvo prelijevanje: skriveno, tako da naslov i opis slike možemo sakriti izvana kada nisu potrebni.

Blokovi koji sadrže naslov i opis imaju postavljeno svojstvo pozicija: apsolutna tako da su precizno pozicionirani unutar okvira sa slikom. Koordinata dodijeljena naslovu vrh: 0 tako da sjedi na vrhu, a opis dolje: 0, i, sukladno tome, nalazi se na dnu.

Ostatak CSS-a je vrlo jednostavan, s dodijeljenim stilovima fonta, malo pozicioniranja. Ništa posebno.

Sada naša stranica izgleda ovako.

Uključivanje JavaScript magije

$ (dokument) .spreman (funkcija () (// Šifra za ostali dijelovi demonstracije $ (". item"). djeca ("div.title"). animirati ((gore: -60), 300); $ (". item"). djeca ("div.desc"). animirati ((dolje: -40), 300); $ (". item"). lebdjeti (funkcija () ($ (ovo) .children ("div.title"). stop (). animirati ((vrh: 0), 700, "easeOutBounce"); $ (ovo ) .children ("div.desc"). stop (). animirati ((dolje: 0), 700, "easeOutBounce");), funkcija () ($ (ovo) .children ("div.title"). zaustavi (). animiraj ((gore: -60), 500); $ (ovo) .djeca ("div.desc"). stop (). animiraj ((dolje: -40), 400;)); $ (". title, .desc"). lebdjeti (funkcija () ($ (ovo) .stop (). animirati ((backgroundColor: "# 444"), 700, "easeOutSine");), funkcija () ( $ (ovo) .stop (). animate ((Boja pozadine: "# 000"), 700;)); ));

Možda izgleda malo komplicirano, ali zapravo nije. Pogledajmo svaki dio.

Logika iza ovog efekta je vrlo jednostavna. Budući da smo elemente pozicionirali apsolutno, prvo ih sakrijemo izvan okvira sa slikom. Kada pređemo mišem iznad slika, samo ih trebamo vratiti u prvobitni položaj.

Prvo pomičemo naslov i opis izvan roditeljskog bloka. Ali umjesto da koristimo CSS, radimo ovo korištenjem JavaScripta, iz vrlo specifičnih razloga. Čak i ako je JS onemogućen, stranica će i dalje biti funkcionalna. Naslov i opis ostat će na vrhu slike i izgledat će kao da je primijenjen efekt lebdenja. Ali ako bismo sakrili ove blokove sa koristeći CSS i JS na stranici bi bio onemogućen, nikada se ne bi pojavili na ekranu.

Naš kod počinje stvaranjem funkcije lebdjeti za svaku stavku. Prva funkcija se izvodi pri lebdenju mišem, druga, naprotiv, pri povlačenju.

Unutar funkcije, ovaj- označava element koji je pokrenuo događaj. Koristimo metodu animirati, za promjenu odgovarajućih vrijednosti. Također koristimo popuštanje kako bismo dodali više privlačnosti našem učinku. Kada lebdimo mišem, samo mijenjamo vrijednosti natrag u prvobitno stanje.

Kao mali dodatak, prelazak miša iznad blokova naslova ili opisa polako će mijenjati boju, zahvaljujući korisničkom sučelju jQuery.

To je to, naš efekt je spreman za korištenje. Možete pogledati i uz navedene primjere.

JQuery je izvrsna biblioteka koja se značajno diverzificirala u posljednjih godina pristupi programera rješavanju problema s kojima se susreću. Kada se pojava jQuery CSS nije mogao stvoriti složene animacije; Za njihovu izradu korišten je JavaScript. jQuery je pojednostavio stvaranje animacije za red veličine. Knjižnica sadrži najjednostavnije animacije (fadeIn (), hide (), slideDown (), itd.) i omogućuje stvaranje bilo koje animacije pomoću metode animate (). Ovaj je članak posvećen opisu ove metode.

jQuery animate () je metoda omotača, odnosno radi na unaprijed odabranom skupu DOM elemenata omotanih u jQuery. Metoda vam omogućuje da primijenite željene efekte animacije na elemente u skupu. Provođenje navedenog u praksi omogućeno je postojanjem skupa CSS svojstava i vrijednosti koje će ta svojstva poprimiti nakon završetka izvođenja animacije. Međuvrijednosti koje će stil imati nakon postizanja željenog učinka (automatski kontrolira motor za animaciju) određene su trajanjem efekta i funkcijom ublažavanja; ove dvije opcije bit će razmotrene u nastavku.

Popis CSS svojstava koja su animirana ograničena je na ona koja mogu poprimiti numeričke vrijednosti. Vrijednosti mogu biti apsolutne (npr. 200) ili relativne. Kada se postavi na apsolutne vrijednosti, zadana jQuery jedinica su pikseli. Također možemo koristiti određene jedinice: em, rem ili posto. Za određivanje relativnih vrijednosti koriste se prefiksi + = ili - =; prefiksi usmjeravaju ciljnu relativnu u pozitivnom ili negativnom smjeru, respektivno.

Parametri i potpis metode animate ().

Metoda ima dva glavna oblika; većina korištenih parametara je izborna (u uglatim zagradama).

• animirati (svojstva [, trajanje] [, ublažavanje] [, povratni poziv])
• animirati (svojstva [, opcije])

Zapravo, parametri:

• svojstva (Objekt): popis css svojstava koja sadrži vrijednosti do kojih se došlo na kraju animacije.
• trajanje (broj | String): trajanje učinka u milisekundama ili jednom od unaprijed definiranih utvrđene linije: "Sporo" (600 ms), "normalno" (400 ms) ili "brzo" (200 ms). Zadana postavka je "normalno".
• easing (String): naziv funkcije ublažavanja (koja specificira promjenu brzine animacije) koja će se koristiti u prijelazu. Zadana postavka je "ljuljačka".
• povratni poziv (funkcija): funkcija koja se izvršava kada animacija završi za svaki animirani element.
• opcije (Object): objekt koji sadrži skup svojstava (dodatnih opcija) koje treba proslijediti metodi. Dostupno sljedeća svojstva:
  • uvijek (funkcija): funkcija koju treba pozvati kada animacija završi ili kada se animacija zaustavi (ali ne završi).
  • dovršeno (funkcija): funkcija koja se izvršava kada animacija završi.
  • done (Funkcija): funkcija koja se poziva kada animacija završi.
  • trajanje (niz | broj): gore opisano.
  • easing (String): gore opisano.
  • neuspjeh (funkcija): izvršava se kada neuspješan pokušaj animacija.
  • napredak (funkcija): Izvršava se nakon svakog koraka animacije. Poziva se jednom za svaki element nakon što se njegova animacija pokrene.
  • red čekanja (Boolean): kada se animacija treba smjestiti u red za efekte (detalji ispod). Zadana vrijednost je true.
  • specialEasing (Object): objekt čiji su parametri css svojstva, čije su vrijednosti prijelazne funkcije
  • start (funkcija): Izvršava se kada se animacija počne izvoditi.
  • korak (funkcija): funkcija za pozivanje svakog animiranog svojstva svakog animiranog elementa.

Olakšavanje roka koristi se za opisivanje načina na koji kontrolira renderiranje i postavlja brzinu kadrova animacije. Animacija se izvršava sekvencijalno ako je opcija čekanja istinita, a paralelno (neuredno) ako je netočna.

Primjeri korištenja metode animate ().

Primijenimo ovu metodu u praksi. Imajte na umu da se pogreške mogu pojaviti prilikom izvođenja animacija složenog reda kreiranih ovom metodom. Odnosno, za vrlo složene animacije ovu metodu je najbolje izbjegavati.

Pojedinačna animacija

Izuzetno je jednostavno stvoriti jednu animaciju, samo jedan poziv. Na primjer, trebate premjestiti element s jedne strane bloka na drugu. Da bismo ilustrirali ovu animaciju, napravimo dvije element div, jedno u drugom. Stil je sljedeći: pozadina unutarnjeg diva je crvena. Kod:

HTML

CSS

.pravokutnik (širina: 300px; visina: 20px; prikaz: blok; položaj: relativan; obrub: 1px puna crna; margina: 20px 0;) .square-small (zaslon: blok; širina: 20px; visina: 20px; položaj: apsolutno; boja pozadine: crvena;)

Animiramo () i pomaknimo mali kvadrat s jedne strane na drugu:

jQuery

$ (". pravokutnik") .pronađi (". kvadratni-mali") .animiraj ((lijevo: 280), "sporo");

Samo lijevo svojstvo je animirano. Trajanje animacije - unaprijed postavljena vrijednost sporo (600ms). Interijer

Vrhunski povezani članci