From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../web/api/animation/animaci\303\263n/index.html" | 106 ++++++++++++++ files/es/web/api/animation/cancel/index.html | 119 +++++++++++++++ files/es/web/api/animation/effect/index.html | 104 +++++++++++++ files/es/web/api/animation/finish/index.html | 147 +++++++++++++++++++ files/es/web/api/animation/id/index.html | 110 ++++++++++++++ files/es/web/api/animation/index.html | 147 +++++++++++++++++++ files/es/web/api/animation/oncancel/index.html | 115 +++++++++++++++ files/es/web/api/animation/onfinish/index.html | 131 +++++++++++++++++ files/es/web/api/animation/pause/index.html | 106 ++++++++++++++ files/es/web/api/animation/play/index.html | 149 +++++++++++++++++++ files/es/web/api/animation/playbackrate/index.html | 162 +++++++++++++++++++++ files/es/web/api/animation/playstate/index.html | 158 ++++++++++++++++++++ files/es/web/api/animation/ready/index.html | 122 ++++++++++++++++ files/es/web/api/animation/reverse/index.html | 136 +++++++++++++++++ files/es/web/api/animation/starttime/index.html | 138 ++++++++++++++++++ files/es/web/api/animation/terminado/index.html | 120 +++++++++++++++ files/es/web/api/animation/tiempoactual/index.html | 114 +++++++++++++++ files/es/web/api/animation/timeline/index.html | 111 ++++++++++++++ 18 files changed, 2295 insertions(+) create mode 100644 "files/es/web/api/animation/animaci\303\263n/index.html" create mode 100644 files/es/web/api/animation/cancel/index.html create mode 100644 files/es/web/api/animation/effect/index.html create mode 100644 files/es/web/api/animation/finish/index.html create mode 100644 files/es/web/api/animation/id/index.html create mode 100644 files/es/web/api/animation/index.html create mode 100644 files/es/web/api/animation/oncancel/index.html create mode 100644 files/es/web/api/animation/onfinish/index.html create mode 100644 files/es/web/api/animation/pause/index.html create mode 100644 files/es/web/api/animation/play/index.html create mode 100644 files/es/web/api/animation/playbackrate/index.html create mode 100644 files/es/web/api/animation/playstate/index.html create mode 100644 files/es/web/api/animation/ready/index.html create mode 100644 files/es/web/api/animation/reverse/index.html create mode 100644 files/es/web/api/animation/starttime/index.html create mode 100644 files/es/web/api/animation/terminado/index.html create mode 100644 files/es/web/api/animation/tiempoactual/index.html create mode 100644 files/es/web/api/animation/timeline/index.html (limited to 'files/es/web/api/animation') diff --git "a/files/es/web/api/animation/animaci\303\263n/index.html" "b/files/es/web/api/animation/animaci\303\263n/index.html" new file mode 100644 index 0000000000..770036b76d --- /dev/null +++ "b/files/es/web/api/animation/animaci\303\263n/index.html" @@ -0,0 +1,106 @@ +--- +title: Animation() +slug: Web/API/Animation/Animación +tags: + - Animacion +translation_of: Web/API/Animation/Animation +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}

+ +

El constructor Animation() de Web Animations API devuelve una instancia del objeto Animation.

+ +

Sintaxis

+ +
var animation = new Animation([effect][, timeline]);
+ +

Parámetros

+ +
+
effect {{optional_inline}}
+
El efecto objetivo, es un objeto de la interfaz {{domxref("AnimationEffectReadOnly")}} ,para asignarlo a la animación. Aunque en el futuro podrían ser asignados otros efectos como SequenceEffect o GroupEffect, el único efecto disponible actualmente es {{domxref("KeyframeEffect")}}. Este puede ser null (valor por defecto) para indicar que no debe aplicarse ningún efecto.
+
timeline {{optional_inline}}
+
Especifica el  timeline con el que asociar la animación, como un objeto de tipo basado en la interfaz {{domxref("AnimationTimeline")}} . Actualmente el único tipo de línea de tiempo disponible es {{domxref("DocumentTimeline")}}, pero en el futuro habrá lineas de tiempo asociadas , por ejemplo, con gestos o desplazamiento. El valor por defecto es {{domxref("Document.timeline")}}, pero puede ser establecido en null.
+
+ +

Ejemplos

+ +

En el ejemplo Follow the White Rabbit , el constructor Animation() es usado para crear una Animation para el rabbitDownKeyframes utilizando el timeline del documento:

