Presentamos linear(), una función de aceleración en CSS que interpola de forma lineal entre sus puntos, lo que te permite recrear los efectos de rebote y resorte.
Aceleraciones en CSS
Cuando animas o haces una transición de elementos en CSS, puedes controlar la velocidad a la que cambia un valor con una función de aceleración mediante las propiedades animation-timing-function y transition-timing-function.
Hay varias palabras clave disponibles como ajustes predeterminados en CSS: linear, ease, ease-in, ease-out y ease-in-out. Para crear tus propias curvas de aceleración, usa la función cubic-bezier() o adopta un enfoque basado en pasos con la función de aceleración steps().
Cuando se usan adecuadamente, las aceleraciones le dan a un elemento animado una sensación de peso, ya que parece acumular impulso.
No es posible crear curvas complejas, como efectos de rebote o de resorte, en CSS, pero gracias a linear(), puedes aproximarlas de manera sorprendentemente buena.
Introducción a linear()
Navegadores compatibles
- 113
- 113
- 112
- x
Una nueva forma de definir una aceleración en CSS es con linear(). Esta función acepta una serie de paradas, separadas por comas. Cada parada es un solo número que varía de 0 a 1. Entre cada parada, la interpolación se realiza de forma lineal y se explica el nombre de la función.
animation-timing-function: linear(0, 0.25, 1);
De forma predeterminada, estas paradas se distribuyen a la misma distancia. En el fragmento anterior, eso significa que el valor de salida de 0.25 se usará en la marca del 50%.
Visualizado, el gráfico de linear(0, 0.25, 1) se ve de la siguiente manera:
Si no deseas que las paradas se extiendan a la misma distancia, puedes incluir una longitud de las paradas. Cuando pasas un valor como una longitud de parada, defines su punto de partida:
animation-timing-function: linear(0, 0.25 75%, 1);
Aquí, no se usará un valor de salida de 0.25 en la marca 50%, sino en 75%.
Cuando especificas dos valores como una longitud de parada, defines los puntos de inicio y finalización:
animation-timing-function: linear(0, 0.25 25% 75%, 1);
Se usará un valor de salida de 0.25 del 25% al 75% en el tiempo.
Cómo crear curvas complejas con linear()
Si bien los ejemplos anteriores son aceleraciones muy simples, puedes usar linear() para recrear funciones de aceleración complejas de una manera muy simple, con el compromiso de perder algo de precisión.
Toma esta curva de aceleración de rebote, un tipo de aceleración que no se puede expresar directamente en CSS y se define con JavaScript:
function easing(pos) {
const t = 7.5625;
const e = 2.75;
return pos < 1 / e
? t * pos * pos
: pos < 2 / e
? t * (pos -= 1.5 / e) * pos + 0.75
: pos < 2.5 / e
? t * (pos -= 2.25 / e) * pos + 0.9375
: t * (pos -= 2.625 / e) * pos + 0.984375;
}
Aunque el código no te diga mucho, una visualización sí. Este es el resultado, representado como una curva azul:
Para simplificar la curva, le agregas varias paradas. Aquí, cada punto verde indica una parada:
Cuando se pasa a linear(), el resultado es una curva que se parece a la original, pero es un poco más áspera en los bordes.
Compara el recuadro verde animado con el azul y te darás cuenta de que no es tan fluido.
Sin embargo, si agregas suficientes paradas, puedes aproximarte bastante bien a la curva original. Aquí hay una versión actualizada:
Si solo duplicas la cantidad de paradas, obtendrás un resultado fluido.
El código que se usa para animar se ve así:
animation-timing-function: linear(
/* Start to 1st bounce */
0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
/* 1st to 2nd bounce */
0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
/* 2nd to 3rd bounce */
0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
/* 3rd bounce to end */
0.988, 0.984, 0.988, 1
);
Una herramienta que ayuda
Crear esta lista de paradas de forma manual sería muy engorroso. Afortunadamente, Jake y Adam crearon una herramienta para ayudarte a convertir una curva de aceleración en su contraparte linear().
La herramienta toma una función de aceleración de JavaScript o una curva SVG como entrada y genera la curva simplificada con linear(). Usa los controles deslizantes para establecer la cantidad de paradas que deseas y su precisión.
En la parte superior derecha, también puedes elegir uno de los ajustes predeterminados: Primavera, Rebote, Elástico simple o Aceleración enfatizada de Material Design.
Compatibilidad con Herramientas para desarrolladores
Las Herramientas para desarrolladores admiten la visualización y edición del resultado de linear(). Haz clic en el ícono para mostrar una información interactiva sobre la herramienta que te permite arrastrar por las paradas.
Esta función de Herramientas para desarrolladores está disponible en su envío con Chrome 114.
Foto de Howie Mapson en Unsplash