Comprender las funciones de aceleración para animaciones y transiciones CSS

¿Alguna vez ha notado lo suaves y deliciosas que se ven las animaciones en un proyecto profesional bien hecho? Me acuerdo del sitio web de In Pieces, donde las animaciones se usan no solo como decoración, sino que también transmiten el mensaje sobre las especies en peligro de extinción de una manera impactante. El diseño y el estilo de la animación no solo son hermosos, sino que también fluyen de manera agradable y armoniosa. Es precisamente ese flujo en combinación con el diseño y la presentación lo que hace que la animación se vea asombrosa y natural. Ese es el poder de las funciones de aceleración, que también se denominan funciones de temporización.

Cuando escribimos propiedades de transición y animación en CSS, generalmente optamos por las funciones de aceleración predefinidas, como la aceleración ease-out porque es simple, se ven bien y funcionan bien en la mayoría de los casos. Sin embargo, tener una docena o más de elementos en una página con una animación que presenta la misma duración y valores de función de aceleración puede hacer que la interfaz de usuario sea un poco sosa y monótona. Los humanos responden mejor al movimiento natural, por lo que hacer que la animación y la transición sean más variadas y naturales dará como resultado una mejor experiencia para el usuario.

Si volvemos al ejemplo de In Pieces e inspeccionamos la hoja de estilo, podemos notar que varias funciones personalizadas de suavizado cubic-bezier se usan en combinación con las funciones predefinidas linear y ease-in tiempo de suavizado para lograr ese hermoso flujo de animación. Las animaciones no se verían tan bien si solo se usaran funciones de aceleración predefinidas en lugar de funciones de aceleración personalizadas. El siguiente video muestra el sitio web de In Pieces con todas las funciones de aceleración configuradas para ease-out . Aunque no hay nada de malo en las animaciones, observe que no son tan sorprendentes ni emocionantes como las animaciones originales.

En este artículo, profundizaremos en las funciones de aceleración de CSS, los tipos de funciones de aceleración y cómo crear funciones de aceleración personalizadas utilizando curvas Cubic Bezier.

Bajo el capó

Para comprender mejor las funciones de aceleración, debemos dar un paso atrás y echar un vistazo a los conceptos básicos de animación en CSS.

La animación se define mediante fotogramas clave que determinan cómo debe verse un elemento y cómo debe colocarse en ciertos puntos. Las transiciones CSS usan dos fotogramas clave (valor inicial y final), mientras que las animaciones CSS permiten un control más preciso con la regla @keyframes .

La duración de la animación determina la cantidad de tiempo que tarda la animación en pasar del primer fotograma clave al último. El siguiente gráfico muestra la conexión entre los fotogramas clave de la animación y la duración.

Hay muchas formas en que la animación puede progresar entre dos fotogramas clave. Por ejemplo, la animación puede tener una velocidad constante o puede moverse rápidamente al principio y ralentizarse cerca del final, o moverse lentamente al principio y luego acelerar hasta llegar al final, etc. Esta tasa o velocidad se define con las funciones de aceleración (funciones de temporización) . Si echamos un vistazo a la gráfica anterior, la función de aceleración está representada por la forma de la línea que une los dos puntos. Hemos usado la función lineal (línea recta) para el ejemplo anterior, pero también podemos usar una curva para conectar los fotogramas clave.

Como puede ver, hay muchas opciones y variaciones posibles para las funciones de aceleración de animación y las veremos a continuación.

Tipos de funciones de aceleración

Hay tres tipos principales de funciones de aceleración que se pueden usar en CSS:

• Funciones lineales ( linear ),
• Funciones Cubic Bezier (incluye ease , ease-in , ease-out y ease-in-out ),
• Funciones de escalera ( steps ).

Funciones lineales

Hemos cubierto funciones lineales en uno de los ejemplos anteriores, así que hagamos un resumen rápido. Con la función de temporización lineal, la animación pasa por los fotogramas clave a una velocidad constante. Como ya sabrá, la función de sincronización lineal se puede configurar fácilmente en CSS utilizando la palabra clave linear .

Funciones cúbicas de Bézier

Aunque las funciones de temporización lineal tienen sus casos de uso, pueden hacer que las animaciones se vean insípidas y poco naturales si se usan incorrectamente o con demasiada frecuencia. Como hemos visto en el ejemplo de In Pieces, los usuarios responden mejor al movimiento natural , es decir, funciones de temporización no lineales que pueden acelerar y desacelerar.

Las curvas Bezier se usan comúnmente en gráficos vectoriales, animaciones y robótica para crear fácilmente curvas y trayectorias suaves. En CSS estamos usando curvas Bezier definidas por cuatro puntos, que se conocen como curvas Cubic Bezier .

Las funciones de aceleración predefinidas de uso común, como la ease , la ease-in de entrada, la aceleración ease-out y la aceleración ease-in-out pertenecen a las funciones Cubic Bezier. Se pueden utilizar como una forma rápida de establecer una función de aceleración no lineal. Incluso una función lineal se puede definir usando una función cubic-bezier .

