Hvordan lage animasjon med HTML5-lerretet-taggen

2024

Selv om HTML5-lerretet ikke kan erstatte Flash som en mekanisme for implementering av spill og animasjoner i nettleseren, er det rimelig enkelt å legge til animasjon til et lerretbilde. Nøkkelen er å bruke animasjonsfunksjonene som allerede er innebygd i nettleseren.

Grunnleggende struktur for animasjonsløkken i HTML5 lerret

En animasjon krever vanligvis en spesiell organisasjon kalt en animasjonsløkke. Den grunnleggende strukturen til animasjonssløyfen fungerer på alle språk:

1. initialisering.

   Lag eiendommene, inkludert bakgrunnen og noen av objektene du skal bruke. Objekter som vil bli manipulert i sanntid kalles vanligvis sprites . Generelt gjøres dette når programmet først kjører, for å spare tid under hovedkjøpet. Du kan også angi konstanter for bildestørrelse, skjermstørrelse, bildefrekvens og andre verdier som ikke vil endres under utførelsen av spillet.

2. Bestem en bildefrekvens.

   Animasjoner og spill arbeid ved å ringe en funksjon gjentatte ganger på en foreskrevet rate. I JavaScript bruker du vanligvis setInterval () -funksjonen til å angi en gjentatt funksjon. bildefrekvens angir hvor ofte den angitte funksjonen vil bli kalt. Spill og animasjoner kjøres vanligvis med bildefrekvenser mellom 10 og 30 bilder per sekund. En raskere bildefrekvens er jevnere, men kan ikke vedlikeholdes med noe maskinvare.

3. Evaluer gjeldende tilstand.

   Hver sprite er virkelig et dataelement. Under hver ramme, avgjøre om noe viktig har skjedd: Ble brukeren trykket på en tast? Er et element ment å flytte? Har en sprite forlatt skjermen? Gikk to sprites inn i hverandre?

4. Endre sprite data.

   Hver sprite har generelt posisjon eller rotasjonsdata som kan endres under hver ramme. Vanligvis gjøres dette gjennom transformasjoner (oversettelse, rotasjon og skala), men noen ganger kan du bytte mellom bilder i stedet.

5. Tøm bakgrunnen.

   En animasjon er virkelig en serie bilder tegnet raskt på samme sted. Vanligvis må du slette bakgrunnen i begynnelsen av hver ramme for å fjerne det siste bildetes bilde.

6. Redraw alle sprites.

   Hver sprite blir revidert ved å bruke de nye dataene. De sprites synes å bevege seg fordi de er trukket på en ny plassering eller orientering.

Opprette konstanter av en animasjonsfunksjon i HTML5 lerret

Bygg et program som roterer et bilde inne i et lerret, krever flere grupper kode. Den første jobben er å sette opp de forskjellige variablene og konstantene som beskriver problemet.Følgende kode er opprettet utenfor noen funksjoner fordi den beskriver verdier som deles mellom funksjoner:

var tegning; var con; var goofyPic; varvinkel = 0; CANV_HEIGHT = 200; CANV_WIDTH = 200; SPR_HEIGHT = 50; SPR_WIDTH = 40;

Tegningsvariabelen vil referere til lerretselementet. Con-variabelen vil være tegningskonteksten, goofyPic er bildet som skal roteres, og vinkelen brukes til å bestemme hvor mye bildet for tiden roteres. De andre verdiene er konstanter som brukes til å beskrive lerretets høyde og bredde, så vel som sprite.

Utplassering av animasjonen i HTML5 lerret

Bruk body onload-mekanismen til å starte opp noen kode så snart siden er fullført. Siden har imidlertid to funksjoner. Init () -funksjonen håndterer initialisering, og tegnet () -funksjonen kalles gjentatte ganger for å håndtere den aktuelle animasjonen. Her er koden i init () -funksjonen:

funksjon init () {drawing = document. getElementById ("drawing"); con = tegning. getContext ("2D"); goofyPic = dokument. getElementById ("goofyPic"); setInterval (draw, 100);} // end init

Jobben til init () -funksjonen er å initialisere ting. I dette spesielle eksempelet lastes ulike elementer (lerretet, konteksten og bildet) inn i JavaScript-variabler, og animasjonen er satt opp. SetInterval () -funksjonen brukes til å konfigurere hoved animasjonssløyfen. Det krever to parametere:

• En repeterbar funksjon: Den første parameteren er navnet på en funksjon som skal kalles gjentatte ganger. I dette tilfellet kalles tegnefunksjonen mange ganger.

• En forsinkelsesverdi: Den andre parameteren angir hvor ofte funksjonen skal kalles i millisekunder (1/1000 sekund). En forsinkelse på 100 vil skape en bildefrekvens på 10 bilder per sekund. En forsinkelse på 50 vil føre til en bildefrekvens på 20 bilder per sekund, og så videre.

Gir animasjon til gjeldende ramme i HTML5 lerret

Tegnet () -funksjonen vil bli kalt mange ganger i rekkefølge. Generelt er oppgaven å rydde rammen, beregne nye sprite-tilstander, og redraw sprite. Her er koden:

funksjonstegn () {// klare bakgrunnsbilde. fillStyle = "white"; lure. fillRect (0, 0, CANV_HEIGHT, CANV_WIDTH); // tegne grense con. strokeStyle = "rød"; lure. lineWidth = "5"; lure. strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT); // endre rotasjonsvinkelvinkelen + =. 25; hvis (vinkel> Math. PI * 2) {vinkel = 0;} // start et nytt transformasjonssystem con. lagre(); lure. oversette (100, 100); lure. rotere (vinkel); // tegne bildet con. drawImage (goofyPic, SPR_WIDTH / -2, SPR_HEIGHT / -2, SPR_WIDTH, SPR_HEIGHT); lure. gjenopprett ();} // ende tegning

Selv om koden kan virke litt involvert, gjør det egentlig ikke noe nytt:

1. Ryd bakgrunnen.

   Husk at animasjon gjentas tegning. Hvis du ikke tømmer bakgrunnen i begynnelsen av hver ramme, ser du de forrige rammekartene. Bruk kontekstens clearRect () -funksjon til å tegne en ny bakgrunn, eller et av de andre tegneverktøyene for å bruke et mer komplekst bakgrunnsbilde.

2. Tegn noe uspritt innhold.

   Du kan for eksempel bruke strokeStyle, lineWidth og strokeRect () for å bygge en rød rektangulær ramme rundt lerretet. Merk at CANV_HEIGHT og CANV_WIDTH-konstantene refererer til gjeldende lerretstørrelse.

3. Endre sprite-tilstanden.

   For å endre rotasjonsvinkelen til bildet i eksemplet, ble den variabel som kalles vinkel, opprettet utenfor funksjonen. (Det er viktig at vinkelen ble opprettet utenfor funksjonskonteksten slik at den kan beholde verdien mellom samtaler til funksjonen.) Du kan da legge til en liten mengde for å vinkle hver ramme.

   Når du endrer en variabel (spesielt i en nesten uendelig sløyfe som en animasjon), bør du sjekke om grensevilkårene. Den største tillatte vinkelverdien (i radianer) er to ganger pi. Hvis vinkelen blir større enn den, nullstilles den til null.

4. Bygg en transformasjon. Sett opp en ny transformasjon med save () -metoden, og bruk funksjonene rotate () og translate () til å transformere et midlertidig koordinatsystem.

   Mange animasjoner er virkelig modifikasjoner av en transformasjon. Bildet endres ikke, bare transformasjonen som inneholder bildet.

5. Tegn bildet i midten av den nye transformasjonen.

   Tegnet drawImage () trekker bildet basert på det øverste venstre hjørnet av et bilde. Hvis du tegner bildet på (0, 0) av den nye transformasjonen, ser bildet ut til å rotere rundt sitt øverste venstre hjørne. Vanligvis vil du ha et bilde som skal rotere rundt midtpunktet. Bare tegne bildet slik at senteret er ved opprinnelsen. Sett X til null minus halvparten av bildens bredde, og Y til null minus halvparten av bildeets høyde.

6. Lukk transformasjonen. Bruk metoden restore () til å fullføre definisjonen av det midlertidige koordinatsystemet.