Como criar animações em JavaScript

Para criar animações em JavaScript, podemos usar a API de animação do navegador, que é chamada de Web Animations API. Essa API permite que você crie animações personalizadas com base em objetos DOM, CSS, SVG ou qualquer outro objeto que possa ser animado.

Para começar a usar a Web Animations API, primeiro você precisa criar uma animação. Você pode criar uma animação usando a classe Animation() ou KeyframeEffect(). A classe Animation() é usada para criar uma animação a partir de um objeto KeyframeEffect(), que define as propriedades a serem animadas. A classe KeyframeEffect() é usada para definir as propriedades a serem animadas e o valor inicial e final.

Por exemplo, o seguinte código cria uma animação de transição de opacidade de 0 a 1 em 2 segundos:

// cria um objeto KeyframeEffect() para definir as propriedades a serem animadas
const efeito = new KeyframeEffect(
  document.querySelector('.meu-elemento'), // elemento a ser animado
  [
    { opacity: 0 }, // valor inicial
    { opacity: 1 } // valor final
  ],
  { duration: 2000 } // duração da animação em milissegundos
);

// cria uma animação com base no objeto KeyframeEffect()
const animacao = new Animation(efeito, document.timeline);
animacao.play(); // inicia a animação

Além disso, a Web Animations API também fornece outros métodos para controlar e personalizar a animação, como pause(), resume(), reverse(), setPlaybackRate() e addEventListener() para eventos de animação.

No entanto, é importante lembrar que a Web Animations API ainda é uma tecnologia experimental e nem todos os navegadores suportam todos os recursos da API. Portanto, é recomendável verificar a compatibilidade do navegador antes de usá-la em produção.

Exemplo

Vamos supor que temos uma imagem que queremos mover de um lado para o outro continuamente. Podemos fazer isso usando JavaScript e a propriedade CSS transform.

Primeiro, vamos adicionar uma imagem em nosso HTML:

<img id="myImage" src="caminho/para/imagem.jpg">

Agora, vamos criar um arquivo JavaScript e selecionar o elemento de imagem:

const image = document.querySelector('#myImage');

Em seguida, vamos criar uma função que alterna a posição horizontal da imagem entre 0 e 100 pixels usando a propriedade transform: translateX(). Para isso, usaremos um contador e a função setInterval() para chamar a função de atualização periodicamente:

let position = 0;
function moveImage() {
  image.style.transform = `translateX(${position}px)`;
  position += 5;
  if (position > 100) {
    position = 0;
  }
}
setInterval(moveImage, 50);

Neste exemplo, a função moveImage() é chamada a cada 50 milissegundos para atualizar a posição da imagem. A posição é atualizada em incrementos de 5 pixels a cada chamada, e quando atinge 100 pixels, é reiniciada para 0 para criar um efeito de loop.

Com essas alterações, agora podemos mover nossa imagem de um lado para o outro continuamente!

Deixe um comentário Cancelar resposta