Animation.play()
Baseline 2022
Newly available
Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
El método play()
de la interfaz Animation
de la Web Animations API (en-US) inicia o reanuda la reproducción de una animación. Si la animación ha finalizado, llamando a play()
reinicia la animación y la reproduce desde el principio.
Sintaxis
animation.play();
Parámetros
Ningun.
Valor devuelto
Ejemplo
En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar el pastel hace que la animación de crecimiento de Alicia (aliceChange
) sea reproducida hacia adelante, causando que Alicia se haga más grande, ademas de desencadenar la animación del pastel. Dos Animation.play()
y un EventListener
:
// El pastel tiene su propia animación:
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,
},
);
// Pausa la animación del pastel para que no se reproduzca inmediatamente.
nommingCake.pause();
// Esta función se reproducirá cuando el usuario haga click o toque
var growAlice = function () {
// Reproduce la animación de Alicia.
aliceChange.play();
// Reproduce la animación del pastel.
nommingCake.play();
};
// Cuando el usuario hace click o toca, llama a growAlice, para reproducir todas las animaciones.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);
Especificaciones
Specification |
---|
Web Animations # dom-animation-play |
Compatibilidad con navegadores
BCD tables only load in the browser
Ver también
- Web Animations API (en-US)
Animation
para 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.