Animation.pause()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since marzo de 2020.
El método pause() de la interfaz Animation de la Web Animations API, suspende la reproducción de la animación.
Sintaxis
animation.pause();
Parámetros
Ningun.
Valor devuelto
Ningun.
Excepciones
- InvalidStateError
-
La animación
currentTimeno está resueltaunresolved(por ejemplo, si nunca se ha reproducido o no se está reproduciendo actualmente) y el tiempo de finalización de la animación es infinito positivo.
Lanza un InvalidStateError si el currentTime de la animación no está resuelto unresolved (tal vez no se haya iniciado la reproducción) y el fin de la animación es infinito positivo.
Ejemplos
Animation.pause() es utilizado en varias ocasiones en el juego Alice in Web Animations API Land Growing/Shrinking Alice Game, porque las animaciones creadas con el método Element.animate() se inician de inmediato y deben ser detenidas manualmente para evitar esto:
// animación de la magdalena que lentamente se está comiendo
var nommingCake = document
.getElementById("eat-me_sprite")
.animate(
[{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
{
fill: "forwards",
easing: "steps(4, end)",
duration: aliceChange.effect.timing.duration / 2,
},
);
// realmente solo debe funcionar al hacer click, así que se pausa inicialmente:
nommingCake.pause();
Adicionalmente, al restablecer:
// Una función multiusos para pausar las animaciones de Alicia, el pastelito y la botella que dice "drink me."
var stopPlayingAlice = function () {
aliceChange.pause();
nommingCake.pause();
drinking.pause();
};
// Cuando el usuario suelte el cupcake o la botella, pause las animaciones.
cake.addEventListener("mouseup", stopPlayingAlice, false);
bottle.addEventListener("mouseup", stopPlayingAlice, false);
Especificaciones
| Specification |
|---|
| Web Animations # dom-animation-pause |
Compatibilidad con navegadores
Loading…
Ver también
- Web Animations API
Animationpara otros métodos y propiedades que puedes usar para el control de animaciones en páginas web.Animation.pause()para pausar una animación.Animation.reverse()para reproducir una animación al revés.Animation.finish()para finalizar una animación.Animation.cancel()para cancelar una animación.