O que é animação JavaScript

Animações JavaScript são criados fazendo mudanças incrementais de programação no estilo do elemento. Essas animações têm a capacidade de executar a tarefa que o CSS não pode fazer por conta própria. DOM é conhecido como modelo de objeto de documento e todo o documento HTML é representado por um objeto de documento. De acordo com a equação ou função lógica, você pode mover vários elementos DOM em toda a página usando JavaScript.

Neste post, você aprenderá sobre o básico relacionado à animação JavaScript, utilizando o exemplo simples. Então vamos começar!

Funções usadas para criar animação JavaScript

Em JavaScript, existem três funções geralmente usadas para criar animação.Estes são:

• setTimeout (função, duração): O global setTimeout () função define um cronômetro que executa uma função ou peça de código especificada após algum atraso ou duração.
• ClearTimeout (setTimeout_Variable): O ClearTimeout () A função é usada para limpar o timer que foi definido pelo setTimeout ().
• setInterval (função, duração): O setInterval () A função define um timer que executa repetidamente uma função ou peça de código de acordo com a duração especificada.

Vamos dar um exemplo simples de criação de animação JavaScript para entender como funciona.

Como criar uma animação JavaScript

Neste exemplo, criaremos uma página da web de animação JavaScript usando HTML. Para fazer isso, antes de tudo, criaremos um arquivo html nomeado “Animation_JS.html ”.

Neste arquivo html, adicionaremos um botão chamado "Mover" e adicione dois recipientes chamados "contêiner" e "javascriptanimation”. Pela primeira vez "recipiente”, Definiremos suas propriedades como altura, largura, posição, fundo, radio de fronteira e exibição. Além disso, vamos definir seu "Posição" como "parente" o que indica que este contêiner está posicionado normalmente.

Da mesma forma, especificaremos os valores para as propriedades de largura, altura e cor de fundo do “javascriptanimation”Contêiner, enquanto define seu "Posição" como "absoluto". Ao fazer isso, este contêiner será posicionado para seu ancestral mais próximo:

Em seguida, dentro do marcação, Vamos definir um "animação()" função que será chamada quando o usuário clicar no "Mover" botão. Esse "animação()" função primeiro buscará o “JavaScriptanimation” Elemento HTML. Então, vamos atribuir um "ID" para a função "ClearInterval ()", que chama o "Frame ()" função após "5" milissegundos.

No Função “Frame ()”, O número de quadros será definido por segundo. Se a posição do elemento chegar 305px, então o “ClearInterval ()” função limpa de outra forma o html buscado “JavaScriptanimation” o elemento vai se mover no topo e se mover de acordo com o Valor da “posição”:

Aqui está o trecho do código do script:

A execução do programa JavaScript acima mencionado mostrará a seguinte saída:

Em seguida, clique em "Mover”Botão para visualizar a animação JavaScript criada:

Tudo isso foi informações essenciais relacionadas à animação JavaScript. Você pode explorar ainda mais conforme necessário.

Conclusão

A animação é conhecida como simulação de movimento feito pela série de imagens. As animações JavaScript são criadas fazendo pequenas modificações de programação no estilo de um elemento. No JavaScript, você pode criar animações usando as três funções mais usadas nomeadas setTimeout (), setInterval () e ClearTimeout (). Neste post, discutimos a animação JavaScript e suas funções relacionadas com a ajuda de um exemplo simples.