Animation.playState
Experimental: Esta é uma tecnologia experimental (en-US)
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.
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 com 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
- 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()
(en-US),Animation.pause()
(en-US),Animation.finish()
(en-US) conseguem alterar oAnimation
'splayState
.