Qu'est-ce que l'animation JavaScript

Animations JavaScript sont créés en effectuant des changements de programmation incrémentiels dans le style de l'élément. Ces animations ont la capacité d'effectuer la tâche que CSS ne peut pas faire seule. Dom est connu sous le nom de modèle d'objet de document et l'ensemble du document HTML est représenté par un objet de document. Selon l'équation ou la fonction logique, vous pouvez déplacer plusieurs éléments DOM à travers la page à l'aide de JavaScript.

Dans cet article, vous découvrirez les bases liées à l'animation JavaScript en utilisant l'exemple simple. Alors, commençons!

Fonctions utilisées pour créer une animation JavaScript

En JavaScript, il existe trois fonctions couramment utilisées pour créer une animation.Ceux-ci sont:

• setTimeout (fonction, durée): Le Global setTimeout () La fonction définit une minuterie qui exécute une fonction ou un morceau de code spécifié après un certain retard ou une durée.
• ClearTimeout (setTimeout_variable): Le ClearTimeout () La fonction est utilisée pour effacer la minuterie qui a été définie par le setTimeout ().
• setInterval (fonction, durée): Le setInterval () La fonction définit une minuterie qui exécute à plusieurs reprises une fonction ou un morceau de code selon la durée spécifiée.

Prenons un exemple simple de création d'animation JavaScript pour comprendre comment cela fonctionne.

Comment créer une animation javascript

Dans cet exemple, nous créerons une page Web d'animation JavaScript à l'aide de HTML. Pour ce faire, tout d'abord, nous créerons un fichier HTML nommé «Animation_js.html ”.

Dans ce fichier html, nous ajouterons un bouton nommé "Déplacer" et ajouter deux conteneurs nommés «conteneur» et «Javascriptanimation". Pour le premier "récipient», Nous allons définir ses propriétés telles que la hauteur, la largeur, la position, l'arrière-plan, le rayon de la frontière et l'affichage. De plus, nous allons définir son «Position» comme «parent» ce qui indique que ce conteneur est positionné normalement.

De même, nous spécifierons les valeurs des propriétés de largeur, de hauteur et de couleur d'arrière-plan du «Javascriptanimation»Conteneur, tout en définissant son «Position» comme «absolu». Ce faisant, ce conteneur sera positionné sur son ancêtre le plus proche:

Ensuite, à l'intérieur du étiqueter, Nous définirons un "animation()" fonction qui sera appelée lorsque l'utilisateur clique sur le "Déplacer" bouton. Ce "animation()" La fonction va d'abord récupérer le «Javascriptanimation» Élément html. Ensuite, nous attribuerons un «Id» à la fonction "ClearInterval ()", qui invoque le Fonction «frame ()» après «5» millisecondes.

Dans le Fonction «frame ()», Le nombre de trames sera réglé par seconde. Si la position de l'élément atteint 305px, puis le "ClearInterval ()" La fonction l'effacement sinon le HTML récupéré «Javascriptanimation» l'élément se déplace en haut et se déplace en fonction du Valeur «position»:

Voici l'extrait du code de script:

L'exécution du programme JavaScript ci-dessus affichera la sortie suivante:

Puis cliquez sur "Déplacer”Bouton pour afficher l'animation JavaScript créée:

C'était toutes des informations essentielles liées à l'animation JavaScript. Vous pouvez explorer davantage au besoin.

Conclusion

L'animation est connue sous le nom de simulation du mouvement réalisé par la série d'images. Les animations JavaScript sont créées en apportant de petites modifications de programmation au style d'un élément. Dans JavaScript, vous pouvez créer des animations en utilisant les trois fonctions les plus couramment utilisées nommées setTimeout (), setInterval () et cleartimeout (). Dans cet article, nous avons discuté de l'animation JavaScript et de ses fonctions connexes à l'aide d'un exemple simple.