diff options
| -rw-r--r-- | files/es/web/api/element/animate/index.html | 208 | ||||
| -rw-r--r-- | files/es/web/api/element/animate/index.md | 82 |
2 files changed, 82 insertions, 208 deletions
diff --git a/files/es/web/api/element/animate/index.html b/files/es/web/api/element/animate/index.html deleted file mode 100644 index e491efc0d7..0000000000 --- a/files/es/web/api/element/animate/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: Element.animate() -slug: Web/API/Element/animate -tags: - - API - - Animacion - - Elemento - - Experimental - - metodo - - waapi - - web animations api -translation_of: Web/API/Element/animate ---- -<div> -<p>{{APIRef('Web Animations')}} {{SeeCompatTable}}</p> - -<p>El método <strong><code>Element.animate()</code></strong> es un método abreviado para crear y reproducir una animación en un elemento. Devuelve la instancia creada de un objeto {{domxref("Animation")}} .</p> - -<h2 id="Síntaxis">Síntaxis</h2> - -<div class="syntaxbox"> -<pre class="brush: js"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>); </pre> -</div> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code>keyframes</code></dt> - <dd> - <p>Un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Objeto formateado para representar un conjunto de fotogramas clave</a>.</p> - </dd> - <dt><code>opciones</code></dt> - <dd>Puede ser un<strong> entero</strong> <strong>representando la duración de la animación</strong> (en milisegundos), <strong>o</strong> un Objeto conteniendo una o más propiedades de sincronización: </dd> - <dd> - <dl> - <dt><code>id {{optional_inline}}</code></dt> - <dd><code>Una propiedad única para animar()</code>: a <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a> con la cual se hace referencia a la animación.</dd> - </dl> - {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</dd> -</dl> - -<h4 id="Opciones_Futuras">Opciones Futuras</h4> - -<p><span id="result_box" lang="es"><span>Las</span> <span>siguientes</span> <span>opciones</span> <span>actualmente no</span> <span>se han enviado</span> <span>a todos los sitios</span><span>, pero</span> <span>se añadirán</span> <span>en un futuro próximo</span><span>.</span></span></p> - -<dl> - <dt><code>composite {{optional_inline}}</code></dt> - <dd>Determina como se combinan los valores entre esta animación y otra, animaciones independientes sin especificar la composición de su propia operación. <code>Valores predeterminados a reemplazar</code>. - <ul> - <li><code>añadir dicta un efecto aditivo</code>, donde cada iteración sucesiva se basa en la anterior. Por ejemplo con <code>transform</code>, a <code>translateX(-200px)</code> no anularía un valor anterior <code>rotate(20deg)</code> que resultaría <code>translateX(-200px) rotate(20deg)</code>.</li> - <li><code>acumular es similar pero un poco más inteligente</code>: <code>blur(2)</code> y <code>blur(5)</code> resultaría <code>blur(7)</code>, no <code>blur(2) blur(5)</code>.</li> - <li><code>remplazar sobreescribe el valor anterior con el nuevo</code>.</li> - </ul> - </dd> - <dt><code>iterationComposite {{optional_inline}}</code></dt> - <dd>Determina como se construyen los valores de una iteración a otra en esta animación. . <code>Se puede configurar para acumular o reemplazar</code> (ver arriba). <code>Valores predeterminados para reemplazar</code>.</dd> - <dt><code>spacing {{optional_inline}}</code></dt> - <dd>Determina como los keyframes sin compensación temporal deben ser distribuidos durante la duración de la animación. <code>Valores predeterminados para distribuir</code>. - <ul> - <li><code>distribuir las posiciones de los</code> keyframes para que la diferencia entre el anterior y el posterior estén compensadas por igual , lo que es como decir, sin ninguna compensación, esto distribuirá equitativamente los keyframes a traves del tiempo de ejecución.</li> - <li><code>situar las posiciones de los</code> keyframes de manera que igualen la diferencia entre los siguientes valores de una propiedad especifica sincronizada , lo que es como decir, que los keyframes estén más espaciados cuanto mayores sean los valores de sus propiedades.</li> - </ul> - - <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p> - </dd> -</dl> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<p>Returns an {{domxref("Animation")}}.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>En la demostración <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (con la Web Animation API)</a>, utilizamos el método conveniente, <code>animate()</code> para inmediatamente crear y ejecutar una animación en el elemento <code>#tunnel</code> para hacerlo fluir hacia arriba, indefinidamente. Observar el orden de paso de los objetos por los keyframes y también el bloque de opciones de sincronización.</p> - -<pre class="brush: js">document.getElementById("tunnel").animate([ - // keyframes - { transform: 'translateY(0px)' }, - { transform: 'translateY(-300px)' } -], { - // timing options - duration: 1000, - iterations: Infinity -}); -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}</td> - <td>{{Spec2('Web Animations')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome("36")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{ CompatGeckoDesktop("48.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>23</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>id</code> option</td> - <td>{{CompatChrome(50.0)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{ CompatGeckoDesktop("48.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>37</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(39.0)}}</td> - <td>{{CompatChrome(39.0)}}</td> - <td>{{ CompatGeckoMobile("48.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>id</code> option</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(50.0)}}</td> - <td>{{CompatChrome(50.0)}}</td> - <td>{{ CompatGeckoMobile("48.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_También">Ver También</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li> - <li>{{domxref("Animation")}}</li> -</ul> -</div> diff --git a/files/es/web/api/element/animate/index.md b/files/es/web/api/element/animate/index.md new file mode 100644 index 0000000000..8f1a3f3f0e --- /dev/null +++ b/files/es/web/api/element/animate/index.md @@ -0,0 +1,82 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +translation_of: Web/API/Element/animate +browser-compat: api.Element.animate +--- +{{APIRef('Web Animations')}} + +El método **`animate()`** de la interfaz {{domxref("Element")}} es un método abreviado el cual crea un nuevo {{domxref("Animation")}}, aplicado al elemento, luego reproduce la animación. Devuelve la instancia creada de un objeto {{domxref("Animation")}}. + +> **Nota:** Los elementos pueden tener multiples animaciones aplicadas a ellos. Puedes obtener una +> lista de las animaciones que afectan a un elemento llamando a {{domxref("Element.getAnimations()")}}. + +## Síntaxis + +```js +animate(keyframes, options) +``` + +### Parámetros + +- `keyframes` + - : Puede ser un arreglo de objetos de fotogramas clave **o** un objeto de fotogramas clave + cuyas propiedades son arreglos de valores a iterar. Ver [Keyframe Formats](/es/docs/Web/API/Web_Animations_API/Keyframe_Formats) + para más detalles. +- `options` + + - : Puede ser un **entero representando la duración de la animación** (en milisegundos), **o** un + objeto que contiene una o más propiedades acerca del tiempo descritas en los + [los parametros de opciones del `KeyframeEffect()`](/es/docs/Web/API/KeyframeEffect) y/o las + siguientes opciones: + + - `id {{optional_inline}}` + - : Una propiedad única `animate()` para animar: una [`DOMString`](/es/docs/Web/API/DOMString) la cual hace referencia a la animación. + +### Valor de retorno + +Regresa una {{domxref("Animation")}}. + +## Ejemplos + +En la demostración [Down the Rabbit Hole (con la API de Animaciones Web)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010), +utilizamos el método conveniente, `animate()` para inmediatamente crear y reproducir una animación en el elemento `#tunnel` +para hacerlo fluir hacia arriba, indefinidamente. Observa el arreglo de los objetos enviados como fotogramas clave y también el bloque de opciones de sincronización. + +```js +document.getElementById("tunnel").animate([ + // fotogramas clave + { transform: 'translateY(0px)' }, + { transform: 'translateY(-300px)' } +], { + // opciones de sincronización + duration: 1000, + iterations: Infinity +}); +``` + +### Implicito a/desde fotogramas clave + +En versiones más recientes de navegadores, se te permite declarar el estado de inicio o fin únicamente para una animación (por ejemplo: un simple fotograma clave), y el navegador inferirá la otra parte de la animación si está habilitado. Por ejemplo, considera [esta simple animación](https://mdn.github.io/dom-examples/web-animations-api/implicit-keyframes.html) — el objeto de fotograma clave se ve así: + +```js +let rotate360 = [ + { transform: 'rotate(360deg)' } +]; +``` + +Solamente hemos especificado el fin del estado de la animación, y el estado inicial está implícito. + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} + +## Véase también + +- [API de Animaciones Web](/es/docs/Web/API/Web_Animations_API) +- {{domxref("Element.getAnimations()")}} +- {{domxref("Animation")}} |