API de animaciones web de Dom: formatos de fotogramas clave

Esto es un tecnología experimental
Verifique cuidadosamente la tabla de compatibilidad del navegador antes de usarlo en producción.

Element.animate(), KeyframeEffect.KeyframeEffect(), y KeyframeEffect.setKeyframes() todos aceptan objetos formateados para representar un conjunto de fotogramas clave. Hay varias opciones para este formato, que se explican a continuación.

Sintaxis

Hay dos formas diferentes de formatear fotogramas clave:

1. Un array de objetos (fotogramas clave) que constan de propiedades y valores sobre los que iterar. Este es el formato canónico devuelto por el getKeyframes() método.

   element.animate([// from
       opacity:0,
       color:"#fff",// to
       opacity:1,
       color:"#000"],2000);

   Las compensaciones para cada fotograma clave se pueden especificar proporcionando un offset valor.

   element.animate([ opacity:1, opacity:0.1, offset:0.7, opacity:0],2000);

   Nota: offset los valores, si se proporcionan, deben estar entre 0.0 y 1.0 (inclusive) y ordenados en orden ascendente.

   No es necesario especificar un desplazamiento para cada fotograma clave. Los fotogramas clave sin un desplazamiento especificado se espaciarán uniformemente entre fotogramas clave adyacentes.

   La suavidad a aplicar entre fotogramas clave se puede especificar proporcionando una easing valor como se ilustra a continuación.

   element.animate([ opacity:1, easing:'ease-out', opacity:0.1, easing:'ease-in', opacity:0],2000);

   En este ejemplo, la aceleración especificada solo se aplica desde el fotograma clave donde se especifica hasta el siguiente fotograma clave. Alguna easing valor especificado en el options El argumento, sin embargo, se aplica en una sola iteración de la animación, durante toda la duración.

2. Un object conteniendo key-pares de valores que constan de la propiedad de animar y un array de valores sobre los que iterar.

   element.animate(
     opacity:[0,1],// [ from, to ]
     color:["#fff","#000"]// [ from, to ],2000);

   Usando este formato, el número de elementos en cada array no necesita ser igual. Los valores proporcionados se espaciarán de forma independiente.

   element.animate(
     opacity:[0,1],// offset: 0, 1
     backgroundColor:["red","yellow","green"],// offset: 0, 0.5, 1,2000);

   El especial keys offset, easing, y composite (descrito a continuación) se puede especificar junto con los valores de propiedad.

   element.animate(
     opacity:[0,0.9,1],
     offset:[0,0.8],// Shorthand for [ 0, 0.8, 1 ]
     easing:['ease-in','ease-out'],,2000);

   Después de generar un conjunto adecuado de fotogramas clave a partir de las listas de valores de propiedad, cada desplazamiento proporcionado se aplica al fotograma clave correspondiente. Si hay valores insuficientes o si la lista contiene null valores, los fotogramas clave sin compensaciones especificadas se espaciarán uniformemente como con el array formato descrito anteriormente.

   Si hay muy pocos easing o composite valores, la lista correspondiente se repetirá según sea necesario.

Implícito hacia / desde fotogramas clave

En las versiones más recientes del navegador, puede establecer un estado inicial o final solo para una animación (es decir, un único fotograma clave), y el navegador inferirá el otro extremo de la animación si puede. Por ejemplo, considere esta simple animación – el objeto Keyframe se ve así:

let rotate360 =[ transform:'rotate(360deg)'];

Solo hemos especificado el estado final de la animación y el estado inicial está implícito.

Atributos

Los fotogramas clave pueden especificar pares de propiedad-valor para cualquiera de los animatable css properties. Los nombres de las propiedades se especifican usando camel-case, por ejemplo background-color se convierte en backgroundColor y background-position-x se convierte en backgroundPositionX. Valores taquigráficos como margin también están permitidos.

Dos propiedades CSS excepcionales son:

• float, que debe escribirse como cssFloat ya que “flotar” es una palabra reservada en JavaScript. Es solo para referencia aquí, esto no tendrá ningún efecto en la animación ya que “float” no es una propiedad CSS animable.
• offset, que debe escribirse como cssOffset ya que “desplazamiento” representa el desplazamiento del fotograma clave como se describe a continuación.

El siguiente especial attributes también se puede especificar:

compensar

El desplazamiento del fotograma clave especificado como un número entre 0.0 y 1.0 inclusive o null. Esto es equivalente a especificar los estados de inicio y finalización en porcentajes en hojas de estilo CSS usando @keyframes. Si este valor es null o falta, el fotograma clave estará espaciado uniformemente entre fotogramas clave adyacentes.

aliviar

los función de temporización utilizado desde este fotograma clave hasta el siguiente fotograma clave de la serie.

compuesto

los KeyframeEffect.composite operación utilizada para combinar los valores especificados en este fotograma clave con el valor subyacente. Esto será auto si se está utilizando la operación compuesta especificada en el efecto.

Especificaciones

Compatibilidad del navegador

Las tablas BCD solo se cargan en el navegador

Ver también

• API de animaciones web
• Element.animate()
• KeyframeEffect.KeyframeEffect()
• KeyframeEffect.setKeyframes()