+ +
var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-animation', 'Animation()' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile(48)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La Web Animations API solo está habilitada de manera predeterminada en Firefox Developer Edition y Nightly builds. Puedes habilitarla en compilaciones de lanzamiento estableciendo la preferencia de dom.animations-api.core.enabled en true, y puede desactivarse en cualquier versión de Firefox estableciendo esta preferencia en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/cancel/index.html b/files/es/web/api/animation/cancel/index.html new file mode 100644 index 0000000000..e08956221a --- /dev/null +++ b/files/es/web/api/animation/cancel/index.html @@ -0,0 +1,119 @@ +--- +title: Animation.cancel() +slug: Web/API/Animation/cancel +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - cancel + - metodo + - waapi +translation_of: Web/API/Animation/cancel +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

El método cancel() de la Web Animations API de la interfaz {{domxref("Animation")}} borra todos los {{domxref("KeyframeEffect")}} causados por esta animación y aborta su reproducción.

+ +
+

Cuando se cancela una animación, su {{domxref("Animation.startTime", "startTime")}} y su {{domxref("Animation.currentTime", "currentTime")}} se establecen en  null.

+
+ +

Sintaxis

+ +
Animation.cancel();
+ +

Parámetros

+ +

None.

+ +

Valor devuelto

+ +

None.

+ +

Excepciones

+ +

Este método no arroja excepciones directamente; sin embargo, si la animación {{domxref ("Animation.playState", "playState")}} no está "idle""inactiva" cuando se cancela, el {{domxref ("Animation.finished", "current finished promise", "", 1)}} se rechaza con un {{domxref ("DOMException")}} llamado AbortError.

+ +
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-cancel', 'Animation.cancel()' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[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

+ + diff --git a/files/es/web/api/animation/effect/index.html b/files/es/web/api/animation/effect/index.html new file mode 100644 index 0000000000..f4283c52c4 --- /dev/null +++ b/files/es/web/api/animation/effect/index.html @@ -0,0 +1,104 @@ +--- +title: Animation.effect +slug: Web/API/Animation/effect +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - efecto +translation_of: Web/API/Animation/effect +--- +
{{ SeeCompatTable() }} {{ APIRef("Web Animations") }}
+ +

La propiedad Animation.effect de la  Web Animations API obtiene y establece el efecto objetivo de una animación. El efecto objetivo puede ser un objeto efecto de un tipo basado en {{domxref("AnimationEffectReadOnly")}}, como {{domxref("KeyframeEffect")}}, o null.

+ +

Sintaxis

+ +
var effect = Animation.effect;
+
+Animation.effect = {{domxref("AnimationEffectReadOnly")}}
+ +

Valor

+ +

Un objeto {{domxref("AnimationEffectReadOnly")}} que describe el efecto de animación objetivo para la animación, o null para indicar que el efecto no está activo.

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-effect', 'Animation.effect' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Microsoft EdgeInternet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1][2]{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile(48)}}[1][2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[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.enableden true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

[2] Esta propiedad es compatible con Firefox 48 pero es de solo-lectura. La versión Firefox 51 admite también escritura.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/finish/index.html b/files/es/web/api/animation/finish/index.html new file mode 100644 index 0000000000..69ed0e4a68 --- /dev/null +++ b/files/es/web/api/animation/finish/index.html @@ -0,0 +1,147 @@ +--- +title: Animation.finish() +slug: Web/API/Animation/finish +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Finish + - Reference + - metodo + - waapi +translation_of: Web/API/Animation/finish +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +
+

El método finish() de la interfaz {{domxref("Animation")}} de la Web Animations API  establece el tiempo de reproducción actual hasta el final de la animación correspondiente a la dirección de reproducción actual. Es decir, si la animación se está reproduciendo hacia adelante, establece el tiempo de reproducción a la longitud de la secuencia de animación, y si la animación se reproduce hacia atras , (habiendo llamado a su método {{domxref("Animation.reverse", "reverse()")}}), establece el tiempo de la reproducción en 0.

+
+ +

Sintaxis

+ +
Animation.finish();
+ +

Parámetros

+ +

None.

+ +

Valor devuelto

+ +

None.

+ +
+
+ +

Excepciones

+ +
+
InvalidState
+
La velocidad de reproducción del reproductor es 0 o la velocidad de reproducción de la animación es mayor que 0 y el tiempo de finalización de la animación es infinito.
+
+ +

Ejemplos

+ +

El siguiente ejemplo muestra cómo usar el método finish() y captura un error InvalidState.

