Anime.js é uma biblioteca de animação leve baseada em JavaScript. Você pode usá-lo para animar diferentes propriedades CSS, atributos SVG ou DOM em uma página da web. A biblioteca permite que você controle todos os aspectos da animação e oferece várias maneiras de especificar os elementos que deseja direcionar ou as propriedades que deseja animar.

Você tem controle total sobre a sequência em que as animações são reproduzidas ou como as animações de diferentes elementos são sincronizadas entre si. A biblioteca suporta todos os navegadores modernos, incluindo IE10+.

Nesta série de tutoriais, você aprenderá sobre todos os recursos do Anime.js para que possa usá-los em projetos da vida real com facilidade.

Antes de nos aprofundarmos no tópico, vamos instalar a biblioteca primeiro. Você pode usar npm ou Bower para realizar a instalação executando os seguintes comandos:

npm install animejs

bower install animejs

Você também pode baixar a biblioteca e incluí-la em seu projeto ou vincular diretamente à versão mais recente da biblioteca hospedada em um CDN.

Após uma instalação bem-sucedida, você está pronto para usar esta biblioteca para adicionar animações interessantes aos seus elementos. Começaremos com o básico da biblioteca, focando em uma área específica de cada vez.

Especificando elementos de destino

Para criar qualquer animação usando Anime.js, você terá que chamar o anime() e passe um objeto com pares de chave-valor que especificam os elementos de destino e as propriedades que você deseja animar, entre outras coisas. Você pode usar o targets key para informar ao Anime.js quais elementos você deseja animar. Esta chave pode aceitar valores em diferentes formatos.

Seletores CSS

Você pode passar um ou mais seletores CSS como um valor para o targets chave.

var blue = anime({
  targets: '.blue',
  translateY: 200
});

var redBlue = anime({
  targets: '.red, .blue',
  translateY: 200
});

var even = anime({
  targets: '.square:nth-child(even)',
  translateY: 200
});

var notRed = anime({
  targets: '.square:not(.red)',
  translateY: 200
});

No primeiro caso, o Anime.js animará todos os elementos com um blue classe. No segundo caso, o Anime.js animará todos os elementos com o red ou blue classe. No terceiro caso, o Anime.js animará todos os filhos pares com um square classe. No último caso, o Anime.js animará todos os elementos com um square turma que não tem red classe.

Nó DOM ou NodeList

Você também pode usar um nó DOM ou um NodeList como um valor para o targets chave. Aqui estão alguns exemplos de configuração do targets como um nó DOM.

var special = anime({
  targets: document.getElementById('special'),
  translateY: 200
});

var blue = anime({
  targets: document.querySelector('.blue'),
  translateY: 200
});

var redBlue = anime({
  targets: document.querySelectorAll('.red, .blue'),
  translateY: 200
});

var even = anime({
  targets: document.querySelectorAll('.square:nth-child(even)'),
  translateY: 200
});

var notRed = anime({
  targets: document.querySelectorAll('.square:not(.red)'),
  translateY: 200
});

No primeiro caso, usei o getElementById() função para obter nosso elemento especial. o querySelector() A função é usada para obter o primeiro elemento que possui a classe azul. o querySelectorAll() A função é usada para obter todos os elementos dentro do documento que correspondem ao grupo especificado de seletores.

Existem muitas outras funções que você pode usar para selecionar os elementos de destino que deseja animar. Por exemplo, você pode obter todos os elementos com um determinado nome de classe usando o getElementsByClassName() função. Da mesma forma, você também pode obter todos os elementos com um determinado nome de tag usando o getElementsByTagName() função.

Qualquer função que retorne um nó DOM ou um NodeList pode ser usada para definir o valor do targets chave em Anime.js.

Objeto

Você também pode usar um objeto JavaScript como um valor para o targets chave. A chave desse objeto é usada como identificador e o valor é usado como um número que precisa ser animado.

Você pode então mostrar a animação dentro de outro elemento HTML com a ajuda de JavaScript adicional. Aqui está o código para animar os valores de duas chaves diferentes de um objeto.

