We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.


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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,