Animație, webreference

Animație prin cerereAnimationFrame

Cu toate acestea, în realitate, nu ar trebui să folosim niciodată setInterval. setInterval va trage mereu la aceeași viteză, indiferent de ce utilizator are computerul, ce face utilizatorul și dacă pagina curentă este activă. Pe scurt, funcționează, dar nu în mod eficient. În schimb, trebuie să folosim noul API requestAnimationFrame.

requestAnimationFrame a fost creat pentru a face animația buna și eficientă din punct de vedere al costurilor. Apelați-l cu un indicator pentru funcția de desen. La un moment dat în viitor, browserul va apela funcția de desen când browserul este gata. Acest lucru oferă browserului un control deplin asupra desenului, astfel încât să reducă rata cadrelor, dacă este necesar. Browserul poate de asemenea să facă animația mai ușoară, fixând rata de reîmprospătare a ecranului la 60 de cadre pe secundă. Pentru a forma o animație, pur și simplu apelați requestAnimationFrame în mod recursiv la început.

requestAnimationFrame devine standard, dar majoritatea browserelor suportă doar versiunile proprii cu un prefix. De exemplu, Chrome utilizează webkitRequestAnimationFrame. și Mozilla acceptă mozRequestAnimationFrame. Pentru a rezolva aceasta, vom folosi scenariul lui Paul Irish. Conectează pur și simplu diferite opțiuni în noua funcție: requestAnimFrame.

Să încercăm un exemplu simplu în care animăm un dreptunghi pe ecran.

Simplu dreptunghi de animație folosind requestAnimFrame (faceți clic pentru a începe)

Curățarea fundalului

Acum ați observat problema. Dreptunghiul nostru se mișcă pe ecran, actualizând cu cinci pixeli la fiecare 100 de milisecunde (sau 10 cadre pe secundă), dar rămâne dreptunghiul vechi. Și se pare că dreptunghiul devine doar mai lung și mai lung. Rețineți că pânza este doar un set de pixeli. Dacă setați câțiva pixeli, ei vor rămâne acolo până când se vor schimba. Deci, să ștergem pânza în fiecare cadru înainte de a trage un dreptunghi.

Desenarea unui dreptunghi prin curățarea fundalului (faceți clic pentru a începe)

Simulator de particule

Acesta este tot ceea ce este cu adevărat necesar pentru animație. Desenați ceva din nou și din nou. Să încercăm ceva mai complicat: un simulator de particule. Vrem ca niște particule să cadă pe ecran ca zăpada. Pentru aceasta, implementăm algoritmul clasic al simulatorului de particule:

Simulatorul de particule conține o listă de particule cu buclă. În fiecare cadru, poziția tuturor particulelor este actualizată pe baza unei ecuații, dacă este necesar, particulele sunt distruse / create pe baza unor condiții. Apoi particulele sunt desenate. Iată un exemplu simplu de zăpadă.

Mai întâi vom crea baza simulatorului de particule. Aceasta este o funcție buclă care se numește la fiecare 30 ms. Pentru structura de date, avem nevoie de o matrice de particule goale și un contor de ceasuri. La fiecare iterație a buclei, sunt executate patru părți.

Funcția createParticles verifică câte particule avem. Dacă există mai puțin de 100, atunci creează o nouă particulă. Rețineți că verificarea se efectuează numai la fiecare 10 cicluri. Acest lucru vă permite să porniți de pe un ecran gol și apoi să acumulați treptat numărul de particule, decât să creați toate cele 100 de la început. Puteți ajusta parametrii în funcție de efectul dorit. Eu folosesc Math.random () și alte aritmetice pentru a vă asigura că fulgii de zăpadă sunt localizați în diferite locuri și nu arată la fel. Deci zăpada devine mai naturală.

Funcția updateParticles este destul de simplă. Actualizează coordonatele fiecărei particule, adăugând viteză la ea. Acest lucru face ca fulgul de zăpadă să se deplaseze în jos pe ecran.

