Share
HTML este limba pe care web-ul este construit și este un fel de fiară ciudată. Deși a fost inițial concepută ca o modalitate de a împărtăși cu ușurință informații academice pe Internet, ea a fost transformată lent pentru a se adapta mediului mediocru bogat pe care îl cunoaștem și îl iubim. Din cauza caracterului întâmplător al HTML (și JavaScript, limbajul de programare care manipulează elementele din HTML și le face interactive), uneori trebuie să ne gândim puțin în afara casetei. În această serie de tutorial, vă voi arăta cum să faceți animație încrucișată cu ajutorul unei metode numite Procedeul de spriting poate. Și, pentru că aceasta este o oportunitate de învățare, vom face totul fără biblioteci externe (cum ar fi jQuery).
Aceasta va fi o serie de patru părți. Voi explica spriting-ul propriu-zis in partea a treia (acest articol) cu cateva baze de date JavaScript, dar in mai tarziu in transe vom trece in tehnici intermediare, cum ar fi incapsularea, manipularea evenimentelor si suportul touch screen.
Deci sa începem!
Animația se bazează pe un fenomen numit persistența vederii, care spune că, dacă creierul dvs. vede destul de repede o mulțime de imagini similare, atunci va apărea ca și cum ar fi o imagine în mișcare. Fiecare tip de film sau video utilizează această tehnică de bază - multe cadre ușor diferite sunt afișate în succesiune rapidă pentru a face ca ceva să pară că se mișcă. Filmul rulează de obicei la 24 de cadre pe secundă (₁), în timp ce televiziunea difuzată în America de Nord este prezentată la 29,97 cadre pe secundă (2). Deci, cu alte cuvinte, ceea ce dorim să facem este să creați ceva care să arate cadre similare într-adevăr rapid (de câteva ori pe secundă).
Există două motive principale pentru care animația este dificil de utilizat pe web:
O modalitate în jurul acestor probleme este de a crea o foaie de sprite. În elemente cum ar fi divs, putem seta o imagine de fundal pentru div care poate fi mai mare decât elementul însuși. De asemenea, putem seta poziția de fundal astfel încât să determinăm exact ce parte din imaginea mai mare va fi afișată. O foaie de sprite este o imagine mai mare, realizată din mai multe imagini mai mici pe care le putem mișca în jurul nostru, pentru a putea lua locul multor imagini mici. Aruncati o privire la exemplul de mai jos, folosind J, mascota companiei mele Joust Multimedia:
Deși există zece imagini diferite de J, ele sunt plasate împreună într-un fișier PNG mai mare (folosim PNG-uri pentru că pot prezenta transparență). Dacă avem a div care este doar dimensiunea uneia dintre imagini, și am setat acest PNG ca fundal, va arăta ca o singură imagine.
Vedeți hazdm pe CodePen.
Deși acest lucru pare a fi o mulțime de probleme pentru a trece prin a arăta o imagine, această metodă rezolvă frumos cele două probleme pe care le-am avut înainte. Cu foarte puține JavaScript (o linie!) Puteți schimba poziția de fundal a unui a div, și funcționează pe toate. De asemenea, deoarece toate aceste cadre sunt pe aceeași imagine, va lua doar o singură cerere pentru a încărca acea imagine în pagină. Deci, odată ce pagina se încarcă, se poate comuta între sprite fără nici o problemă.
Deci, cum să setăm acest lucru pentru a anima ușor atunci? Primul pas este crearea foii de sprite. Veți dori să știți care ar trebui să fie dimensiunile finale ale imaginii dvs. și să spațiați spritele în mod corespunzător într-o rețea. De exemplu, imaginea mea J va fi de 40px lățime până la 50px înălțime, așa că mi-am aliniat spritele mele exact 40px distanță orizontal și exact 50px separat pe verticală. Probabil va fi mai ușor dacă setați sprite-ul de pornire în colțul din stânga sus.
Apoi vom aranja a div cu un pic de CSS pentru a vă asigura că totul apare corect:
Și aici este CSS-ul nostru pentru a vă asigura că sprite se afișează corect:
Accentsconagua
.caracter / * * Foarte important ca stabilim înălțimea și lățimea * caracterelor noastre la înălțimea și lățimea spritelor * / height: 50px; lățime: 40px; / * * Trebuie sa le pozitionam absolut astfel incat sa avem un control deplin asupra pozitiei lor in stadiul * / pozitie: absolut; stânga: 100px; top: 120px; #j / * * Și acum am setat imaginea de fundal pentru div * pentru a fi primul sprite (în colțul din stânga sus) * / background-image: url ('j.png'); background-repeat: no-repetare; pozitie pozitie: 0 0; Observați următoarele lucruri:
div la dimensiunea spritei noastre'No-repeat' '0 0'-aceasta va afișa sprite în colțul din stânga susAcum, va lua doar o singură linie de JavaScript pentru a schimba poziția de fundal pentru a afișa următoarea sprite.
document.getElementById ('j'). style.backgroundPosition = '-40px 0px'; Aici, selectăm elementul (cu id = 'j') și setarea atributului de stil 'BackgroundPosition'. Observați că este scris 'BackgroundPosition' în JavaScript, și nu ca „Poziția de fond“ în CSS. De asemenea, observați că în JavaScript, 'Px' este necesară atât pentru suma x cât și pentru y - nu putem să-i transmitem doar cifrele. Și pentru că mișcăm imaginea de fundal, trebuie să o mutăm în direcția opusă față de ceea ce vă așteptați. Pentru a vă deplasa la sprite în dreapta, trebuie să facem ca imaginea să se deplaseze 40px spre stânga.
Acum, dacă avem doar ceva simplu pentru a executa acest cod (ca un buton), putem vedea cadrele se schimbă în acțiune: checkout DIsgk pe Codepen.
În plus, ați putea fi interesat să aruncați o privire la codul sursă și pentru această pagină. Ea are toate exemplele aici cu comentarii amănunțite. Și iată foaia de sprite pe care o folosesc.
Ceea ce am acoperit în acest tutorial este un început bun, dar nu este într-adevăr o animație adecvată. În partea a doua a acestei serii vom anima, de fapt, unele alergări și sărituri, prin crearea de bucle cu diferiții sprites.
Prin partea a patra, vom crea mouseovers pentru un pic de acțiune robot. Consultați ByGtv Codepen pentru o previzualizare.
Deși aceasta poate fi o metodă excelentă pentru animarea pe web, există câteva dezavantaje. În primul rând, vă poate cere să creați fiecare cadru individual de animație, care poate dura mult timp. În al doilea rând, browserele nu au cele mai exacte cronometre pentru animație, deci dacă este esențial ca animația dvs. să fie programată perfect, atunci este posibil să nu funcționeze. În cele din urmă, Safari mobile (folosit pe iPhones și iPads) are o "caracteristică" în care dacă aveți o imagine de fundal care este fie mai mare de 2MB sau mai mare de 1024 x 1024 x 3 pixeli (sau 3,145,728 pixeli totali), va reseta automat imagine, distrugând efectul de spritare. Aceasta înseamnă că spritele cu adevărat mari, sau animațiile cu un număr foarte mare de sprites, nu sunt în discuție. Dar, pentru animații simple, mici, pe care doriți să fiți foarte interactive, aceasta este o modalitate ușoară și minunată de a obține ceva care funcționează peste tot.
1. Înainte ca sunetul să fie introdus cu filmul, nu exista o rată standard a cadrelor. Camerele de luat vederi au fost manevrate de o mână manuală, deci dacă ai avea un cameraman nou, viteza cadrelor ar putea încetini și accelera neintenționat. În mod similar, cinematografele mai puțin renumite au fost celebre pentru a le spune proiecționarilor să coboare proiectorul mai repede pentru a accelera spectacolul, astfel încât să se potrivească în mai multe vizionări. Acesta este și motivul pentru care ne gândim stereotipic la filmele pre-sunet ca în mișcare în jurul valorii de comic rapid-cele mai multe au fost filmate în jur de 16 la 18 fps, deci atunci când le jucăm astăzi la 24 de cadre pe secundă, se deplasează mai repede decât au fost inițial.
2. Televiziunea a fost difuzată inițial la 30 de cadre pe secundă în America de Nord, dar televizorul color a provocat o eroare atunci când a fost arătată la acea viteză. Inginerii și-au dat seama că l-ar putea rezolva încetind ritmul cadrelor cu 0,1%, motiv pentru care acum este stabilit la 29,97 fps. De asemenea, în afară de toate problemele tehnice îngrozitoare implicate în conversia unui film în 24 de cadre pe secundă pentru a fi afișate la televizor la 29,97 fps, afișarea televiziunii la o viteză mai rapidă a avut un efect interesant asupra publicului. Mulți oameni care urmăresc proiecțiile de testare a filmului "The Hobbit" la 48 fps au raportat că rata crescută de cadre a făcut filmul să pară "mai ieftin", chiar dacă era mult mai înalt decât un film tipic, doar pentru că au crescut pentru a asocia rate de cadre mai rapide urmărind ceva la televizor.
