Melhorias na API Web Animations no Chromium 84

Orquestração de animações com promessas, melhorias de desempenho com animações substituíveis, animações mais suaves com modos compostos e muito mais.

Kevin Ellis
Kevin Ellis

Publicado em 27 de maio de 2020

Quando usadas corretamente, as animações melhoram a percepção e a memória do usuário sobre sua marca, orientam as ações do usuário e ajudam a navegar pelo aplicativo, fornecendo contexto em um espaço digital.

A API Web Animations é uma ferramenta que permite aos desenvolvedores criar animações imperativas com JavaScript. Ele foi escrito para servir de base para implementações de animação e transição CSS e permitir o desenvolvimento de efeitos futuros, bem como a composição e a marcação de efeitos já existentes.

Embora o Firefox e o Safari já tenham implementado o conjunto completo de recursos das especificações, o Chromium 84 traz uma série de recursos que não eram compatíveis com o Chrome e o Edge, permitindo a interoperabilidade entre navegadores.

A Web Animations API chegou ao Chromium pela primeira vez na versão 36, em julho de 2014. Agora a especificação será concluída na versão 84, que será lançada em julho de 2020.
História da API Web Animations no Chromium.

Primeiros passos

Criar uma animação usando a API Web Animations deve ser muito familiar se você já usou regras @keyframe. Primeiro, você precisa criar um objeto de keyframe. O que ficaria assim no CSS:

@keyframes openAnimation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

ficaria assim em JavaScript:

const openAnimation = [
  { transform: 'scale(0)' },
  { transform: 'scale(1)' },
];

Onde você define parâmetros para animação no CSS:

.modal {
  animation: openAnimation 1s 1 ease-in;
}

você definiria no JS:

document.querySelector('.modal').animate(
    openAnimation, {
      duration: 1000, // 1s
      iterations: 1, // single iteration
      easing: 'ease-in' // easing function
    }
);

A quantidade de código é praticamente a mesma, mas com o JavaScript, você tem alguns superpoderes que não têm apenas com o CSS. Isso inclui a capacidade de sequenciar efeitos e um maior controle dos estados de reprodução.

Além de element.animate()

No entanto, com a atualização, a API Web Animations não está mais restrita a animações criadas usando element.animate(). Também podemos manipular animações e transições CSS.

getAnimations() é um método que retorna todas as animações em um elemento, independentemente de ter sido criado usando element.animate() ou regras CSS (animação ou transição CSS). Confira um exemplo:

Primeiro, você "get" os frames-chave da transição para determinar de onde estamos fazendo a transição. Em seguida, você cria duas novas animações de opacidade, ativando o efeito de transição cruzada. Quando o crossfade for concluído, você vai excluir a cópia.

Como orquestrar animações com promessas

No Chromium 84, agora há dois métodos que podem ser usados com promessas: animation.ready e animation.finished.

  • animation.ready permite que você aguarde as mudanças pendentes para que entrem em vigor, ou seja, alternar entre métodos de controle de reprodução, como iniciar e pausar.
  • O animation.finished fornece um meio de executar um código JavaScript personalizado quando uma animação é concluída.

Continuando com nosso exemplo, crie uma cadeia de animação orquestrada com animation.finished. Aqui, você tem uma transformação vertical (scaleY), seguida por uma transformação horizontal (scaleX), seguida por uma mudança de opacidade em um elemento filho:

Aplicar transformações e opacidade a um elemento modal de abertura. Veja a demonstração no Codepen
const transformAnimation = modal.animate(openModal, openModalSettings);
transformAnimation.finished.then(() => { text.animate(fadeIn, fadeInSettings)});

Encadeamos essas animações usando animation.finished.then() antes de executar o próximo conjunto de animações na cadeia. Dessa forma, as animações aparecem em ordem, e você aplica efeitos a diferentes elementos de destino com opções diferentes definidas, como velocidade e facilidade.

No CSS, isso seria complicado de recriar, especialmente ao aplicar animações únicas, mas sequenciadas a vários elementos. Você precisa usar um @keyframe, classificar as porcentagens de tempo corretas para posicionar as animações e usar animation-delay antes de acionar as animações na sequência.

Exemplo: reproduzir, pausar e inverter

O que pode abrir, precisa fechar. Felizmente, desde o Chromium 39, a API Web Animations permite que nossas animações sejam reproduzidas, pausadas e revertidas.

Você pode usar a animação mostrada anteriormente e dar a ela uma animação suave e invertida ao clicar no botão novamente usando .reverse(). Dessa forma, você pode criar uma interação mais suave e contextual para nosso modal.

Exemplo de abertura e fechamento de uma modal ao clicar no botão. Confira a demonstração no Glitch

Você pode criar duas animações em espera de reprodução (openModal e uma transformação de opacidade inline) e pausar uma delas, atrasando-a até que a outra seja concluída. Você pode usar promessas para esperar que cada uma seja concluída antes de tocar. Por fim, você pode verificar se uma sinalização foi definida e depois inverter cada animação.