Aici sunt killParticles. Ea verifică dacă particula este sub marginea inferioară a pânzei. În unele simulatoare, distrugeți particula și scoateți-o din listă. Din moment ce această aplicație prezintă zăpadă continuă, reintroducem particula, readucând-o la 0.

În cele din urmă trageți particulele. Din nou, acest lucru este foarte simplu: curățați fundalul, trageți un cerc cu coordonatele curente, raza și culoarea particulei.

Acum arată așa.

Simulator de particule pentru zăpadă (faceți clic pentru a începe)

Asta îmi place simulatoarele de particule, pentru că puteți crea o animație foarte complexă și ecologică, cu aspect natural, cu matematică destul de simplă, combinată cu o aleatoare mică controlată.

Animarea spritelor

Ce este un sprite?

Ultimul tip principal de animație este animația spritei. Deci, ce este un sprite?

Sprite este o imagine mică pe care o puteți desena rapid pe ecran. De obicei, un sprite este de fapt tăiat dintr-o imagine mare, care se numește foaie sprite sau imagine de bază. O astfel de foaie poate conține mai multe sprites diferite, ca diferite personaje în joc. O foaie de sprite poate conține și un caracter în poziții diferite. În cele din urmă, acest lucru vă oferă diferite cadre de animație. Este un stil clasic de animație: parcurgeți imaginile diferite de mai multe ori.

De ce și când să folosiți spritele?

Spritele sunt bune pentru câteva lucruri.

În primul rând, sprite este o imagine care este probabil trasată mai repede decât vectorii, mai ales cele complexe.
În al doilea rând, spritele sunt extrem de utile atunci când trebuie să desenezi un lucru din nou și din nou. De exemplu, în Space Invaders, aveți o grămadă de gloanțe pe ecran care arată la fel. Este mult mai rapid să încărcați un glonț sprite o dată și să-l trageți din nou și din nou.
În al treilea rând: spritele sunt încărcate rapid și trase ca parte a foii. Acest lucru vă permite să încărcați un singur fișier pentru întregul set de sprite mult mai repede decât mormanul rezultat al imaginilor individuale. Sprites, de regulă, se micsorează și mai bine. În cele din urmă, mai puțină memorie este folosită pentru a stoca o imagine mare decât o grămadă de mici.
În cele din urmă, spritele sunt convenabile pentru a lucra cu animația, deoarece sunt obținute din instrumente de desen cum ar fi Photoshop. Codul doar flips prin imagini și nu-i pasă ce este în imagine. Aceasta înseamnă că artistul dvs. poate actualiza cu ușurință grafica și animația fără a atinge codul.

Desenarea spritelor

Spritele sunt ușor de desenat folosind funcția drawImage. Această funcție poate desena și întinde o parte a imaginii prin specificarea diferitelor coordonate sursă și destinație. De exemplu, să presupunem că avem următoarea foaie de sprite și dorim doar să desenați al cincilea sprite din stânga.

Putem desena doar acest sprite specificând coordonatele sursei:

Animarea spritei

După cum puteți vedea pe foaia completă de sprite, de fapt, acestea sunt cadre diferite ale animației unui obiect, așa că acum ne întoarcem prin diferite sprite pentru a crea o animație. Vom face acest lucru prin monitorizarea cadrului curent cu contorul de ceas.

De fiecare dată când ecranul este actualizat, se calculează cadrul curent al animației care privește la contorul de ceasuri. Funcționarea modulo (%) cu 10 înseamnă reluarea cadrului de la 0 la 9 din nou și din nou. Apoi, coordonata x se calculează în funcție de numărul de cadre. Apoi, imaginea este desenată și cititorul ceasului este actualizat. Desigur, acest lucru se poate întâmpla prea repede, astfel încât să puteți împărți măsurile prin modulul cu 2 sau 3, astfel încât animația să funcționeze mai lent.

Animație la fiecare 10 cadre pentru detalii (faceți clic pentru a lansa)

În capitolul următor, vom crea un joc simplu care demonstrează modul de utilizare a animațiilor de bază, a animațiilor sprite, a evenimentelor de tastatură și a unui simulator de particule simplu pentru explozii.

Articole similare

Pagina anterioară

Pagina următoare