From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/api/animation/play/index.html | 149 +++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 files/es/web/api/animation/play/index.html (limited to 'files/es/web/api/animation/play') diff --git a/files/es/web/api/animation/play/index.html b/files/es/web/api/animation/play/index.html new file mode 100644 index 0000000000..9ccb5d68a6 --- /dev/null +++ b/files/es/web/api/animation/play/index.html @@ -0,0 +1,149 @@ +--- +title: Animation.play() +slug: Web/API/Animation/play +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Interface + - Reference + - metodo + - play + - waapi +translation_of: Web/API/Animation/play +--- +
{{ APIRef("Web Animations") }}{{SeeCompatTable}}
+ +

El método play() de la interfaz {{ domxref("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

+ +

None.

+ +

Valor devuelto

+ +

{{jsxref("undefined")}}

+ +

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

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-play', 'play()')}}{{Spec2("Web Animations")}} 
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf