Hva er JavaScript -animasjon

JavaScript -animasjoner opprettes ved å gjøre trinnvise programmeringsendringer i elementets stil. Disse animasjonene har muligheten til å utføre oppgaven som CSS ikke kan gjøre på egen hånd. DOM er kjent som dokumentobjektmodell og hele HTML -dokumentet er representert av et dokumentobjekt. I henhold til den logiske ligningen eller funksjonen, kan du flytte flere DOM -elementer over siden ved hjelp av JavaScript.

I dette innlegget vil du lære om det grunnleggende relatert til JavaScript -animasjon som bruker det enkle eksemplet. Så la oss starte!

Funksjoner som brukes til å lage JavaScript -animasjon

I JavaScript er det tre funksjoner ofte brukt for å lage animasjon.Disse er:

• setTimeout (funksjon, varighet): Global Settimeout () Funksjon angir en tidtaker som utfører en funksjon eller spesifisert kode etter litt forsinkelse eller varighet.
• ClearTimeout (setTimeout_variable): ClearTimeout () funksjon brukes til å fjerne tidtakeren som er satt av setTimeout ().
• setInterval (funksjon, varighet): setInterval () Funksjon angir en tidtaker som gjentatte ganger utfører en funksjon eller kode i henhold til den angitte varigheten.

La oss ta et enkelt eksempel på å lage JavaScript -animasjon for å forstå hvordan det fungerer.

Hvordan lage en JavaScript -animasjon

I dette eksemplet vil vi opprette en JavaScript -animasjonsside ved hjelp av HTML. For å gjøre det, først av alt, oppretter vi en HTML -fil som heter “Animasjon_js.html ”.

I denne HTML -filen vil vi legge til en knapp som heter "Bevege seg" og legg til to containere som heter “Container” og “JavaScriptanimation”. Først og fremst "container”, Vi vil sette dens egenskaper som høyde, bredde, posisjon, bakgrunn, grense-radius og display. Dessuten vil vi sette sin “Posisjon” som “relativ” som indikerer at denne beholderen er plassert normalt.

Tilsvarende vil vi spesifisere verdiene for bredde, høyde og bakgrunnsfargede egenskaper til "JavaScriptanimation”Container, mens du setter sin “Posisjon” som “absolutt”. Ved å gjøre det, vil denne beholderen bli plassert til sin nærmeste stamfar:

Neste, inne i stikkord, Vi vil definere en “Animasjon ()” funksjon som vil bli kalt når brukeren klikker på "Bevege seg" knapp. Dette “Animasjon ()” funksjonen vil først hente “JavaScriptanimation” HTML -element. Deretter vil vi tildele en “ID” til "ClearInterval ()" -funksjonen, som påkaller “Frame ()” -funksjon etter “5” millisekunder.

I “Frame ()” -funksjon, Antall rammer vil bli satt per sekund. Hvis elementets plassering når 305px, og så “ClearInterval ()” Funksjonen fjerner det ellers den hentede HTML “JavaScriptanimation” elementet vil bevege seg topp og beveger seg i henhold til “Posisjon” -verdi:

Her er utdraget til skriptkoden:

Utførelse av det ovennevnte JavaScript-programmet vil vise følgende utgang:

Klikk deretter på "Bevege seg”-Knappen for å se den opprettede JavaScript -animasjonen:

Det var all viktig informasjon relatert til JavaScript -animasjon. Du kan videre utforske etter behov.

Konklusjon

Animasjon er kjent som simulering av bevegelse laget av bilder med bilder. JavaScript -animasjoner er opprettet ved å gjøre små programmeringsmodifikasjoner til stilen til et element. I JavaScript kan du lage animasjoner ved å bruke de tre mest brukte funksjonene som heter setTimeout (), setInterval () og clearTimeout (). I dette innlegget har vi diskutert JavaScript -animasjon og dets relaterte funksjoner ved hjelp av et enkelt eksempel.