O suporte nativo para animações da Web foi lançado no Chrome 36 e atualizado com o controle de reprodução no Chrome 39. O método Element.animate() pode ser usado para acionar animações imperativas diretamente no JavaScript, e o objeto retornado pode ser aproveitado para controlar a reprodução dessas animações. Esses métodos estão detalhados no rascunho atual da especificação W3C de animações na Web.
Há um polyfill enviado em desenvolvimento ativo que rastreia todos os recursos de animações da Web implementados de maneira nativa e que é compatível com todos os navegadores modernos. Esses métodos básicos estão prontos para uso e merecem fazer parte da sua caixa de ferramentas para criar experiências avançadas que se beneficiem de animações (como no app da Web do Google I/O 2015).
Mudanças no construtor e nos grupos
A especificação Web Animations também descreve grupos e sequências, além de construtores para animações e players. Esses recursos estão disponíveis no polyfill web-animations-next, que foi projetado para mostrar recursos ainda em discussão e que ainda serão implementados de forma nativa. Em resposta ao feedback dos desenvolvedores, a equipe que desenvolve Web Animations está renomeando esses recursos para serem mais autoexplicativos.
O FXTF se encontrou recentemente em Sydney, Austrália, e discutiu a naming, já que vários desenvolvedores apontaram pontos válidos sobre a confusão dos nomes. Como resultado, as seguintes mudanças na nomenclatura foram acordadas:
- Animation se torna KeyframeEffect.
- AnimationSequence se torna SequenceEffect
- AnimationGroup se torna GroupEffect.
- AnimationPlayer vira Animation
Embora as animações e os players delas estejam disponíveis de forma nativa no Chrome e como parte do polyfill, elas são criadas diretamente pelo método Element.animate(). O código que usa o método Element.animate() não vai precisar de mudanças.
Os novos nomes representam com mais precisão o comportamento fornecido por cada objeto. KeyframeEffect, por exemplo, descreve efeitos baseados em frames-chave que podem segmentar elementos HTML. Por outro lado, o novo objeto Animation representa uma animação em um dos vários estados (como em reprodução, pausada etc.).
SourceCodeEffect
Se você estiver usando partes da especificação de rascunho por meio do polyfill de animações da Web, será necessário atualizar seu código durante o período de descontinuação para refletir esses novos nomes. De acordo com a política de alterações de polyfill, nosso objetivo é oferecer suporte a uma versão antiga por três meses e enviar avisos no console caso seu site use recursos ou nomes descontinuados.
Se você quer conhecer esses recursos, fique de olho na versão v2 do polyfill para aproveitar os novos nomes. Por fim, inscreva-se no grupo web-animations-Changes para saber sobre outras mudanças.