+ +
interfaceElement.addEventListener("mousedown", function() {
+  try {
+    player.finish();
+  } catch(e if e instanceof InvalidState) {
+    console.log("finish() called on paused or finished animation.");
+  } catch(e);
+    logMyErrors(e); //pasa el objeto excepción al manejador de errores.
+  }
+});
+
+ +

El siguiente ejemplo finaliza todas las animaciones en un solo elemento, independientemente de su dirección de reproducción.

+ +
elem.getAnimations().forEach(
+  function(animation){
+    return animation.finish();
+  }
+);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-finish', 'finish()')}}{{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

+ + diff --git a/files/es/web/api/animation/id/index.html b/files/es/web/api/animation/id/index.html new file mode 100644 index 0000000000..e44c852e72 --- /dev/null +++ b/files/es/web/api/animation/id/index.html @@ -0,0 +1,110 @@ +--- +title: Animation.id +slug: Web/API/Animation/id +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - id +translation_of: Web/API/Animation/id +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad Animation.id de la Web Animations API devuelve o establece una cadena(string) utilizado para identificar la animación.

+ +

Sintaxis

+ +
var animationsId = Animation.id;
+
+Animation.id = newIdString;
+
+ +

Valor

+ +

Un {{domxref("DOMString")}} que se puede usar para identificar la animación, o null si la animación no tiene id.

+ +

Ejemplos

+ +

En el ejemplo Follow the White Rabbit , puedes asignar  a rabbitDownAnimation un  id de esta manera:

+ +
rabbitDownAnimation.effect.id = "rabbitGo";
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-id', 'Animation.id' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[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

+ + diff --git a/files/es/web/api/animation/index.html b/files/es/web/api/animation/index.html new file mode 100644 index 0000000000..ac1f5f46fb --- /dev/null +++ b/files/es/web/api/animation/index.html @@ -0,0 +1,147 @@ +--- +title: Animation +slug: Web/API/Animation +tags: + - API + - Animacion + - Experimental + - Interfaz + - Reeferencia + - Web Animations + - waapi + - web animation api +translation_of: Web/API/Animation +--- +
{{ APIRef("Web Animations") }}{{SeeCompatTable}}
+ +

La interfaz Animation de la  Web Animations API representa un reproductor de animación y proporciona controles de reproducción y una línea de tiempo para un nodo o una fuente de animación.

+ +

Constructor

+ +
+
{{domxref("Animation.Animation()", "Animation()")}}
+
Crea una nueva instancia de objeto Animation.
+
+ +

Propiedades

+ +
+
{{domxref("Animation.currentTime")}}
+
El valor del tiempo de la animación actual en milisegundos , ya sea en ejecución o en pausa. Si la animación carece de {{domxref("AnimationTimeline", "timeline")}}, está inactivo, o no se ha reproducido todavía, su valor es null.
+
+ +
+
{{domxref("Animation.effect")}}
+
Obtiene y establece el {{domxref("AnimationEffectReadOnly")}} asociado con esta animación. Normalmente, este será un objeto {{domxref("KeyframeEffect")}}.
+
{{domxref("Animation.finished")}} {{readOnlyInline}}
+
Devuelve la Promesa actual terminada para esta animación.
+
+ +
+
{{domxref("Animation.id")}}
+
Obtiene y establece la String usada para identificar la animación.
+
{{domxref("Animation.playState")}} {{readOnlyInline}}
+
Devuelve un valor enumerado que describe el estado de la reproducción de una animación.
+
+ +
+
{{domxref("Animation.playbackRate")}}
+
Obtiene o establece la velocidad de reproducción de la animación.
+
+ +
+
{{domxref("Animation.ready")}} {{readOnlyInline}}
+
Devuelve la Promesa actual lista para esta animación.
+
+ +
+
{{domxref("Animation.startTime")}}
+
Obiene o establece la hora programada en la que debe comenzar la reproducción de la animación.
+
+ +
+
{{domxref("Animation.timeline")}}
+
Obtiene o establece el  {{domxref("AnimationTimeline", "timeline")}} asociado con esta animación.
+
+ +

Manejadores de eventos

+ +
+
{{domxref("Animation.oncancel")}}
+
Obtiene y establece en manejador de eventos para el evento cancel.
+
{{domxref("Animation.onfinish")}}
+
Obtiene y establece en manejador de eventos para el evento finish .
+
+ +

Métodos

