Probabil cea mai mare limitare este că atunci când o figură este trasată, ea nu mai poate fi mutată. Pentru a ilustra mișcarea, trebuie să redesemnăm forma și tot ceea ce a fost tras înaintea ei. Redarea cadrelor complexe durează mult timp, iar performanța depinde în mare măsură de viteza computerului pe care rulează.
Următoarele etape sunt necesare pentru a desena un cadru:
- Panza clară
Dacă figura pe care o veți desena nu ocupă întreaga pânză (de exemplu, fundalul, de exemplu), atunci tot ce a fost desenat înainte trebuie șters. Cel mai simplu mod de a face acest lucru este cu metoda clearRect (). - Salvați starea inițială a pânzei
Dacă modificați orice setări (cum ar fi stiluri, de transformare, etc.), care afectează starea de pânză, și doriți să vă asigurați că starea inițială este utilizată de fiecare dată când cadru a fost pronunțată, trebuie să-l salvați la starea inițială. - Desenați forme animate
Pas pe care trageți de fapt un cadru. - Recuperați starea canvasului
Dacă ați salvat starea, restabiliți-o înainte de a desena un nou cadru.
Gestionați animația
Cifrele sunt desenate pe panza fie direct - folosind metode de panza, fie prin utilizarea unor funcții terțe. Într-o situație normală, rezultatul va fi vizibil pe panza după terminarea scenariului. De exemplu, bucla pentru nu poate fi utilizată pentru animație.
Aceasta înseamnă că aveți nevoie de o modalitate de a efectua funcțiile de randare la intervale. Există două moduri de a gestiona această animație.
Actualizări programate
Prima este funcția window.setInterval (). window.setTimeout (). și window.requestAnimationFrame (). care pot fi folosite pentru a apela o funcție, după o anumită perioadă de timp.
setInterval (funcția, întârziere) Începe periodic pentru a executa funcția funcțională în fiecare milisecundă de întârziere. setTimeout (funcție, întârziere) Execută funcția specificată de funcție în milisecunde întârziere. requestAnimationFrame (apel invers) spune browser-ului pe care doriți să efectuați o animație și solicită ca browser-ul apela o funcție specifică pentru a actualiza o animație înainte de următoarea revopsiti.
Dacă nu doriți nicio interacțiune cu utilizatorul, puteți utiliza funcția setInterval () care execută în mod repetat codul furnizat. Dacă vrem să facem un joc, am putea folosi evenimente de la tastatură sau mouse pentru a controla animația și a folosi setTimeout (). Prin setarea EventListener s, prinde orice interacțiune cu utilizatorul și execută funcțiile de animație.
Un sistem solar animat
Acest exemplu animă un mic model al sistemului nostru solar.
Articole similare
-
Script animație atunci când derulați pagina - blog revived (creier)
-
Ajungeți la oase și creați personaje de animație pentru jocuri
Trimiteți-le prietenilor: