Bom dia amigosAPIs da Web estão em constante evolução. Alguns deles, como Console ou Canvas, são bem suportados por todos os navegadores, outros ainda estão em desenvolvimento.Uma das APIs em desenvolvimento é a API de animações da Web ou WAAPI. Apesar do fato de a primeira versão da especificação ter sido publicada em 2012 e a própria API ter sido implementada nos navegadores Firefox e Chrome em 2014, eu descobri isso recentemente (eu nunca tinha ouvido falar sobre isso antes - aprox. Por.).Ele permite que os desenvolvedores trabalhem com animações CSS usando JavaScript. Sua sintaxe é semelhante à sintaxe das animações CSS tradicionais, mas possui alguns recursos que tornam mais fácil para os desenvolvedores criar e modificar animações.Vamos dar uma olhada nesta API com um exemplo simples.Abaixo, vemos um quadrado rotativo, cuja cor muda a cada turno.
CSS pode ficar assim:#cube {
width: 40px;
height: 40px;
margin: 50%;
background-color: pink;
animation: rotateCube 1s infinite;
}
@keyframes rotateCube {
0% {
transform: rotate(0deg);
}
30% {
background-color: purple;
}
100% {
transform: rotate(180deg);
}
}
Agora faça o mesmo com o WAAPI.Criar animação
Tudo começa com a criação de um objeto Keyframes que contém informações semelhantes às contidas na diretiva @keyframes do nosso CSS:let cubeRotating = [
{transform: 'rotate(0deg)', backgroundColor: 'pink'},
{backgroundColor: 'purple', offset: 0.3},
{transform: 'rotate(180deg)', backgroundColor: 'pink'}
]
Vemos duas diferenças principais:- Precisamos adicionar backgroundColor a outras etapas.
- Não precisamos determinar o tempo para concluir cada etapa como uma porcentagem.
O WAAPI divide automaticamente a animação em partes iguais pelo número de teclas, portanto, no nosso caso, a cor do plano de fundo mudará em cerca de metade da animação.No entanto, queremos que isso aconteça em 30%, portanto, adicionamos a propriedade offset com um valor de 0,3 na segunda etapa.Há uma coisa importante a lembrar: um objeto Keyframes deve ter pelo menos duas chaves. Caso contrário, um NotSupportedError será lançado.Em seguida, é criado um objeto que contém propriedades de animação responsáveis pela duração e número de repetições:let cubeTiming = {
duration: 1000,
iterations: Infinity
}
A duração da animação é definida em milissegundos.Em vez de "infinito", usamos a palavra-chave "Infinito".Finalmente, para executar a animação, usamos o método Element.animate:document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
Existem várias outras opções de sintaxe. Exemplos podem ser encontrados aqui .Mas isso não é tudo. O fato é que, com o WAAPI, podemos controlar a reprodução de animações!Controle de reprodução de animação
Chamar o método animate inicia a animação imediatamente, mas nem sempre é isso que queremos. Portanto, podemos chamar os métodos de pausa e reprodução para parar e iniciar a animação, respectivamente:let cubeAnimation = document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
cubeAnimation.pause()
document.body.onclick = () => cubeAnimation.play()
No nosso exemplo, trabalhamos com uma animação, mas você pode adicionar várias "animações" à página e gerenciá-las como quiser.Entre os métodos WAAPI disponíveis, também existem métodos de término, cancelamento e reversão.Também podemos controlar a velocidade de reprodução da animação:let cubeAnimation = document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
document.body.onclick = () => cubeAnimation.playbackRate *= 1.5
Esse código faz o quadrado girar mais rápido quando clicado.
Até agora, aprendemos a criar uma animação e controlar sua reprodução. Outro recurso WAAPI é o acesso a todas as animações de uma só vez.Gerenciar várias animações
O WAAPI possui um método getAnimations que permite acessar todas as animações criadas.Suponha que desejemos diminuir a velocidade de todas as animações que estão na página se o usuário tiver ativado prefere movimento reduzido (a função de mídia CSS prefere movimento reduzido pode ser usada para determinar se o usuário solicitou que o sistema operacional minimizasse a quantidade de animação ou movimento que ele usa - aprox. por.):const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
if(mediaQuery.matches){
document.getAnimations().forEach(animation => {
animation.playbackRate *= 0.5
})
}
No exemplo acima, estamos procurando a função de mídia prefere movimento reduzido e, se seu valor for reduzido, obtemos todas as animações da página e reduzimos pela metade a velocidade de reprodução.Essa é uma daquelas coisas que tornam a WAAPI muito útil. Podemos fazer alterações em várias animações alterando uma propriedade.Dependências
Outro recurso interessante do WAAPI é a capacidade de determinar a dependência das propriedades de uma animação nas propriedades de outra.Por exemplo, se temos dois quadrados e queremos que o segundo gire duas vezes mais rápido que o primeiro, podemos fazer isso de duas maneiras.Primeira maneira:let cube1Animation = document.getElementById('cube').animate(
cubeRotating,
{
duration: 1000,
iterations: Infinity
}
)
let cube2Animation = document.getElementById('cube2').animate(
cubeRotating,
{
duration: 500,
iterations: Infinity
}
)
O tempo de animação do primeiro quadrado é de 1 segundo, o segundo - 500 milissegundos.No entanto, com essa abordagem, quando alteramos o tempo de animação do primeiro quadrado, precisamos fazer o mesmo no segundo quadrado.Imagine como é difícil quando existem muitas animações ou um grande número de objetos animados?A melhor maneira de resolver nosso problema é estabelecer a dependência da rotação do segundo quadrado no primeiro:let cube1Animation = document.getElementById('cube').animate(
cubeRotating,
{
duration: 1000,
iterations: Infinity
}
)
let cube2Animation = document.getElementById('cube2').animate(
cubeRotating,
{
duration: cube1Animation.effect.timing.duration / 2,
iterations: Infinity
}
)
Assim, usamos o tempo de animação do primeiro quadrado para determinar o tempo de animação do segundo quadrado. Agora, ao alterar o tempo de animação do primeiro quadrado, o segundo sempre girará duas vezes mais rápido!
atuação
Falando em desempenho, não notei muita diferença entre usar CSS e WAAPI. Mas isso pode ser devido à simplicidade do meu exemplo.Uma vantagem importante do WAAPI em relação a outros métodos de criação de animação em JS é que ele é executado em um encadeamento separado, o que permite que o encadeamento principal "esqueça" a animação e faça o restante do código.Suporte do navegador
Atualmente, o WAAPI está no status de rascunho e é parcialmente suportado nas versões recentes do Firefox e Chrome, bem como nos principais navegadores móveis.Suporte parcial significa que os navegadores suportam métodos como reproduzir, pausar, reverter, finalizar e playbackRate, mas não suportam getAnimations.
Há um polifile para WAAPI em todos os navegadores.Isso é tudo para mim!Outras leituras:Usando a API de animações daWeb Exemplos da API de animações da WebÓtimas séries “Vamos falar sobre a API de animações da Web” de Dan WilsonObrigado por sua atenção.