Instrumente de animație html5

Fiecare animație constă dintr-un set de cadre simple. Pentru a afișa un cadru pe panza:

  1. Goliți pânza. Acest lucru se poate face, de exemplu, folosind metoda clearRect ().
  2. Dacă doriți ca starea inițială a pânzei să fie întotdeauna păstrată, chiar dacă schimbați setările de culoare etc. atunci trebuie să salvați starea de pânză.
  3. Desenați obiecte de animație, de fapt, această etapă este crearea unui cadru.
  4. Dacă ați salvat pânza, trebuie să o încărcați înainte de a începe să creați un nou cadru.

Motion animație

Să luăm în considerare un exemplu. Să creăm o animație simplă a mișcării - un dreptunghi în mișcare orizontală. Să creăm funcția animație (). care provoacă recursiv crearea de cadre a mișcării dreptunghiului.







În cadrul funcției animație (), se efectuează următoarea secvență de acțiuni:

  1. Curățarea pânzei.
  2. Desenarea unui pătrat pictat.
  3. Modificați coordonatele colțului din stânga sus al pătratului orizontal, pentru a "compensa" pătratul în pasul următor.
  4. În cazul în care pătratul nostru ajunge la marginea pânzei, valoarea inițială a coordonatei x va reveni la zero.
  5. Recursive animație apel (). utilizând metoda setTimeout.






Creați funcția CreateImage () pentru a afișa această animație:

Animație fără curățarea ecranului

Să luăm în considerare încă un exemplu. În acest caz, nu vom șterge ecranul de fiecare dată când tragem un nou cadru, astfel încât se pare că imaginea va fi "desenată" fără probleme. Acest lucru poate fi folosit în mod deosebit cu succes atunci când creați o grafică de afaceri sau statistică, de exemplu, construim două funcții.

Creați o funcție care va desena fără probleme două grafice în timp real.

Rezultatul este prezentat mai jos:

Animarea spritelor

Pentru a crea animații complexe, precum și jocuri și alte aplicații web bazate pe HTML5, trebuie să creați animații cu ajutorul spritelor. Sprite este un fișier imagine care conține un set de cadre intermediare. Adică, într-o singură imagine este plasată toată storyboarding-ul stărilor de animație sau obiect.

Elementul . așa cum sa menționat deja în articolul precedent, susține lucrul cu imagini externe care pot fi inserate pe panza. Astfel, puteți introduce o imagine sprite și închideți partea inutilă pentru a crea iluzia animației continue.

Ca sursă a animației, vom folosi următorul sprite:

Pentru a scoate cadrele sprite, vom folosi metoda context

Creați o funcție pentru a "reînvia" această sprite:

Aceasta este doar o mică demonstrație a capabilităților HTML5 Canvas. Această tehnologie are o gamă largă de aplicații: de la crearea graficii de afaceri la jocurile de browser de dimensiuni mari și de dimensiuni mari.







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: