O suporte nativo para animações da Web foi lançado pela primeira vez 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 do JavaScript, e o objeto retornado pode ser aproveitado para controlar a reprodução dessas animações. Esses métodos são detalhados no rascunho atual da especificação W3C de animações da Web (em inglês).
Há um polyfill enviado em desenvolvimento ativo que rastreia todos os recursos de animações da Web implementados de forma nativa e que tem suporte em todos os navegadores modernos. Esses métodos principais já estão prontos para uso e merecem fazer parte da sua caixa de ferramentas para criar experiências ricas que se beneficiam de animações, como o app da Web do Google I/O 2015.
Mudanças no construtor e nos grupos
A especificação de animações da Web também descreve grupos e sequências e construtores para animações e players. Elas estão disponíveis no polyfill web-animations-next, que foi criado para mostrar recursos que ainda estão em discussão e ainda não foram implementados de forma nativa. Em resposta ao feedback dos desenvolvedores, a equipe que desenvolve as animações da Web está renomeando esses recursos para que sejam mais autoexplicativos.
O FXTF se reuniu recentemente em Sydney, na Austrália, e discutiu nomes, já que vários desenvolvedores apontaram pontos válidos sobre a confusão que alguns deles causam. Por isso, as seguintes mudanças de nome foram acordadas:
- Animation passa a ser KeyframeEffect
- AnimationSequence passa a ser SequenceEffect
- AnimationGroup passa a ser GroupEffect
- AnimationPlayer passa a ser Animation
Lembre-se de que, 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 atual que usa o método Element.animate() não precisa de mudanças.
Os novos nomes representam com mais precisão o comportamento fornecido por cada objeto. KeyframeEffect, por exemplo, descreve efeitos baseados em keyframes que podem segmentar elementos HTML. Por outro lado, o novo objeto Animation representa uma animação em um dos muitos estados (como reprodução, pausa etc.).
SourceCodeEffect
Se você estiver usando partes da especificação de rascunho com o polyfill web-animations-next, será necessário atualizar o código dentro do período de descontinuação para refletir esses novos nomes. De acordo com a política de mudanças de polyfill, nosso objetivo é oferecer suporte a uma versão antiga por três meses e mostrar avisos no console se o site usar recursos ou nomes descontinuados.
Se você quiser testar esses recursos, aguarde a versão 2 do polyfill para aproveitar esses novos nomes. Por fim, inscreva-se no grupo web-animations-changes para saber sobre outras mudanças.