MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.


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

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

Etiquetas do documento e colaboradores

 Colaboradores desta página: Schieck
 Última atualização por: Schieck,