Element.animate()

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

 

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

El método Element.animate() es un método abreviado para crear y reproducir una animación en un elemento. Devuelve la instancia creada de un objeto Animation .

Síntaxis

element.animate(keyframes, options); 

Parámetros

keyframes

Un Objeto formateado para representar un conjunto de fotogramas clave.

opciones
Puede ser un entero representando la duración de la animación  (en milisegundos), o un Objeto conteniendo una o más propiedades de sincronización: 
id Optional
Una propiedad única para animar(): a DOMString con la cual se hace referencia a la animación.
AnimationEffectTimingProperties.delay Optional
The number of milliseconds to delay the start of the animation. Defaults to 0.
AnimationEffectTimingProperties.direction Optional
Whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). Defaults to normal.
AnimationEffectTimingProperties.duration Optional
The number of milliseconds each iteration of the animation takes to complete. Defaults to 0.
AnimationEffectTimingProperties.easing Optional
The rate of the animation's change over time. Accepts the pre-defined values linearease, ease-in, ease-out, and ease-in-out, or a custom cubic-bezier value like cubic-bezier(0.42, 0, 0.58, 1). Defaults to linear.
AnimationEffectTimingProperties.endDelay Optional
The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to 0
AnimationEffectTimingProperties.fill Optional
Dictates whether the animation's effects should be reflected by the element(s) prior to playing (backwards), retained after the animation has completed playing (forwards), or both. Defaults to none.
AnimationEffectTimingProperties.iterationStart Optional
Describes at what point in the iteration the animation should start. 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration. Defaults to 0.0.
AnimationEffectTimingProperties.iterations Optional
The number of times the animation should repeat. Defaults to 1, and can also take a value of infinity to make it repeat infinitely.

Opciones Futuras

Las siguientes opciones actualmente no se han enviado a todos los sitios, pero se añadirán en un futuro próximo.

composite Optional
Determina como se combinan los valores entre esta animación y otra, animaciones independientes sin especificar la composición de su propia operación. Valores predeterminados a reemplazar.
  • añadir dicta un efecto aditivo, donde cada iteración sucesiva se basa en la anterior. Por ejemplo con transform, a translateX(-200px) no anularía un valor anterior rotate(20deg) que resultaría  translateX(-200px) rotate(20deg).
  • acumular es similar pero un poco más inteligente: blur(2) y blur(5) resultaría  blur(7), no blur(2) blur(5).
  • remplazar sobreescribe el valor anterior con el nuevo.
iterationComposite Optional
Determina como se construyen los valores de una iteración a otra en esta animación. . Se puede configurar para acumular o reemplazar (ver arriba). Valores predeterminados para reemplazar.
spacing Optional
Determina como los keyframes sin compensación temporal  deben ser distribuidos durante la duración de la animación. Valores predeterminados para distribuir.
  • distribuir las posiciones de los 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.
  • situar las posiciones de los 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.

 

Valor de retorno

Returns an Animation.

Ejemplo

En la demostración Down the Rabbit Hole (con la Web Animation API), utilizamos el método conveniente, animate() para inmediatamente crear y ejecutar una animación en el elemento  #tunnel  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.

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translateY(0px)' }, 
  { transform: 'translateY(-300px)' }
], { 
  // timing options
  duration: 1000,
  iterations: Infinity
});

Especificaciones

Specification Status Comment
Web Animations
The definition of 'animate()' in that specification.
Working Draft Initial definition

Compatibilidad en los Navegadores

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 36 ? 48.0 (48.0) ? 23 ?
id option 50.0 ? 48.0 (48.0) ? 37 ?
composite, iterationComposite, and spacing options No support No support No support No support No support No support
Feature Android Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support ? 39.0 39.0 48.0 (48.0) ? ? ? ?
id option No support 50.0 50.0 48.0 (48.0) ? ? ? ?
composite, iterationComposite, and spacing options No support No support No support No support No support No support No support No support

Ver También

Etiquetas y colaboradores del documento

 Colaboradores en esta página: SoftwareRVG
 Última actualización por: SoftwareRVG,