Animações baseadas em JavaScript usando Anime.js, Parte 2: Parâmetros

No primeiro tutorial da série Anime.js, você aprendeu sobre diferentes maneiras de especificar os elementos de destino que deseja animar e os tipos de propriedades CSS e atributos DOM que podem ser animados. As animações do tutorial anterior eram bem básicas. Todos os elementos-alvo estavam apenas se movendo a uma certa distância ou alterando o raio da borda a uma velocidade fixa.

Às vezes, você pode precisar animar os elementos de destino de uma maneira mais rítmica. Por exemplo, você pode ter dez elementos diferentes que deseja mover da esquerda para a direita com um atraso de 500 ms entre o início da animação para cada elemento. Da mesma forma, você pode querer aumentar ou diminuir a duração da animação para cada elemento com base em sua posição.

Neste tutorial, você aprenderá a usar o Anime.js para cronometrar adequadamente a animação de diferentes elementos usando parâmetros específicos. Isso permitirá que você controle a ordem na qual uma sequência de animação é reproduzida para elementos individuais ou para todos os elementos.

Parâmetros de propriedade

Esses parâmetros permitem controlar a duração, o atraso e a flexibilização de propriedades individuais ou de um grupo de propriedades de uma só vez. o duration e delay parâmetros são especificados em milissegundos. O valor padrão para duração é 1000ms ou 1s.

Isso significa que, a menos que especificado de outra forma, qualquer animação aplicada a um elemento será reproduzida por 1 segundo. o delay O parâmetro especifica a quantidade de tempo que a animação leva para começar depois que você já a acionou. O valor padrão para delay é 0. Isso significa que as animações começarão assim que forem acionadas.

Você pode usar o easing parâmetro para controlar a taxa na qual uma animação é reproduzida enquanto estiver ativa. Algumas animações começam lentas, ganham ritmo no meio e depois desaceleram novamente no final. Outros começam em um bom ritmo e depois desaceleram pelo resto do tempo.

No entanto, em todos os casos, a animação sempre termina dentro do tempo especificado usando o duration parâmetro. O Anime.js fornece muitas funções de facilitação que você pode aplicar diretamente aos seus elementos usando apenas seus nomes. Para algumas funções de atenuação, você também pode definir um valor para o elasticity parâmetro para controlar quanto o valor de um elemento salta para frente e para trás como uma mola.

Você aprenderá mais sobre as diferentes funções de easing no tutorial final da série. O trecho de código a seguir mostra como aplicar todos esses parâmetros a diferentes animações.

var slowAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 4000
});

var delayAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  delay: 800
});

var cubicAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 1200,
  easing: 'easeInOutCubic'
});

Como você pode ver, esses parâmetros podem ser usados ​​independentemente de outros parâmetros ou em combinação com eles. o cubicAnimation tem tanto o duration e easing parâmetro aplicado a ele. Se a duração não tivesse sido especificada, a animação teria sido executada por 1 segundo. Agora, ele será executado por 1.200 milissegundos ou 1,2 segundos.

Uma grande limitação dos parâmetros de propriedade no exemplo acima foi que todas as animações do elemento de destino terão o mesmo duration, delay e easing valores.

Este pode ou não ser o comportamento desejado. Por exemplo, em vez de traduzir e alterar o raio da borda do elemento de destino ao mesmo tempo, talvez você queira primeiro traduzir o elemento de destino e depois animar o raio da borda. Anime.js permite especificar valores diferentes para o duration, delay, easing e elasticity parâmetros para propriedades individuais. O código e a demonstração a seguir devem deixar isso mais claro.

var indiParam = anime({
  targets: '.square',
  translateY: {
    value: 250
  },
  rotate: {
    value: '2.125turn'
  },
  backgroundColor: {
    value: 'rgb(255,0,0)',
    duration: 400,
    delay: 1500,
    easing: 'linear'
  },
  duration: 1500
});

No código acima, todas as propriedades que queremos animar possuem valores diferentes. A animação colorida de fundo tem uma duração de 400ms, enquanto as animações de rotação e translação usam o valor de duração global de 1500ms.

A animação da cor de fundo também tem um atraso, então qualquer mudança na cor só começa após 1500ms. o rotate e translateY propriedades usam o valor padrão para o delay e easing parâmetros porque não fornecemos um valor local nem global para eles.

Parâmetros baseados em função

Os parâmetros baseados em propriedade são úteis quando você deseja alterar a ordem e a duração da animação de propriedades individuais. No entanto, o mesmo duration e delay ainda será aplicado para propriedades individuais em todos os elementos de destino. Os parâmetros baseados em função permitem especificar separadamente o duration, delay, elasticity e easing para diferentes elementos de destino de forma compacta.

Nesse caso, você define os valores de diferentes parâmetros usando funções em vez de números. Essas funções aceitam três parâmetros: target, indexe targetCount. o target O parâmetro armazena a referência ao elemento de destino atual. o index O parâmetro armazena o índice ou a posição do elemento de destino atual. o targetCount O parâmetro armazena o número total de elementos de destino.

o target O parâmetro é útil quando os valores de animação precisam ser definidos com base em alguns atributos do elemento de destino. Por exemplo, você pode armazenar o delay, duration ou easing valores para um elemento de destino em atributos de dados e acessá-los posteriormente.

Da mesma forma, você pode acessar a cor de fundo de um elemento de destino e manipulá-lo para definir um valor de cor exclusivo final para elementos individuais. Dessa forma, você pode animar todos os elementos para que tenham uma cor de fundo 20% mais escura que a cor atual.

o index O parâmetro fornece a posição do destino atual em nossa lista de elementos de destino. Você pode usá-lo para alterar gradualmente o valor de parâmetros como duration e delay para diferentes elementos.

Isso geralmente é útil quando você deseja definir os valores em ordem crescente. Você também pode subtrair o index de targetCount para definir os valores em ordem decrescente. O trecho de código a seguir usa esses dois parâmetros para especificar os valores em ordem crescente e decrescente.

var delaySequence = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  }
});

var delaySequenceR = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
  }
});

O código a seguir define um diferente easing valor para cada elemento de destino usando o index parâmetro.

var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic'];

var easeInSequence = anime({
  targets: '.square',
  translateY: 250,
  duration: 2000,
  easing: function(target, index) {
    return easeInValues[index];
  },
  autoplay: false
});

Parâmetros de animação

Este último conjunto de parâmetros permite especificar o número de vezes que uma animação deve ser reproduzida e a direção em que ela deve ser reproduzida. Você pode especificar o número de vezes que uma animação deve ser reproduzida usando o loop parâmetro. Há também um autoplay parâmetro que pode ser definido como true ou false. Seu valor padrão é truemas você pode impedir que as animações comecem sozinhas configurando-a para false.

o direction O parâmetro controla a direção na qual a animação é reproduzida. Pode ter três valores: normal, reversee alternate. o valor padrão é normal, que mantém a animação sendo reproduzida normalmente desde os valores iniciais até os valores finais. Uma vez que os elementos alvo atingem o valor de acabamento, se o loop valor for maior que 1, os elementos de destino retornam abruptamente aos valores iniciais e, em seguida, iniciam a animação novamente.

Quando o direction está configurado para reverse e a loop valor for maior que 1, a animação será revertida. Em outras palavras, os elementos alvo iniciam a animação a partir de seu estado final e retrocedem para alcançar o estado inicial. Uma vez que estão no estado inicial, os elementos voltam ao estado final e, em seguida, iniciam novamente a animação reversa. o alternate O valor de direção altera a direção da animação após cada loop.

var normalLoop = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  },
  loop: 4,
  easing: 'easeInSine',
  autoplay: false
});

Na demonstração a seguir, defini o número de loops para quatro para que você possa notar facilmente a diferença na animação dos elementos em diferentes modos.

Usando o stagger() Método

Até agora neste tutorial, usamos funções para passar valores diferentes para o elemento de destino para o atraso ou a duração da animação. Você também pode obter a mesma funcionalidade com a ajuda de stagger() método em anime.js.

o stagger() basicamente permite que você controle como uma animação acontece em vários elementos. Aceita dois parâmetros. O primeiro é o valor que você deseja aplicar, o segundo é um objeto com vários parâmetros que determinam como o escalonamento seria aplicado.

Aqui está um exemplo para mostrar como stagger() compara com funções regulares que escrevemos até este ponto:

// A function to introduce animation delay in elements.
delay: function(target, index) {
    return index * 200;
}

// The stagger() Equivalent
delay: anime.stagger(200);

Agora você pode perguntar se existe uma maneira de aplicar o atraso de animação na direção reversa, como fizemos com nossa função. Sim, isso é definitivamente possível. Aqui está um exemplo:

// Reversing the delay direction
delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
}

// Equivalent functionality with stagger()
delay: anime.stagger(200, {"direction": "reverse"})
  

Da mesma forma, poderíamos aplicar o escalonamento à duração da animação. O valor de atraso para o primeiro elemento nos exemplos anteriores foi definido como 0 devido ao escalonamento e isso também era o que pretendíamos fazer. No entanto, a duração da animação deve ser diferente de zero para o primeiro elemento. Caso contrário, estaria no estágio final assim que a página fosse carregada.

Uma duração diferente de zero para a animação do primeiro elemento pode ser definida com a ajuda de start parâmetro definido como 1000 para o escalonamento. Aqui está um exemplo:

// Duration starts at 1000 and increases by 800
duration: function(target, index) {
    return 1000 + index * 800;
}

// Equivalent functionality with stagger()
duration: anime.stagger(800, {"start": 1000})

E se o valor de duração diferente de zero tiver que ser aplicado ao iniciar para o último elemento? Neste caso, podemos usar os seguintes parâmetros para o stagger() método:

// A non-zero duration in reverse direction
duration: function(target, index, targetCount) {
    return 1000 + (targetCount - index) * 800;
}

// Equivalent functionality with stagger()
duration: anime.stagger(800, {"start": 1000, "direction": "reverse"})

A seguinte demonstração do CodePen faz tudo como o exemplo na seção “Parâmetros baseados em função”, mas usa o stagger() método para fazê-lo. Como você pode ver, não há diferença no resultado final.

Uma coisa que gostaria de salientar é que o método escalonar não funcionará em versões antigas da biblioteca. Certifique-se de estar usando a versão mais recente para evitar erros.

Pensamentos finais

Neste tutorial, você aprendeu sobre diferentes tipos de parâmetros que podem ser usados ​​para controlar a animação de elementos de destino no Anime.js. Os parâmetros de propriedade são usados ​​para controlar a animação de propriedades individuais.

Você pode usá-los para controlar a sequência na qual a animação é reproduzida para elementos individuais. Os parâmetros da função permitem controlar o tempo e a taxa de animação para elementos individuais em relação a todo o grupo. Os parâmetros de animação permitem controlar como a própria animação é reproduzida para diferentes elementos.