Durante los últimos meses, me he estado enseñando activamente a dibujar y animar formas SVG. He estado usando transiciones CSS, así como herramientas como D3.js, react-motion y GSAP, para crear mis animaciones.
Una cosa sobre las animaciones en general y la documentación que recomiendan estas y otras herramientas de animación es usar funciones de facilitación. He estado trabajando con ellos de alguna manera a lo largo de los años, pero para ser honesto, nunca sabría qué función elegir para qué tipo de animación. Además, no conocía la magia que encierra cada una de estas funciones, las notables diferencias entre ellas y cómo utilizarlas de forma eficaz. Pero estaba bien con eso porque sabía que las funciones de flexibilización de alguna manera “suavizaban” las cosas y, en su mayoría, hacía que mi trabajo pareciera realista.
Aquí, les presento lo que aprendí acerca de las funciones de simplificación en forma de un manual que espero les brinde una buena comprensión a medida que profundizan en las animaciones.
Cómo entré en funciones de facilitación
Traté de recrear un patrón llamado serpientes giratorias, una ilusión óptica que engaña a los cerebros para que piensen que los círculos giran y “bailan” cuando no lo están.
Rápidamente encontré un vacío en mi conocimiento al intentar construir esto. ¡Es dificil! Pero en el proceso, descubrí que las funciones de relajación juegan un papel importante.
Me dirigí a JavaScript para dibujar un montón de círculos concéntricos en SVG usando una biblioteca:
for (i = 1; i <= 10; i++) {
drawCircle({radius: i * 10});
}Este fue el resultado:
Pero eso claramente no se parece en nada a la imagen.
Mientras pensaba las cosas, me di cuenta de que estaba buscando una determinada propiedad. Quería que el cambio en el radio de los círculos concéntricos fuera pequeño al principio y luego se hiciera más grande a medida que aumentaba el radio.
Esto significa que el aumento lineal en el radio usando i++ no hará el truco. Necesitamos una fórmula mejor para derivar el radio. Entonces, mi próximo intento se veía así:
let i = 1;
let radiusList = [];
let radius = 0;
while (i <= 10) {
drawCircle({radius: i * 10});
if(i < 4) { i = i + 0.5 } else { i = i + 1 }
}… que me consiguió esto:
Hmm, todavía no es lo que quería. De hecho, esto se desvía aún más del patrón. Además, este código difícilmente es personalizable y difícil de mantener.
Entonces, recurrí a las matemáticas para un último intento.
Lo que necesitamos es una función que cambie el radio de forma orgánica y exponencial. Tuve un “¡Ajá!” momento y tal vez ya lo veas también. ¡Las funciones de aceleración harán esto!
El radio de cada círculo debe aumentar lentamente al principio, luego rápidamente a medida que los círculos van hacia afuera. Con la relajación, podemos hacer que las cosas se muevan a lo largo de una curva que puede ralentizar y acelerar en ciertos puntos.
Una búsqueda rápida en Google me llevó a esta esencia, que es una lista bien documentada de funciones de facilitación y realmente me salvó el día. Cada función toma un valor de entrada, ejecuta fórmulas. y proporciona un valor de salida. El valor de entrada debe estar entre 0 y 1. (Profundizaremos en este razonamiento más adelante).
Una función de aceleración cuadrática parecía prometedora porque todo lo que hace es cuadrar el valor que recibe:
function
Aquí está el código que terminé usando:
const easing =
return t*t
}
for(i = 0; i<=1; i=i+0.05) {
const r = easing(i) * 40;
drawCircle(r);
}
Y tenemos un ganador!
La diferencia entre este patrón y mis dos primeros intentos fue de día y de noche. ¡Hurra por facilitar funciones!
Esta pequeña experiencia me interesó mucho en qué más podían hacer las funciones de aceleración. Busqué en Internet información interesante. Encontré artículos antiguos, en su mayoría relacionados con Flash y ActionScript, que tenían demostraciones que mostraban diferentes gráficos de líneas.
Todo eso está bastante desactualizado, así que aquí está mi pequeño manual sobre funciones de simplificación.
¿Qué son las funciones de aceleración?
Son un tipo de función que toma una entrada numérica entre 0 y 1. Ese número pasa por la función especificada y devuelve otro número entre 0 y 1. Un valor entre 0-1 multiplicado por otro valor entre 0-1 siempre da como resultado un valor entre 0-1. Esta propiedad especial nos ayuda a realizar cualquier cálculo que queramos mientras permanecemos dentro de límites específicos.
El propósito de una función de aceleración es obtener valores no lineales desde entradas de valor lineal.
Este es el quid de lo que necesitamos saber sobre las funciones de aceleración. Las explicaciones y demostraciones de aquí en adelante están todas orientadas a llevar a casa este concepto.
Las funciones de flexibilización son una manifestación del concepto de interpolación en matemáticas. La interpolación es el proceso de encontrar el conjunto de puntos que se encuentran en una curva. Las funciones de aceleración esencialmente dibujan una curva desde el punto 0 al punto 1 interpolando (calculando) diferentes conjuntos de puntos a lo largo del camino.
Robert Penner fue el primero en definir funciones de aceleración y crear fórmulas para diferentes en su libro.
Los cinco tipos de funciones de aceleración
Hay cinco tipos de funciones de aceleración. Se pueden mezclar, invertir e incluso mezclar para formar funciones adicionales más complejas. Profundicemos en cada uno.
Funciones de suavizado lineal
Ésta es la forma más básica de relajación. Si el intervalo entre los puntos que interpolamos entre 0 y 1 es constante, entonces formamos una función de aceleración lineal.
Volviendo al ejemplo anterior de círculos concéntricos, aumentar el radio del círculo inicial en una cantidad constante (10px en ese ejemplo) hace una función lineal.
No debería sorprender que lineal sea la función de aceleración predeterminada. Son extremadamente simples porque no hay curva en la animación y el objeto se mueve en una dirección recta y consistente. Dicho esto, las funciones lineales tienen sus inconvenientes. Por ejemplo, las animaciones lineales tienden a parecer poco naturales o incluso robóticas porque los objetos de la vida real rara vez se mueven con un movimiento recto tan perfecto.
Funciones de aceleración cuadrática
Una función de aceleración cuadrática se crea multiplicando un valor entre 0 y 1 por sí mismo (por ejemplo, 0,5 * 0,5). Como aprendimos anteriormente, vemos que esto da como resultado un valor que también está entre 0 y 1 (por ejemplo, 0.5 * 0.5 = 0.25).
Para demostrarlo, hagamos 10 valores entre 0 y 1 con una función cuadrática.
const quad_easing =
let easing_vals = [];
for(let i = 0; i < 1; i +=0.1) {
easing_vals.push(quad_easing(i));
}
Aquí hay una tabla de todos los valores que obtenemos:
Valor de entrada (eje x)
Valor cuadrático simplificado (eje y)
0
0
0,1
0,01
0,2
0,04
0,3
0,09
0.4
0,16
0,5
0,25
0,6
0,36
0,7
0,49
0,8
0,64
0,9
0,81
1
1
Si tuviéramos que trazar este valor en un gráfico con el eje x como el valor original y el eje y como el valor facilitado, obtendríamos algo como esto:
¿Notaste algo? La curva es prácticamente la misma que las funciones de fácil acceso que encontramos comúnmente, ¡incluso en CSS!
Funciones de aceleración cúbica, cuartica y quíntica
Los últimos tres tipos de funciones de aceleración se comportan igual, pero funcionan con un valor diferente.
Una función de aceleración cúbica se crea multiplicando un valor entre 0 y 1 por sí mismo tres veces. En otras palabras, es un valor (por ejemplo, t), al cubo (por ejemplo, t3).
Las funciones cuarticas hacen lo mismo, pero a la potencia de 4. Entonces, si t es nuestro valor, estamos viendo t4
Y, como ya ha adivinado, una función quíntica se ejecuta a la potencia de 5.
La siguiente demostración le dará una manera de jugar con los cinco tipos de funciones para tener una buena visión de cómo se diferencian entre sí.
Consulte las funciones Pen Plotting Easing de Pavithra Kodmad (@pkodmad) en CodePen.
Entrando y saliendo ... ¡o ambos!
"Un easy-in-out es una deliciosa combinación de mitad y mitad, como un cono de helado de vainilla y chocolate".
- Robert Penner
La facilidad de entrada y salida pueden ser las animaciones de relajación más familiares. A menudo suavizan una línea lineal típica disminuyendo la velocidad al principio o al final (¡o ambos!) De una animación.
Las animaciones de entrada y salida fáciles se pueden crear utilizando cualquiera de las funciones no lineales que ya hemos visto, aunque las funciones cúbicas se utilizan con mayor frecuencia. De hecho, el CSS animation la propiedad viene con ease-in y ease-out valores desde el primer momento, a través de la animation-timing-function subpropiedad.
ease-in: Esta función comienza lentamente pero termina más rápido.ease-out: Esta función comienza rápido y termina más lento.ease-in-out: Esta función actúa como una combinación de las demás, comenzando rápido, disminuyendo en el medio y terminando más rápido.
Vea la demostración de Pen Easing de Pavithra Kodmad (@pkodmad) en CodePen.
Anímate y juega con ellos en este cubic-bezier.com.
Estas curvas también se pueden crear en JavaScript. Personalmente, me gusta y uso la biblioteca bezier-easing para ello. Easing.js es otro buen ejemplo, al igual que la biblioteca de D3 (con un buen ejemplo de Mike Bostock). Y, si jQuery es más lo tuyo, echa un vistazo a este complemento o incluso a este.
Mira, es bastante "fácil" -¡y!
Espero que este pequeño manual ayude a ilustrar las funciones de aceleración y la interpolación en general. Hay tantas formas en que estas funciones pueden hacer que las animaciones sean más naturales y realistas. Eche un vistazo a Easing.css para una interfaz de usuario que le permite crear curvas personalizadas y viene con una gran cantidad de opciones preestablecidas.
Espero que la próxima vez que use una función de aceleración, no sea una caja negra para usted. Ahora tiene una comprensión básica para utilizar las funciones de aceleración y abrir un montón de posibilidades al trabajar con animaciones.
Más sobre relajación
Aquí solo hemos arañado la superficie de las funciones de aceleración, pero hay otros buenos recursos aquí sobre Trucos de CSS que vale la pena revisar para subir de nivel aún más.
- Usos inteligentes para facilitar los pasos
- Haga que la animación CSS se sienta más natural
- facilidad de entrada; facilidad de entrada-salida
- El estado de los gradientes cambiantes con transiciones y animaciones CSS
(Visited 4 times, 1 visits today)