Aunque los valores predefinidos funcionan bien en muchos casos, saber cómo crear funciones Cubic Bezier personalizadas le brinda aún más control sobre la apariencia de la animación, lo que puede hacer que la animación se vea aún más impresionante e impactante.

En el siguiente ejemplo, he editado las animaciones para el ejemplo In Pieces para usar una función diferente de Cubic Bezier con diferentes valores. Puede ver cuán diferente se ve y se siente la animación con esta función de aceleración.

 cubic-bezier(0, 1.2, 1, 0.2)

Echemos un vistazo a la función cubic-bezier que se usa para definir curvas Cubic Bezier en CSS. La función Cubic Bezier está definida por cuatro puntos (pares de coordenadas x e y), pero solo definimos 2 puntos en la función cubic-bezier . ¿Porqué es eso?

Esto se debe a que el primer (P0) y el último punto (P3) se fijan al inicio (estado de animación inicial) y al final (estado de animación final) de la curva, ya que la animación debe terminar en un fotograma clave específico y dentro del especificado. duración. Con los dos puntos restantes (P1 y P2), podemos afinar la curva y suavizar la función, dando como resultado una velocidad de animación no lineal.

 cubic-bezier(x1, y1, x2, y2)

Las coordenadas X ( x1 y x2 ) representan la relación de tiempo y están limitadas a valores entre 0 y 1 (la animación no puede comenzar antes ni durar más de lo especificado), mientras que las coordenadas Y ( y1 e y2 ) representan la salida de la animación y sus valores, que son generalmente se establece en algún lugar entre 0 y 1, pero no se limita a ese rango. Podemos usar los valores de y1 e y2 que están fuera del rango de 0 y 1 para crear efectos de rebote.

Si la animación consta de varios fotogramas clave, definidos en la propiedad CSS @keyframes , la función de aceleración se aplicará a cada curva entre los dos puntos. Si estamos aplicando ease-out función de desaceleración a una animación con 3 fotogramas clave, la animación se acelerará al comienzo del primer fotograma clave y se desacelerará cerca del segundo fotograma clave y el mismo movimiento se repetirá para el siguiente par de fotogramas clave (segundo fotograma clave y el último fotograma clave).

Observe cómo se repite la función de aceleración entre cada par de fotogramas clave: primer y segundo fotogramas clave (primer par) y segundo fotograma clave y último fotograma clave (segundo par). La duración de la animación es la misma tanto para el ejemplo anterior como para el siguiente.

La creación de estas funciones puede ser una tarea compleja, por lo que probablemente no ajustará las coordenadas adivinando los parámetros cubic-bezier . Tendrá que usar una herramienta que lo ayude a lograr esos números mágicos para crear una función de tiempo que se ajuste perfectamente a su animación. Afortunadamente, existen numerosos navegadores y herramientas en línea para ayudarnos. Hablaremos de ellos en una de las siguientes secciones de este artículo.

Funciones de escalera

Las funciones de escalera permiten que la animación salte entre el número específico de fotogramas de forma discontinua. Puede pensar en ello como una animación de "tic-tac".

Por ejemplo, si echamos un vistazo a uno de los ejemplos anteriores donde un cuadro se mueve de 0px a 500px y limitamos las animaciones a 5 pasos, la animación saltará entre los siguientes 5 fotogramas clave: 0px, 100px, 200px, 300px y 400px posiciones.

Podemos lograr esto fácilmente con la función de steps en CSS.

 steps(number_of_frames)

 steps(5)

Esta función tiene una opción adicional para controlar qué fotogramas clave se incluyen. Como ha visto en el ejemplo anterior, la animación de un cuadro que se mueve de 0px a 500px con 5 pasos terminará en una posición de 400px. Si queremos que la animación comience desde 100 px y termine en una posición de 500 px, podemos usar la opción de término de salto como segundo argumento. El término de salto afecta cómo se seleccionarán los fotogramas clave de la línea de tiempo de la animación.

 steps(number_of_frames, jump_term)

 steps(5, jump-start)

Las siguientes opciones de términos de salto se pueden usar en la función de steps de CSS:

• jump-start
  La animación salta directamente desde el punto de inicio y el punto de inicio no es visible t. De nuestro ejemplo de ejemplo, los fotogramas clave serán 100 px, 200 px, 300 px, 400 px, 500 px.
• jump-end
  El último salto ocurre cuando la animación termina y no es visible. De nuestro ejemplo de ejemplo, los fotogramas clave serán 0px, 100px, 200px, 300px, 400px.
• jump-both
  Tanto el primer salto como el último ocurrirán cuando la animación comience y finalice respectivamente, por lo que no serán visibles. Los 5 saltos ocurrirán entre los puntos de inicio y finalización. De nuestro ejemplo, esos fotogramas clave serán 80 px, 165 px, 250 px, 335 px, 420 px.
• jump-none
  Tanto el primer como el último salto serán visibles. De nuestro ejemplo, esos fotogramas clave serán 0px, 125px, 250px, 375px, 500px.

El siguiente ejemplo muestra cómo varios términos de salto afectan el comportamiento de la animación. Se aplican varios términos de salto a la animación de 5 pasos con la misma duración.

Depuración de animaciones y herramientas útiles

Como hemos visto en el ejemplo de Cubic Bezier, necesitamos algún tipo de herramienta que nos ayude a ajustar los parámetros de la curva de Cubic Bezier para que podamos lograr la apariencia de la animación que queremos.

En esta sección, veremos las herramientas del navegador, los sitios web y los estilos CSS que deberían ayudarnos a hacer precisamente eso.

Herramientas del navegador

Las herramientas de desarrollo del navegador brindan funciones útiles de edición de funciones de simplificación listas para usar. Tenga en cuenta que solo las funciones Cubic Bezier están disponibles para su edición. Estas herramientas ofrecen una vista previa de animación rápida y simple para que el desarrollador pueda obtener comentarios instantáneos y ajustar la función de aceleración.

Chrome, Safari y Firefox también ofrecen una pestaña de Animaciones dedicada en las herramientas para desarrolladores que ofrece una descripción más detallada, incluidas las propiedades de la animación, la duración, la línea de tiempo, los fotogramas clave, la demora, etc.

Herramientas y sitios web útiles

Hay muchos recursos útiles en línea y ajustes preestablecidos de aceleración que pueden brindar mucha más variedad a las funciones de aceleración.

Los recursos en línea más populares incluyen Easing Functions Cheat Sheet de Andrey Sitnik e Ivan Solovev y CSS Easing Animation Tool de Matthew Lein. Estas herramientas ofrecen una amplia gama de ajustes preestablecidos que puede usar como base para su función de aceleración y luego ajustar la curva para que se ajuste a la línea de tiempo de su animación.

Animaciones y Accesibilidad

Cuando se trabaja con funciones de aceleración y animaciones en general, es importante abordar los requisitos de accesibilidad. Algunas personas prefieren navegar por la web con movimiento reducido, por lo que deberíamos proporcionar un respaldo adecuado. Esto se puede hacer fácilmente con la consulta de medios de movimiento reducido preferido ampliamente compatible. Esta consulta de medios nos permite eliminar la animación o asignar una animación diferente según las preferencias del usuario.

 .animated-element { animation: /* Regular animation */; } @media (prefers-reduced-motion) { .animated-element { /* Accessible animation with reduced motion */ } }

Modifiqué un ejemplo de reloj analógico de Alvaro Montoro para incluir una animación alternativa para los usuarios con el conjunto de indicadores prefers-reduced-motion .

En una animación predeterminada, el segundero del reloj se mueve constantemente, lo que puede causar dificultades a algunos usuarios. Podemos hacer que la animación sea mucho más accesible cambiando la función de sincronización de la animación a steps . En el siguiente ejemplo, a los usuarios con el indicador prefers-reduced-motion se les mostrará una animación donde el brazo de segundos marca cada cinco segundos.

 @media (prefers-reduced-motion) { .arm.second { animation-timing-function: steps(12); } }

Conclusión

Las funciones de aceleración, o funciones de temporización, cambian la apariencia de la animación al afectar la tasa de animación (velocidad). Las funciones de aceleración nos permiten crear animaciones que se asemejan al movimiento natural, lo que puede dar como resultado una experiencia de usuario mejorada y más agradable y una mejor impresión en los usuarios. Hemos visto cómo podemos usar valores predefinidos como linear , ease-out suave, ease , etc. para agregar rápidamente una función de tiempo y cómo crear funciones de aceleración personalizadas con la función cubic-bezier para animaciones más impresionantes e impactantes. También hemos cubierto las funciones de escalera que se pueden usar para crear animaciones de "tictac" y que rara vez se usan. Al crear animaciones, es importante tener en cuenta la accesibilidad y proporcionar una alternativa, animaciones que distraigan menos y menos movimiento para los usuarios con el conjunto de indicadores prefers-reduced-motion .

Hay muchos navegadores y herramientas en línea que pueden simplificar y agilizar la creación de funciones de aceleración personalizadas, por lo que crear animaciones con un flujo hermoso es más fácil que nunca. Si aún no lo ha hecho, le recomendaría experimentar con varias funciones de aceleración y crear su propia biblioteca de funciones de aceleración.

Referencias

• <easing-function> , MDN Web Docs
• "Trabajar con animaciones", MDN Web Docs
• "Animaciones web en Safari 13.1", Antoine Quint, WebKit
• "Los conceptos básicos de la aceleración", Paul Lewis, Fundamentos web, Google Developers
• "Inspeccionar animaciones", Kayce Basques, Chrome DevTools, Chrome Developers