Melhorias nas animações da Web no Chrome 50

Alex Danilo

A API Web Animations, que foi enviada pela primeira vez no Chrome 36, fornece controle JavaScript conveniente das animações no navegador e também está sendo implementada no Gecko e no WebKit.

O Chrome 50 apresenta alterações para melhorar a interoperabilidade com outros navegadores e aumentar a conformidade com a especificação. Estas são as alterações:

  • Cancelar eventos
  • Animation.id
  • Mudança de estado do método pause().
  • Descontinuação de nomes tracejados como chaves em frames-chave

No Chrome 51, algumas dessas alterações são finalizadas:

  • Remover nomes tracejados como chaves em frames-chave

Cancelar eventos

A interface Animation inclui um método para cancelar uma animação, curiosamente chamado de cancel(). O Chrome 50 implementa o disparo do evento de cancelamento quando o método é chamado de acordo com a especificação, o que aciona o processamento de eventos pelo atributo oncancel se ele tiver sido inicializado.

Suporte a Animation.id.

Ao criar uma animação usando element.animate(), você pode transmitir várias propriedades. Confira um exemplo de como animar a opacidade em um objeto:

element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);

A especificação da propriedade id será definida no objeto Animation retornado, o que pode ajudar na depuração do conteúdo quando você tiver muitos objetos Animation para lidar. Confira um exemplo de como especificar um id para uma animação instanciada:

element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});

Mudança de estado do método pause()

O método pause() é usado para pausar uma animação em andamento. Se você conferir o estado da animação usando o atributo playState, ele precisará ser definido como paused depois que o método paused() for chamado. Nas versões do Chrome anteriores à 50, o atributo playState indicaria idle se a animação ainda não tivesse sido iniciada. No entanto, agora reflete o estado correto, que é paused.

Remover nomes tracejados como chaves em frames-chave

Para obedecer às especificações e a outras implementações, o Chrome 50 vai enviar um aviso ao console se nomes tracejados forem usados para chaves em animações de frames-chave. As strings corretas a serem usadas são nomes camelCase de acordo com a propriedade CSS para algoritmo de conversão do atributo IDL.

Por exemplo, a propriedade CSS margin-left exige que você transmita marginLeft como a chave.

O Chrome 51 não oferece mais suporte a nomes tracejados, então agora é um bom momento para corrigir qualquer conteúdo existente com a nomenclatura correta de acordo com a especificação.

Resumo

Essas mudanças aproximam a implementação de animações da Web do Chrome de outras implementações de navegadores e aumentam a conformidade com a especificação, que ajuda a simplificar a criação de conteúdo de páginas da Web para melhorar a interoperabilidade.