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.
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/pt-br/web/api/web_animations_api/index.md)
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:
// 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
BCD tables only load in the browser
Veja também
- Web Animations API
Animation
para outros métodos e propriedades que você pode usar para controlar a animação da página web.- Os métodos
Animation.play()
,Animation.pause()
,Animation.finish()
conseguem alterar oAnimation
'splayState
.