Animation.playState

Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.


A propriedade Animation.playState do Web Animations API retorna e altera um valor enumerado que descreve o estado de reprodução da animação.

Essa propriedade é apenas de leitura para Animações CSS e Transições.

Sintaxe

var estadoAtualDaReproducao = Animation.playState;

Animation.playState =novoEstado;

Valor

idle
O tempo atual da animação não está acertado e não há tarefas pendentes.
pending
A animação está aguardando a realização de algumas tarefas para ser completada.
running
A animação está rodando.
paused
A animação está parada e a propriedade Animation.currentTime não está sendo atualizada.
finished
A animação alcançou um de seus finais e a propriedade Animation.currentTime não está sendo atualizada.

Exemplo

No jogo Growing/Shrinking Alice Game , os jogadores podem chegar ao final com a Alice chorando em uma poça de lágrimas. No jogo, por razões de performance, as lágrimas só são animadas quando estão visiveis. Então elas devem ficar pausadas enquanto a animação ocorre, como no exemplo:

// Configurando a animação das lágrimas

tears.forEach(function(el) {
  el.animate(
    tearsFalling,
    {
      delay: getRandomMsRange(-1000, 1000), // aleatório para cada lágrima
      duration: getRandomMsRange(2000, 6000), // aleatório para cada lágrima
      iterations: Infinity,
      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
    });
  el.playState = 'paused';
});


// Rodar as lágrimas caindo quando o final precisa aparecer.

tears.forEach(function(el) {
  el.playState = 'playing';
});


// Reseta a animação e coloca o estado em pause.

tears.forEach(function(el) {
  el.playState = "paused";
  el.currentTime = 0;
});

Especificações

Especificações Status Comentários
Web Animations
The definition of 'playState' in that specification.		 Rascunho atual Initial definition.

Compatibilidade de Navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 39.0 [1] 48 (48)[2] Não suportado Não suportado Não suportado
Feature Android Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Não suportado 39.0 [1] 39.0 [1] 48.0 (48)[2] Não suportado Não suportado Não suportado

[1] Antes do Chrome 50, este atributo retorna idle para animações que ainda não foram reproduzidas . A partir do Chrome 50, ele retorna paused.

[2] A Web Animations API está ativa por padrão apenas no Firefox Developer Edition e nas versões do Nightly. Você pode habilitá-la em versões beta configurando a preferência dom.animations-api.core.enabled para true, e também desativar em qualquer Firefox mudando esta mesma preferência para false.

Veja também