Exemplo: interações dinâmicas com frames-chave parciais

Exemplo de segmentação por retargeting, em que um clique do mouse ajusta a animação para um novo local. Confira a demonstração no Glitch
selector.animate([{transform: `translate(${x}px, ${y}px)`}],
    {duration: 1000, fill: 'forwards'});

Neste exemplo, há apenas um frame-chave e nenhuma posição inicial especificada. Este é um exemplo de uso de frames-chave parciais. O manipulador do mouse faz algumas coisas aqui: ele define um novo local de destino e aciona uma nova animação. A nova posição inicial é inferida da posição atual.

Novas transições podem ser acionadas enquanto as atuais ainda estão em execução. Isso significa que a transição atual é interrompida e uma nova é criada.

Melhorias de desempenho com animações substituíveis

Ao criar animações com base em eventos, como em 'mousemove', uma nova animação é criada a cada vez, o que pode consumir memória rapidamente e degradar o desempenho. Para resolver esse problema, animações substituíveis foram introduzidas no Chromium 83, permitindo a limpeza automatizada, em que animações finalizadas são sinalizadas como substituíveis e removidas automaticamente se forem substituídas por outra animação finalizada. Veja o exemplo a seguir:

Uma trilha de cometa é animada quando o mouse se move. Confira a demonstração no Glitch
elem.addEventListener('mousemove', evt => {
  rectangle.animate(
    { transform: translate(${evt.clientX}px, ${evt.clientY}px) },
    { duration: 500, fill: 'forwards' }
  );
});

Sempre que o mouse se move, o navegador recalcula a posição de cada bola no rastro do cometa e cria uma animação para esse novo ponto. O navegador agora sabe remover animações antigas (ativando a substituição) quando:

  1. A animação é concluída.
  2. Há uma ou mais animações mais altas na ordem composta que também foram concluídas.
  3. As novas animações estão animando as mesmas propriedades.

É possível conferir exatamente quantas animações estão sendo substituídas somando um contador com cada animação removida, usando anim.onremove para acionar o contador.

Há alguns outros métodos para melhorar ainda mais o controle de animação:

  • animation.replaceState() oferece uma maneira de rastrear se uma animação está ativa, persistente ou removida.
  • animation.commitStyles() atualiza o estilo de um elemento com base no estilo subjacente, além de todas as animações no elemento na ordem composta.
  • animation.persist() marca uma animação como não substituível.

Animações mais suaves com modos compostos

Com a API Web Animations, agora você pode definir o modo composto das suas animações, o que significa que elas podem ser aditivos ou cumulativos, além do modo padrão de "substituir". Os modos compostos permitem que os desenvolvedores programem animações distintas e controlem como os efeitos são combinados. Agora há suporte para três modos compostos: 'replace' (modo padrão), 'add' e 'accumulate'.

Ao compor animações, um desenvolvedor pode escrever efeitos curtos e distintos e combiná-los. No exemplo a seguir, aplicamos um keyframe de rotação e escala a cada caixa, com o único ajuste sendo o modo composto, adicionado como uma opção:

Uma demonstração mostrando os modos compostos padrão, de adição e de acumulação. Confira a demonstração no Glitch

No modo composto 'replace' padrão, a animação final substitui a propriedade de transformação e termina em rotate(360deg) scale(1.4). Para 'add', o elemento combinável adiciona a rotação e multiplica a escala, resultando em um estado final de rotate(720deg) scale(1.96). 'accumulate' combina as transformações, resultando em rotate(720deg) scale(1.8). Para saber mais sobre as complexidades desses modos compostos, confira The CompositeOperation and CompositeOperationOrAuto enumerations (em inglês) na especificação da Web Animations.

Confira o exemplo de elemento de interface a seguir:

Um menu suspenso com duas animações compostas aplicadas. Confira a demonstração no Glitch

Aqui, duas animações top são compostas. A primeira é uma macroanimação, que move o menu suspenso pela altura total do menu como um efeito de deslizamento da parte de cima da página. A segunda, uma microanimação, aplica um pequeno salto quando chega ao fim. O uso do modo composto 'add' permite uma transição mais suave.

const dropDown = menu.animate(
    [
      { top: `${-menuHeight}px`, easing: 'ease-in' },
      { top: 0 }
    ], { duration: 300, fill: 'forwards' });

  dropDown.finished.then(() => {
    const bounce = menu.animate(
      [
        { top: '0px', easing: 'ease-in' },
        { top: '10px', easing: 'ease-out' },
        { ... }
      ], { duration: 300, composite: 'add' });
  });

Próximas etapas para a API Web Animations

Essas são adições incríveis aos recursos de animação nos navegadores atuais, e ainda mais adições estão por vir. Confira estas especificações futuras para saber mais sobre o que está por vir: