De ce sa faci animatii pe js pur?
poți fi îngrozit. La urma urmei, există o mulțime de biblioteci. de exemplu, jQuery noastre preferate. Deci este așa, dar animația pură este utilă pentru a putea scrie aici în orice situație.
- Un site mic este realizat cu un minim de efecte. Bibliotecile terțelor părți nu sunt conectate. Și dintr-o dată este nevoie de o dizolvare netedă a elementului când faceți clic. Este meritat din cauza unei astfel de probleme pentru a conecta jQuery. Mulți oameni se vor conecta și de fapt o vor face bine - în lumea modernă 98KB nu este interesat. Cu toate acestea, atunci când lucrați într-o echipă, există timlide grele care nu vor permite bibliotecii terților să fie încorporată în proiect din cauza animației mici. Deci trebuie să înțelegi singur animația.
- Se folosește o bibliotecă gata făcută și nu are efectul dorit. De exemplu, aveți nevoie ca elementul să se rotească de trei ori în sensul acelor de ceasornic înainte de a dispărea, săriți și apoi dizolvați. În acest caz, biblioteca va trebui să fie extinsă. și din nou trebuie să înțelegeți elementele de bază ale organizării efectelor de animație.
Prin urmare, înțelegerea modului în care sunt organizate animațiile pentru elemente nu va fi superfluă. În acest articol, vom examina tehnicile de bază și cel mai simplu exemplu - vom scrie o funcție care poate ascunde ușor elementul DOM, reducând transparența sa.
Vom avea două fișiere: index.html și script.js. Documentul HTML este foarte simplu:
Am realizat div 300x200 pixeli, l-am umplut cu culoare, am dat o mică indentare exterioară și i-am atribuit id = item. Nimic mai mult decât atât încât nu avem nevoie.
Acum organizăm activitatea în JS. Mai intai, ne asteptam la un eveniment div:
Apoi, folosind document.getElementById, obținem un div cu id = element și setăm evenimentul onclick, când se întâmplă, se va afișa alerta de verificare. De fapt, în loc de o alertă, vom pune un apel la funcția de decolorare un pic mai târziu, pe care vom începe acum să îl ia în considerare.
Deci, ce avem nevoie pentru animație? Să încercăm să ne gândim la această interfață a funcției, care în viitor o va face foarte convenabil! Se va întâmpla ceva:
Într-adevăr, orice animație are un element peste care este produs și timpul în care vedem modificări netede. Dar ce cadre în secunde?
Deci, această funcție are nevoie de un al doilea parametru în milisecunde, prin care trebuie să repete execuția. Se pare că dacă scriem:
= atunci vom vedea o alertă la fiecare 20 de milisecunde. Și dacă scriem
Cu cadre pe secundă, acest lucru se corelează foarte ușor. Într-o secundă, o mie de milisecunde, atunci dacă vrem să arătăm persoanei 50 de cadre pe secundă, apoi 1000/50 = 20ms - la fiecare 20 de milisecunde, trebuie să repetăm acțiunile într-un interval.
Plecând de la toate cele de mai sus, putem descrie deja gama de bază a funcției noastre:
Construcțiile var fps = f || 50 și var timp = t || 500 declara parametrii impliciți. Asta este, dacă nu vom trece al doilea și al treilea element la funcție, atunci valorile lor vor fi 50 și respectiv 500.
De asemenea, designul organizației setInterval este logic. Am setat intervalul la o frecvență de 1000 / fps. După terminarea animației, trebuie să ștergem acest interval.
Rețineți linia elem.style.display = 'none'. Această indicație este necesară pentru ca după opacitatea elementului să fie zero, să se elibereze spațiul. Dacă acest lucru nu este realizat, elementul nu va fi vizibil, dar locul său va rămâne gol - elementele inferioare nu se vor mișca acolo.
Aproape totul! Ramane pentru noi sa adaugam doar schimbarea proprietatii vizibile si verificarea finalizarii animatiei.
Să punem totul în cod:
Rolul principal de control aici este jucat de pașii variabili, în care stocăm informații despre câte rame suplimentare să arătăm. Când pașii ajung la zero, animația este finalizată.
Asta e tot. Ramane doar sa trecem corect parametrii la functia noastra:
Singura subtilitate - aceasta - este o indicație a elementului curent prin care a fost făcut clicul.
Articole similare
Trimiteți-le prietenilor: