Animation.play()
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/es/web/api/web_animations_api/index.md)
El método play()
de la interfaz Animation
de la Web Animations API 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
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.