Animation.playState

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

Experimental: 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.

Nota: 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:

js
// 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

Specification
Web Animations
# dom-animation-playstate

Compatibilidade com navegadores

Veja também