+ +
+
{{domxref("Animation.cancel()")}}
+
Borra todos los {{domxref("KeyframeEffect", "keyframeEffects")}} causados por la animación y aborta su reproducción.
+
+ +
+
{{domxref("Animation.finish()")}}
+
Busca cualquier final de una animación, dependiendo de si la animación se está reproduciendo o invirtiendo.
+
+ +
+
{{domxref("Animation.pause()")}}
+
Pone la reproducción en pausa.
+
+ +
+
{{domxref("Animation.play()")}}
+
Busca el final de una animación, dependiendo de si la animación se está reproduciendo o si se está invirtiendo.
+
+ +
+
{{domxref("Animation.reverse()")}}
+
Invierte la dirección de reproducción, deteniéndose al comienzo de la animación. Si la animación finaliza o no se activa, volverá a reproducirse desde el final al principio.
+
+ +
+
{{domxref("Animation.updatePlaybackRate()")}}
+
Establece la velocidad de la animación después de sincronizar por primera vez su posición de reproducción.
+
+ +

Problemas de accesibilidad

+ +

Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o síndrome de sensibilidad escotópica.

+ +

Considera ofrecer un mecanismo para pausar o deshabilitar las animaciones, así como utilizar Reduced Motion Media Query para crear una experiencia complementaria para los usuarios que han expresado su preferencia por experiencias no animadas.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}{{Spec2("Web Animations")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{Compat("api.Animation")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/oncancel/index.html b/files/es/web/api/animation/oncancel/index.html new file mode 100644 index 0000000000..1f09835210 --- /dev/null +++ b/files/es/web/api/animation/oncancel/index.html @@ -0,0 +1,115 @@ +--- +title: Animation.oncancel +slug: Web/API/Animation/oncancel +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - oncancel +translation_of: Web/API/Animation/oncancel +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad oncancel de la interfaz {{domxref("Animation")}} de la  Web Animations API es el manejador de eventos para el evento {{event("cancel")}} .

+ +

El evento cancel puede ser activado manualmente con {{domxref("Animation.cancel()")}} cuando la animación entra en estado de reproducción "idle"(inactivo) desde otro estado, como cuando una animación se elimina de un elemento antes de que termine de reproducirse.

+ +
+

La creación de una nueva animación, inicialmente inactiva, no activa el evento {{event("cancel")}} en la nueva animación.

+
+ +

Sintaxis

+ +
var cancelHandler = Animation.oncancel;
+
+Animation.oncancel = cancelHandler;
+ +

Valor

+ +

Una función que será ejecutada cuando la animación sea cancelada, o null si no hay un manejador de eventos {{event("cancel")}}.

+ +

Ejemplos

+ +

Si esta animación es cancelada, elimina su elemento.

+ +
animation.oncancel = animation.effect.target.remove();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-oncancel', 'Animation.oncancel' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[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

+ + diff --git a/files/es/web/api/animation/onfinish/index.html b/files/es/web/api/animation/onfinish/index.html new file mode 100644 index 0000000000..592014f698 --- /dev/null +++ b/files/es/web/api/animation/onfinish/index.html @@ -0,0 +1,131 @@ +--- +title: Animation.onfinish +slug: Web/API/Animation/onfinish +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - onfinish + - waapi +translation_of: Web/API/Animation/onfinish +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad onfinish de la interfaz {{domxref("Animation")}} (de la Web Animations API) es el manejador de eventos para el evento {{event("finish")}}. Este evento se envía cuando la animación termina de reproducirse.

+ +

El evento finish ocurre cuando la reproducción se completa de forma natural, así como cuando se llama al  método {{domxref("Animation.finish()")}} para que la animación termine inmediatamente.

+ +
+

El estado de reproducción "paused" reemplaza al estado  "finished" ; Si la animación está pausada y finalizada, el estado"paused" será el único reportado. Puedes forzar el estado de la animación a "finished" configurando su {{domxref("Animation.startTime", "startTime")}} a document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate).

+
+ +

Sintaxis

+ +
var finishHandler = Animation.onfinish;
+
+Animation.onfinish = finishHandler;
+ +

Valor

+ +

Una función que debe ser llamada para manejar el evento {{event("finish")}} , o null si no se establece ningún manejador para el evento finish.

+ +

Ejemplos

+ +

Animation.onfinish es utilizado en varias ocasiones en el juego de Alice in Web Animations API Land Growing/Shrinking Alice Game.  Aquí hay una instancia en la que agregamos eventos de puntero a un elemento después de que su animación de opacidad se haya desvanecido:

+ +
// Agrega una animación a los créditos finales del juego.
+var endingUI = document.getElementById("ending-ui");
+var bringUI = endingUI.animate(keysFade, timingFade);
+
+// Pone en Pausa dichos créditos.
+bringUI.pause();
+
+// Esta función elimina los eventos de puntero en los créditos.
+hide(endingUI);
+
+// Cuando los créditos se hayan desvanecido,
+// volvemos a agregar los eventos de puntero cuando terminen.
+bringUI.onfinish = function() {
+  endingUI.style.pointerEvents = 'auto';
+};
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-onfinish', 'Animation.onfinish' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[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

+ + diff --git a/files/es/web/api/animation/pause/index.html b/files/es/web/api/animation/pause/index.html new file mode 100644 index 0000000000..0c0329dda7 --- /dev/null +++ b/files/es/web/api/animation/pause/index.html @@ -0,0 +1,106 @@ +--- +title: Animation.pause() +slug: Web/API/Animation/pause +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Referencia + - pausar + - pause + - waapi +translation_of: Web/API/Animation/pause +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

El método pause() de la interfaz {{domxref("Animation")}} de la  Web Animations API, suspende la reproducción de la animación.

+ +

Sintaxis

+ +
animation.pause();
+
+ +

Parámetros

+ +

None.

+ +

Valor devuelto

+ +

None.

+ +

Excepciones

+ +
+
InvalidStateError
+
La animación {{domxref ("Animation.currentTime", "currentTime")}} no está resuelta unresolved (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 {{domxref("Animation.currentTime", "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 {{domxref("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

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Animations', '#dom-animation-pause', 'play()')}}{{Spec2("Web Animations")}}
+ +

Compatibilidad en navegadores

+ +
+

{{Compat("api.Animation.pause")}}

+
+ +

Ver también

+ + 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

+ + diff --git a/files/es/web/api/animation/playbackrate/index.html b/files/es/web/api/animation/playbackrate/index.html new file mode 100644 index 0000000000..0961c0bd6c --- /dev/null +++ b/files/es/web/api/animation/playbackrate/index.html @@ -0,0 +1,162 @@ +--- +title: Animation.playbackRate +slug: Web/API/Animation/playbackRate +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Interface + - Reference + - playbackRate +translation_of: Web/API/Animation/playbackRate +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +

La propiedad Animation.playbackRate de la Web Animations API devuelve o  establece la velocidad de reproducción de la animación.

+ +

Las animaciones tienen un playback rate que proporciona un factor de escala para el cambio de velocidad de la animación {{domxref("DocumentTimeline", "timeline")}} valores del estado actual de la linea de tiempo de la animación. La velocidad de reproducción inicial es 1.

+ +

Sintaxis

+ +
var currentPlaybackRate = Animation.playbackRate;
+
+Animation.playbackRate = newRate;
+
+ +

Valor

+ +

Toma un número que puede ser 0, negativo o positivo. Los valores negativos invierten la animación. El valor es un factor de escala, por lo que, por ejemplo, un valor de 2 duplicaría la velocidad de reproducción.

+ +
+

si establecemos el playbackRate a 0 pausa la animación de manera efectiva (sin embargo, su {{domxref("Animation.playstate", "playstate")}} no se convierte necesariamente en  paused).

+
+ +

Ejemplos

+ +

En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia  (aliceChange) se invierta para reducirse:

+ +
var shrinkAlice = function() {
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+}
+
+// Con un toque o un click, Alicia se encogerá.
+bottle.addEventListener("mousedown", shrinkAlice, false);
+bottle.addEventListener("touchstart", shrinkAlice, false);
+
+ +

Por el contrario, hacer click en el pastel hace que "crezca" reproduciendo aliceChange hacia adelante otra vez:

+ +
var growAlice = function() {
+  aliceChange.playbackRate = 1;
+  aliceChange.play();
+}
+
+// Con un toque o un click, Alicia crecerá.
+cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);
+
+ +

En otro ejemplo,  Red Queen's Race Game, Alicia y La Reina Roja están ralentizandose constantemente:

+ +
setInterval( function() {
+
+  // Asegúrate de que la velocidad de reproducción nunca descienda por debajo de .4
+
+  if (redQueen_alice.playbackRate > .4) {
+    redQueen_alice.playbackRate *= .9;
+  }
+
+}, 3000);
+
+ +

Pero hacer click o hacer tapping(pasar el puntero) sobre ellos hace que aceleren multiplicando su playbackRate(velocidad de reproducción):

+ +
var goFaster = function() {
+  redQueen_alice.playbackRate *= 1.1;
+}
+
+document.addEventListener("click", goFaster);
+document.addEventListener("touchstart", goFaster);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-playbackrate', 'Animation.playbackRate')}}{{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

+ + diff --git a/files/es/web/api/animation/playstate/index.html b/files/es/web/api/animation/playstate/index.html new file mode 100644 index 0000000000..35d104739b --- /dev/null +++ b/files/es/web/api/animation/playstate/index.html @@ -0,0 +1,158 @@ +--- +title: Animation.playState +slug: Web/API/Animation/playState +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - playState +translation_of: Web/API/Animation/playState +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +

La propiedad  Animation.playState de la Web Animations API devuelve y establece un valor enumerado que describe el estado de reproducción de una animación.

+ +
+

Esta propiedad es de solo lectura para las Animaciones y Transiciones en CSS.

+
+ +

Sintaxis

+ +
var currentPlayState = Animation.playState;
+
+Animation.playState = newState;
+
+ +

Valor

+ +
+
idle(inactivo)
+
El tiempo actual de la animación no está resuelto y no hay tareas pendientes.
+
pending(pendiente)
+
La animación está esperando que se complete una tarea pendiente.
+
running(funcionando)
+
La animación se está ejecutando.
+
paused(pausado)
+
La animación se ha suspendido y la propiedad {{domxref ("Animation.currentTime")}} no se está actualizando.
+
finished(finalizado)
+
La animación ha alcanzado uno de sus límites y la propiedad {{domxref ("Animation.currentTime")}} no se está actualizando.
+
+ +

Ejemplo

+ +

En el ejemplo Growing/Shrinking Alice Game , los jugadores pueden tener un final con (Alicia llorando en un mar de lágrimas) Alice crying into a pool of tears. En el juego, por razones de rendimiento, las lágrimas solo se deben animar cuando son visibles. Por lo tanto, deben detenerse tan pronto como estén animadas, de esta manera:

+ +
// Configurando las animaciones de lágrimas
+
+tears.forEach(function(el) {
+  el.animate(
+    tearsFalling,
+    {
+      delay: getRandomMsRange(-1000, 1000), // cada lágrima aleatoria
+      duration: getRandomMsRange(2000, 6000), // cada lágrima aleatoria
+      iterations: Infinity,
+      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
+    });
+  el.playState = 'paused';
+});
+
+
+// Reproduce las lágrimas cayendo cuando el final necesita mostrarlas.
+
+tears.forEach(function(el) {
+  el.playState = 'playing';
+});
+
+
+// Reinicia la animación de las lágrimas y la detiene.
+
+tears.forEach(function(el) {
+  el.playState = "paused";
+  el.currentTime = 0;
+});
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#play-state', 'playState')}}{{Spec2("Web Animations")}}Initial definition.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}} [1]{{CompatGeckoDesktop(48)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome(39.0)}} [1]{{CompatChrome(39.0)}} [1]{{CompatGeckoMobile(48)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Antes de Chrome 50, este atributo mostraba idle para una animación que aún no había comenzado. A partir de Chrome 50, muestra paused.

+ +

[2] 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

+ + diff --git a/files/es/web/api/animation/ready/index.html b/files/es/web/api/animation/ready/index.html new file mode 100644 index 0000000000..35dfb68954 --- /dev/null +++ b/files/es/web/api/animation/ready/index.html @@ -0,0 +1,122 @@ +--- +title: Animation.ready +slug: Web/API/Animation/ready +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Ready Promise + - Reference +translation_of: Web/API/Animation/ready +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad de solo-lectura  Animation.ready de la Web Animations API devuelve un {{jsxref("Promise")}} que se resuelve cuando la animación está lista para reproducirse. Una nueva 'promesa' es creada cada vez que la animación entra en play state(estado de reproducción) "pending"(pendiente) así como si la reproducción es cancelada, ya que en ambos escenarios, la animación estará lista para ser reiniciada.

+ +
+

Dado que la misma {{jsxref("Promise")}} es usada para las solicitudes pendientes de play ypause , se recomienda a los autores que comprueben el estado de la animación cuando se resuelva la promesa.

+
+ +

Sintaxis

+ +
var readyPromise = Animation.ready;
+
+ +

Valor

+ +

Un {{jsxref("Promise")}} que se resuelve cuando la animación esta lista para reproducirse. Por lo general, se usará una construcción similar a esta usando una promise lista:

+ +
animation.ready.then(function() {
+  // Hace lo que sea necesario cuando
+  // la animación está lista para reproducirse
+});
+ +

Ejemplo

+ +

En el siguiente ejemplo, el estado de la animación será running(reproduciendo) cuando la Promise actual se resuelva ya que la animación no deja el estado de reproducción pending entre las llamadas pause and play ,por lo tanto, la Promise actual no cambia.

+ +
animation.pause();
+animation.ready.then(function() {
+  // Displays 'running'
+  alert(animation.playState);
+});
+animation.play();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-ready', 'Animation.ready' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[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

+ + diff --git a/files/es/web/api/animation/reverse/index.html b/files/es/web/api/animation/reverse/index.html new file mode 100644 index 0000000000..9f2dbf790e --- /dev/null +++ b/files/es/web/api/animation/reverse/index.html @@ -0,0 +1,136 @@ +--- +title: Animation.reverse() +slug: Web/API/Animation/reverse +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Interface + - Reference + - metodo + - reverse + - waapi +translation_of: Web/API/Animation/reverse +--- +
{{APIRef("Web Animations")}}{{SeeCompatTable}}
+ +

El método Animation.reverse() de la interfaz {{ domxref("Animation") }} Interface invierte la dirección de reproducción, lo que significa que la animación termina al principio. Si se llama en una animación sin reproducir, toda la animación se reproduce al revés. Si se llama en una animación pausada, continúa a la inversa.

+ +

Sintaxis

+ +
animation.reverse();
+
+ +

Parámetros

+ +

None.

+ +

Valor devuelto

+ +

{{jsxref("undefined")}}

+ +

Ejemplos

+ +

En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia(aliceChange) sea reproducida al revés, lo que la hace más pequeña. Esto se hace estableciendo el {{ domxref("Animation.playbackRate") }} de aliceChange  en -1 de esta forma:

+ +
var shrinkAlice = function() {
+  // reproduce la animación de Alicia al revés.
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+
+  // reproduce la animación de la botella.
+  drinking.play()
+}
+ +

Pero también se podría haber hecho lamando a reverse() en aliceChange así:

+ +
var shrinkAlice = function() {
+  // reproduce la animación de Alicia al revés.
+  aliceChange.reverse();
+
+  // reproduce la animación de la botella.
+  drinking.play()
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-reverse', 'reverse()')}}{{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

+ + diff --git a/files/es/web/api/animation/starttime/index.html b/files/es/web/api/animation/starttime/index.html new file mode 100644 index 0000000000..8ad69e8ffa --- /dev/null +++ b/files/es/web/api/animation/starttime/index.html @@ -0,0 +1,138 @@ +--- +title: Animation.startTime +slug: Web/API/Animation/startTime +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Interface + - Reference + - startTime +translation_of: Web/API/Animation/startTime +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad Animation.startTime de la interfaz {{domxref ("Animación")}} es un valor de punto flotante de doble precisión que indica el tiempo programado en el que debe comenzar la reproducción de una animación.

+ +

El  start time (tiempo de inicio) es el valor de tiempo de su {{domxref("timeline", "DocumentTimeline")}}cuando su objetivo {{domxref("KeyframeEffect")}} está programado para comenzar la reproducción. El start time (tiempo de inicio) de una animación inicialmente no está resuelto (lo que significa que es null porque no tiene valor).

+ +

Sintaxis

+ +
var animationStartedWhen = Animation.startTime;
+
+Animation.startTime = newStartTime;
+ +

Valor

+ +

Un número de punto flotante que representa el tiempo actual en milisegundos, o nulo si no se establece ningún valor de  tiempo. Puede leer este valor para determinar en qué momento está establecido el punto de inicio, y puede modificarlo para que la animación comience en un momento diferente.

+ +

Ejemplos

+ +

En el ejemplo Running on Web Animations API example, podemos sincronizar todos los nuevos gatos animados dándoles el mismo tiempo de inicio startTime que el gato original:

+ +
var catRunning = document.getElementById ("withWAAPI").animate(keyframes, timing);
+
+/* Una función que crea nuevos gatos. */
+function addCat(){
+  var newCat = document.createElement("div");
+  newCat.classList.add("cat");
+  return newCat;
+}
+
+/* Esta es la función que agrega un gato a la columna WAAPI */
+function animateNewCatWithWAAPI() {
+  // crea unnuevo gato
+  var newCat = addCat();
+
+  // Animar a dicho gato con la función "animate" de WAAPI
+  var newAnimationPlayer = newCat.animate(keyframes, timing);
+
+  // Establece que el punto de inicio de la animación sea el mismo que el original .cat#withWAAPI
+  newAnimationPlayer.startTime = catRunning.startTime;
+
+  // Agrega el gato a la pila.
+  WAAPICats.appendChild(newCat);
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-starttime', 'Animation.startTime' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

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

+ + diff --git a/files/es/web/api/animation/terminado/index.html b/files/es/web/api/animation/terminado/index.html new file mode 100644 index 0000000000..5d321ba012 --- /dev/null +++ b/files/es/web/api/animation/terminado/index.html @@ -0,0 +1,120 @@ +--- +title: Animation.finished +slug: Web/API/Animation/terminado +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference +translation_of: Web/API/Animation/finished +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad de solo-lectura de Animation.finished de la  Web Animations API devuelve un {{jsxref("Promise")}} que se resuelve una vez que la animación a terminado de reproducirse.

+ +
+

Una vez que la reproducción de la animación abandona el estado  finished  ( es decir, la reproducción se está ejecutando otra vez ), Un nuevo Promise es creado para esta propiedad. El nuevo Promise será resuelto cuando se haya completado la actual secuencia de la animación.

+
+ +

Sintaxis

+ +
var animationsPromise = Animation.finished;
+
+ +

Valor

+ +

Un objeto {{jsxref("Promise")}} que se resuelve cuando haya finalizado la reproducción de la animación.

+ +

Ejemplos

+ +

El siguiente código espera a que todas las animaciones que se ejecutan en el elemento elem hayan terminado, después elimina el elemento del arbol del DOM:

+ +
Promise.all(
+  elem.getAnimations().map(
+    function(animation) {
+      return animation.finished
+    }
+  )
+).then(
+  function() {
+    return elem.remove();
+  }
+);
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-finished', 'Animation.finished' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[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

+ + diff --git a/files/es/web/api/animation/tiempoactual/index.html b/files/es/web/api/animation/tiempoactual/index.html new file mode 100644 index 0000000000..acd56f9170 --- /dev/null +++ b/files/es/web/api/animation/tiempoactual/index.html @@ -0,0 +1,114 @@ +--- +title: Animation.currentTime +slug: Web/API/Animation/tiempoActual +tags: + - Animacion +translation_of: Web/API/Animation/currentTime +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +

La propiedad Animation.currentTime de la Web Animations API devuelve y establece el valor del tiempo de la animación en milisegundos, tanto si se está ejecutando como en pausa.

+ +

Si la animación carece de un {{domxref("AnimationTimeline", "timeline")}}, está inactiva, o no ha sido reproducida todavía, el valor devuelto por currentTime es null.

+ +

Sintaxis

+ +
var currentTime = Animation.currentTime;
+Animation.currentTime = newTime;
+ +

Valor

+ +

Un número que representa el tiempo actual en milisegundos, o null para desactivar la animación.

+ +

Ejemplos

+ +

En el juego Drink Me/Eat Me , la altura de Alicia está animada, por lo que puede cambiar de pequeña a grande y de grande a pequeña. Al inicio del juego, su altura de fija estableciendo el currentTime (tiempoActual) a la mitad de la duración total delKeyframeEffect:

+ +
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
+ +

Un modo más genérico para encontrar la marca del 50% en una animación sería :

+ +
animation.currentTime =
+  animation.effect.getComputedTiming().delay +
+  animation.effect.getComputedTiming().activeDuration / 2;
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-currenttime', 'currentTime')}}{{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 estableciendo la preferencia dom.animations-api.core.enabled en true, y puede ser deshabilitado en cualquier versión de Firefox, estableciendo esta preferencia en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/timeline/index.html b/files/es/web/api/animation/timeline/index.html new file mode 100644 index 0000000000..ba34392efd --- /dev/null +++ b/files/es/web/api/animation/timeline/index.html @@ -0,0 +1,111 @@ +--- +title: Animation.timeline +slug: Web/API/Animation/timeline +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - timeline +translation_of: Web/API/Animation/timeline +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad Animation.timeline de la interfaz {{domxref ("Animation")}} devuelve o establece el {{domxref ("AnimationTimeline", "timeline")}} asociado a esta animación. Un 'timeline' es una fuente de valores de tiempo para propósitos de sincronización, y es un objeto basado en {{domxref ("AnimationTimeline")}}. Por defecto, la línea de tiempo de la animación y la línea de tiempo de {{domxref ("Document")}} son las mismas.

+ +

Sintaxis

+ +
var animationsTimeline = Animation.timeline;
+
+Animation.timeline = newTimeline;
+ +

Valor

+ +

Un {{domxref ("AnimationTimeline", "timeline object", "", 1)}} para usar como la fuente de sincronización para la animación, o null para usar el predeterminado, que es el 'timeline' del {{domxref ("Document")}}.

+ +

Ejemplos

+ +

Aquí establecemos que la línea de tiempo timeline de la animación sea la misma que la del tiempo del documento (por cierto, esta es la timeline predeterminada para todas las animaciones):

+ +
animation.timeline = document.timeline;
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-timeline', 'Animation.timeline' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[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