var filesScanned = { count: 0, infected: 0 };

var scanning = anime({
  targets: filesScanned,
  count: 1000,
  infected: 8,
  round: 1,
  update: function() {
    var scanCount = document.querySelector('.scan-count');
    scanCount.innerHTML = filesScanned.count;
    
    var infectedCount = document.querySelector('.infected-count');
    infectedCount.innerHTML = filesScanned.infected;
  }
});

O código acima animará a contagem de arquivos verificados de 0 a 1.000 e a contagem de arquivos infectados de 0 a 8. Lembre-se de que você só pode animar valores numéricos dessa maneira. Tentar animar uma chave de ‘AAA’ para ‘BOY’ resultará em um erro.

Também usamos uma função de retorno de chamada para o update chave que é chamada em cada quadro enquanto a animação está sendo executada. Nós o usamos aqui para atualizar a contagem de arquivos verificados e infectados. No entanto, você pode dar um passo adiante e mostrar aos usuários uma mensagem de erro quando o número de arquivos infectados ultrapassar um determinado limite.

Variedade

A capacidade de especificar uma matriz JavaScript como destino é útil quando você precisa animar vários elementos que se enquadram em diferentes categorias. Por exemplo, se você deseja animar um nó DOM, um objeto e vários outros elementos baseados em seletores CSS, você pode fazer isso facilmente colocando todos eles dentro de um array e especificando esse array como um valor para o targets chave. O exemplo a seguir deve deixar isso mais claro:

var multipleAnimations = anime({
  targets: [document.querySelectorAll('.blue'), '.red, #special'],
  translateY: 250
});

Propriedades que podem ser animadas em Anime.js

Agora que você sabe como especificar os diferentes elementos que deseja animar, é hora de conhecer todas as propriedades e atributos que podem ser animados usando a biblioteca.

Propriedades CSS

O Anime.js permite animar muitas propriedades CSS, como largura, altura e cor, para diferentes elementos de destino. Os valores finais de diferentes propriedades animáveis ​​como background-color e border-width são especificados usando uma versão camel case dessa propriedade. Portanto, a cor de fundo torna-se backgroundColore a largura da borda se torna borderWidth. O snippet de código a seguir mostra como animar a posição esquerda e a cor de fundo de um elemento de destino em Anime.js.

var animateLeft = anime({
  targets: '.square',
  left: '50%'
});

var animateBackground = anime({
  targets: '.square',
  backgroundColor: '#f96'
});

As propriedades podem aceitar todos os tipos de valores que teriam aceitado quando usadas em CSS regular. Por exemplo, a propriedade left poderia ser definido para 50vh, 500pxou 25em. Você também pode especificar o valor como um número simples. Nesse caso, o número seria convertido em um valor de pixel. Da mesma forma, a cor de fundo pode ser especificada como um valor de cor hexadecimal, RGB ou HSL.

Transformações CSS

Você também pode animar diferentes propriedades de transformação CSS usando Anime.js. A translação ao longo dos eixos x e y pode ser obtida usando o translateX e translateY propriedades. Da mesma forma, é possível dimensionar, inclinar ou girar um elemento ao longo de um eixo específico usando o scale, skew e rotate propriedade correspondente a esse eixo específico.

Você pode especificar diferentes ângulos em termos ou graus ou em termos de turn. O valor de 1 volta é igual a 360°. Isso pode facilitar o cálculo quando você sabe o quanto deseja girar os elementos em termos de rotações completas. O exemplo a seguir mostra como animar o dimensionamento, a translação ou a rotação de um elemento individualmente ou de uma só vez.

var animateScaling = anime({
  targets: '.square',
  scale: 0.8
});

var animateTranslation = anime({
  targets: '.square',
  translateX: window.innerWidth*0.8
});

var animateRotation = anime({
  targets: '.square',
  rotate: '1turn'
});

var animateAll = anime({
  targets: '.square',
  scale: 0.8,
  translateX: window.innerWidth*0.8,
  rotate: '1turn'
});

Atributos SVG

É possível animar atributos de diferentes elementos SVG usando Anime.js. A única condição é que o valor desses atributos seja numérico. Essa capacidade de animar diferentes atributos abre a possibilidade de criar alguns efeitos muito legais. Já que você está apenas começando a aprender sobre Anime.js, vamos manter os exemplos neste tutorial bem básicos.

À medida que avançamos, você aprenderá a criar animações mais complexas. Aqui está o código para animar o cx, cy e stroke-width atributos de um círculo. Assim como as propriedades CSS, você precisa usar uma versão camel case de stroke-width para que o código funcione.

var animateX = anime({
  targets: '.circle',
  cx: window.innerWidth*0.6
});

var animateStrokeWidth = anime({
  targets: '.circle',
  strokeWidth: '25'
});

Atributos DOM

Você também pode animar atributos DOM numéricos da mesma forma que animou os atributos SVG. Uma situação em que animar um atributo DOM pode ser útil é o elemento de progresso HTML5. Este elemento tem dois atributos, value e max. Em nosso exemplo, estaremos animando o atributo value para mostrar o andamento do nosso processo de transferência de arquivos. Aqui está o código para animar o value atributo.

var animateProgress = anime({
  targets: 'progress',
  value: 100,
  easing: 'linear'
});

Seleção de Elemento Dinâmico

Agora aprendemos como usar diferentes tipos de seletores para direcionar grupos específicos de elementos para animação. Também sabemos como especificar o valor de diferentes propriedades CSS que queremos animar.

Vamos usar esse conhecimento para mostrar uma saudação aos nossos visitantes, onde cada palavra da saudação desaparece e cai do topo. Como queremos animar cada palavra separadamente, teremos que colocar cada palavra dentro de seu próprio wrapper span Tag. Fizemos isso até agora criando manualmente um wrapper dentro do HTML. Agora, vamos aprender como deixar o JavaScript cuidar da marcação. Aqui está o nosso elemento de cabeçalho:

Have a Great Day Ahead

Há cinco palavras separadas no título e vamos envolver cada uma delas em seu próprio span Tag. Podemos fazer isso com o seguinte JavaScript:

var greeting = document.querySelector('h1');
greeting.innerHTML = greeting.textContent.replace(/(w+)/g, "$&");

Basicamente, estamos usando Regex para identificar palavras diferentes e, em seguida, agrupar a seleção dentro span Tag. O resultado final é então atribuído ao innerHTML do elemento de título.

O título será inicialmente invisível e desaparecerá ao cair. Isso significa que a opacidade inicial de cada span tag deve ser zero. Aqui está o CSS que usamos para estilizar nosso título e span Tag.

h1 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 8rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  color: white;
}

h1 span {
  opacity: 0;
}

Este é o JavaScript que usamos para animar as palavras:

anime({
  targets: 'h1 span',
  opacity: 1,
  translateY: 100,
  delay: anime.stagger(1000)
});

Nós direcionamos as palavras usando h1 span como nosso seletor. O valor final de opacity é definida como 1 e cada elemento se move para baixo em 100px da posição inicial devido ao translateY propriedade. Também usamos atrasos escalonados em nossa inicialização de animação. Você aprenderá mais sobre o escalonamento no Anime.js no próximo tutorial da série.

Aqui está uma demonstração do CodePen que mostra a animação de saudação que acabamos de criar. Clique no Cumprimente-me botão para reiniciar a animação.

Pensamentos finais

Neste tutorial, você aprendeu sobre todas as formas de selecionar elementos de destino no Anime.js e como animar diferentes propriedades e atributos CSS relacionados a eles. Neste ponto, não estamos controlando nada relacionado à animação real.

No próximo tutorial da série, você aprenderá a controlar a atenuação, o atraso e a duração da animação para diferentes propriedades em grupo e individualmente. Você aprenderá então como controlar todos esses parâmetros de animação para elementos individuais.

Se houver alguma dúvida relacionada a este tutorial ou se você usou o Anime.js em algum projeto interessante, por favor, deixe-nos saber nos comentários.