¿Qué es la animación de JavaScript?

Animaciones de JavaScript se crean haciendo cambios de programación incrementales en el estilo del elemento. Estas animaciones tienen la capacidad de realizar la tarea que CSS no puede hacer por sí solo. DOM se conoce como modelo de objeto de documento y todo el documento HTML está representado por un objeto de documento. De acuerdo con la ecuación o función lógica, puede mover varios elementos DOM a través de la página usando JavaScript.

En esta publicación, aprenderá sobre los conceptos básicos relacionados con la animación de JavaScript utilizando el ejemplo simple. Entonces, comencemos!

Funciones utilizadas para crear animación de JavaScript

En JavaScript, hay tres funciones se usan comúnmente para crear animación.Estos son:

• setTimeOut (función, duración): El Global SetTimout () La función establece un temporizador que ejecuta una función o pieza de código especificada después de algún retraso o duración.
• ClearTimeOut (setTimeOut_variable): El ClearTimeOut () la función se utiliza para borrar el temporizador establecido por el setTimeout ().
• setInterval (función, duración): El setInterval () La función establece un temporizador que ejecuta repetidamente una función o pieza de código de acuerdo con la duración especificada.

Tomemos un ejemplo simple de crear animación de JavaScript para comprender cómo funciona.

Cómo crear una animación de JavaScript

En este ejemplo, crearemos una página web de animación de JavaScript usando HTML. Para hacerlo, en primer lugar, crearemos un archivo HTML llamado "Animation_JS.html ".

En este archivo HTML, agregaremos un botón con nombre "Mover" y agregue dos contenedores llamados "contenedor" y "javascriptanimación". Por el primero "envase", Estableceremos sus propiedades como altura, ancho, posición, fondo, radioradio y pantalla. Además, estableceremos su "Posición" como "pariente" lo que indica que este contenedor está posicionado normalmente.

Del mismo modo, especificaremos los valores para las propiedades de ancho, altura y color de fondo del "javascriptanimación"Contenedor, mientras establece su "Posición" como "Absoluto". Al hacerlo, este contenedor se colocará en su antepasado más cercano:

A continuación, dentro del etiqueta, definiremos un "animación()" función que se llamará cuando el usuario haga clic en el "Mover" botón. Este "animación()" la función primero obtendrá el "Javascriptanimation" Elemento html. Entonces, asignaremos un "ID" a la función "ClearInterval ()", que invoca el Función "Frame ()" después de "5" milisegundos.

En el Función "Frame ()", El número de cuadros se establecerá por segundo. Si la posición del elemento alcanza 305px, entonces el "ClearInterval ()" la función lo borra de lo contrario el HTML recuperado "Javascriptanimation" El elemento se mueve superior y se mueve de acuerdo con el Valor de "posición":

Aquí está el fragmento del código de script:

La ejecución del programa JavaScript anterior mostrará el siguiente resultado:

Luego haga clic en "MoverBotón para ver la animación de JavaScript creada:

Esa fue toda la información esencial relacionada con la animación de JavaScript. Puede explorar más a fondo según sea necesario.

Conclusión

La animación se conoce como simulación de movimiento realizada por la serie de imágenes. Las animaciones de JavaScript se crean haciendo pequeñas modificaciones de programación al estilo de un elemento. En JavaScript, puede crear animaciones utilizando las tres funciones más utilizadas nombradas setTimeOut (), setInterval () y ClearTimeOut (). En esta publicación, hemos discutido la animación de JavaScript y sus funciones relacionadas con la ayuda de un ejemplo simple.