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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
playState

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Veja também