Cos'è JavaScript Animation

Animazioni JavaScript sono creati apportando cambiamenti di programmazione incrementale nello stile dell'elemento. Queste animazioni hanno la capacità di eseguire il compito che CSS non può fare da solo. DOM è noto come modello di oggetti documenti e l'intero documento HTML è rappresentato da un oggetto documento. Secondo l'equazione o la funzione logica, è possibile spostare diversi elementi DOM attraverso la pagina usando JavaScript.

In questo post, imparerai le basi relative all'animazione JavaScript utilizzando il semplice esempio. Quindi iniziamo!

Funzioni utilizzate per la creazione di animazione JavaScript

In JavaScript, ci sono tre funzioni comunemente usate per la creazione di animazioni.Questi sono:

• setTimeout (funzione, durata): IL Global setTimeout () La funzione imposta un timer che esegue una funzione o un pezzo di codice specificato dopo un certo ritardo o durata.
• ClearTimeout (setTimeout_variable): IL Cleartimeout () La funzione viene utilizzata per cancellare il timer che è stato impostato da setTimeout ().
• setInterval (funzione, durata): IL setInterval () La funzione imposta un timer che esegue ripetutamente una funzione o un pezzo di codice in base alla durata specificata.

Facciamo un semplice esempio di creazione di animazioni JavaScript per capire come funziona.

Come creare un'animazione JavaScript

In questo esempio, creeremo una pagina Web di animazione JavaScript utilizzando HTML. Per fare ciò, prima di tutto, creeremo un file HTML chiamato “Animation_js.HTML ".

In questo file HTML, aggiungeremo un pulsante chiamato "Mossa" e aggiungi due contenitori chiamati "contenitore" e "JavaScriptAnimation". Per la prima "contenitore", Imposteremo le sue proprietà come altezza, larghezza, posizione, background, radius di bordo e display. Inoltre, imposteremo il suo "Posizione" come "relativo" che indica che questo contenitore è posizionato normalmente.

Allo stesso modo, specificheremo i valori per le proprietà di larghezza, altezza e colore di fondo della "JavaScriptAnimation"Container, mentre imposta il suo "Posizione" come "assoluto". In tal modo, questo contenitore sarà posizionato al suo antenato più vicino:

Successivamente, all'interno del etichetta, definiremo un "animazione()" funzione che verrà chiamata quando l'utente fa clic sul "Mossa" pulsante. Questo "animazione()" La funzione prenderà prima il file "JavaScriptAnimation" Elemento html. Quindi, assegneremo un "ID" alla funzione "clearInterval ()", che invoca il Funzione "frame ()" dopo "5" millisecondi.

Nel Funzione "frame ()", Il numero di frame verrà impostato al secondo. Se la posizione dell'elemento raggiunge 305px, poi il "ClearInterval ()" La funzione lo cancella altrimenti l'HTML recuperato "JavaScriptAnimation" L'elemento si muove in cima e si muove secondo il Valore "posizione":

Ecco lo snippet del codice di script:

L'esecuzione del programma JavaScript di cui sopra mostrerà il seguente output:

Quindi fare clic su "Mossa"Pulsante per visualizzare l'animazione JavaScript creata:

Queste erano tutte informazioni essenziali relative all'animazione JavaScript. Puoi esplorare ulteriormente come richiesto.

Conclusione

L'animazione è nota come simulazione del movimento realizzato dalla serie di immagini. Le animazioni JavaScript vengono create apportando piccole modifiche di programmazione allo stile di un elemento. In JavaScript, è possibile creare animazioni utilizzando le tre funzioni più comunemente usate denominate setTimeout (), setInterval () e clearTimeout (). In questo post, abbiamo discusso dell'animazione JavaScript e delle sue funzioni correlate con l'aiuto di un semplice esempio.