Visualización de la facilitación de animaciones

4 marzo, 2017 1:45 por

Esta es una traducción del artículo original publicado en Mozilla Hacks.

La facilitación (o función de tiempo) de una animación es la que dicta la forma en que progresa a través del tiempo.

Por ejemplo, una facilitación lineal implica que la animación se ejecuta a la misma velocidad durante toda su duración. Esto significa que si un elemento no se mueve al principio y después comienza a moverse, lo hará instantáneamente, como si ni siquiera tuviera que acelerar. A menudo, los desarrolladores web escogen otras facilitaciones que parecen más naturales, más reales. Hay algunas predeterminadas como ease, ease-in, ease-out, y ease-in-out, e incluso es posible crear la tuya propia utilizando la función cubic-bezier().

Vale la pena señalar que el panel de inspector en Firefox ya te permite editar la facilitación de las animaciones en la vista de reglas del CSS.

A partir de Firefox 52 el panel de inspector de animaciones muestra la facilitación de las animaciones directamente dentro de su línea de tiempo:

Facilitación en panel de animaciones

Esto es muy útil para obtener más información de las animaciones de un simple vistazo.

También hay una útil información que aparece cuando se coloca el puntero sobre las animaciones. Contiene toda la información temporal que podrías necesitar para una animación dada: incluidas su facilitación, y también su duración, iteraciones, retrasos, dirección, etc.

Información temporal

A continuación se presentan varios ejemplos de como se representa la facilitación en la línea de tiempo:

  • Una animación que se repite 3 veces, con una facilitación ease-in-out:

3 iteraciones ease-in-out

  • Una animación infinita , con facilitación lineal:

Animación lineal infinita

  • Una animación que se repite 5 veces con una dirección alternativa, facilitación y avance de relleno ease:

Alternado con ease

Y aquí hay un video que muestra varios tipos de facilitación en el panel de inspector de animación:

Acerca de los retrasos

Hay dos tipos de retrasos que puedes utilizar en las animaciones: delay y end-delay.

Este último sólo puede ser utilizado con animaciones creadas con la API Web Animations. end-delay es útil para sincronizar varias animaciones, por ejemplo, cuando deseas que una animación comience exactamente 1 segundo después de que haya finalizado la primera.

Tanto delay como end-delay pueden tener un valor positivo o negativo.

El inspector de la animación ahora también representa esos retrasos visualmente. Aquí hay unos pocos ejemplos:

  • Retraso positivo:

Retraso positivo

  • Retraso final positivo:

Retraso final positivo

  • Retraso negativo:

Retraso negativo

  • Retraso final negativo:

Retraso final negativo

Facilitación de efecto vs. facilitación de cuadro clave

Hay dos modos de aplicar la facilitación a una animación: ya sea a través de la iteración completa de una animación, afectando a todas las propiedades por igual (facilitación de efecto), o entre cuadros clave (keyframes), únicamente afectando a las propiedades especificadas en esos cuadros clave (facilitación de cuadro clave).

Las animaciones CSS únicamente permiten la facilitación de cuadro clave y esto confunde a mucha gente. Casi todos asumen que la función animation-timing-function produce facilitación de efecto, pero en su lugar hace facilitación de cuadro clave. Sin embargo, las animaciones creadas utilizando la API de Web Animations pueden utilizar ambos tipos de facilitación.

En este momento, el inspector de la animación solo muestra la facilitación de efecto. Esto implica que incluso si defines una animación CSS con la función no lineal animation-timing-function, la línea de tiempo mostrará una progresión lineal.

El bug 1309468 abordará esto y hará también la facilitación de cuadro clave visible en el inspector de la animación. Serán bienvenidos sus pensamientos y comentarios constructivos en esta sección de comentarios, o enviando un tweet a @FirefoxDevTools.

The following two tabs change content below.

Compartir artículo:

Start the discussion at foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa