Una guía visual para facilitar las funciones en Webflow

March 2, 2024

· 5 min

En esta publicación, analizaremos rápidamente la historia de la simplificación de funciones y profundizaremos en cómo funciona cada función.

Hace tiempo que tenemos este proyecto de simplificación de funciones en nuestra cuenta. Lo usamos como una buena guía visual cuando recién comenzábamos con Webflow. Cuando nos topamos con ella el otro día, nos pareció una buena idea desarrollarla un poco y compartirla como una guía visual de las funciones de simplificación predeterminadas en Webflow. A continuación encontrarás una guía visual, así como un enlace a una herramienta más completa que se puede clonar, y una lista de las funciones de simplificación disponibles con una descripción de lo que hacen. Pero empecemos con un poco de la historia de las funciones de simplificación.

Las raíces matemáticas

En el corazón de las funciones de flexibilización se encuentra una base matemática rica. El concepto de flexibilización se remonta al estudio de la física y el cálculo, donde los principios de la aceleración y la desaceleración rigen el movimiento de los objetos en el mundo real. Los matemáticos y físicos desarrollaron fórmulas para describir estos movimientos naturales, sentando las bases para lo que eventualmente se aplicaría a la animación digital. Las funciones cuadrática, cúbica, cuártica y quíntica, entre otras, ofrecen una base matemática para simular las sutilezas del movimiento y la velocidad, lo que permite a las animaciones superar las limitaciones de la progresión lineal.

La evolución de la animación

La transición de las matemáticas a la animación comenzó con técnicas tradicionales dibujadas a mano. Los primeros animadores, como los de la época pionera de Disney, aplicaron intuitivamente los principios de la flexibilización para dar vida a sus creaciones, mucho antes de que se acuñara formalmente el término «flexibilización». Observaron el movimiento del mundo real y capturaron su esencia cuadro por cuadro para crear animaciones que fluyeran de forma natural y transmitieran emoción y carácter. Esta atención meticulosa a la dinámica del movimiento sentó las bases para simplificar las funciones, aunque en aquella época todo se hacía de forma manual.

La revolución digital

Con la llegada de los gráficos por ordenador y la animación digital, los principios de la flexibilización encontraron un nuevo terreno para florecer. La era digital permitió controlar y manipular con precisión las curvas de movimiento, lo que permitió a los animadores y diseñadores implementar funciones matemáticas complejas con facilidad (juego de palabras). Los programas informáticos comenzaron a incorporar estas funciones de flexibilización, ofreciendo a los usuarios opciones predefinidas, como «facilitar la entrada», «la salida» y la opción «elástica», para animar objetos de una manera visualmente atractiva.

Simplificación de funciones en el diseño de la interfaz de usuario

La aplicación de las funciones de simplificación se extendió más allá de la animación tradicional y encontró un papel crucial en el diseño de la interfaz de usuario (UI) y la experiencia del usuario (UX). A medida que las interfaces digitales se hicieron más interactivas, los diseñadores reconocieron la importancia de simplificar las funciones para que las transiciones parecieran más naturales e intuitivas. La expansión fluida de un menú, el rebote de una notificación o la aparición gradual de un cuadro de diálogo: todas estas interacciones se beneficiaban de la simplificación de las funciones, que mejoraban la experiencia del usuario al imitar la fluidez del mundo natural.

El lienzo digital actual

Hoy en día, las funciones de simplificación son una herramienta indispensable en el conjunto de herramientas del diseñador digital, ya que se integran perfectamente en plataformas de diseño web como Webflow, bibliotecas de animación y software de diseño de interfaces de usuario. Permiten a los diseñadores crear experiencias digitales envolventes y atractivas que capturan la imaginación del usuario y mantienen su atención. Desde las ecuaciones matemáticas del pasado hasta las páginas web interactivas de hoy, las funciones de simplificación han viajado en el tiempo, evolucionando y adaptándose, pero su misión principal sigue siendo la misma: dar vida al mundo digital, haciéndolo tan rico y dinámico como el mundo que hay fuera de nuestras ventanas.

Puedes desplazarte por la interacción de arriba o ver la proyecto completo y clonable aquí.

Finalmente llegamos al meollo, ¿qué hace cada función de flexibilización?

LINEAL (NINGUNO)

Origen y significado: Tan sencillo como una carretera en el desierto. Lineal implica una tasa de cambio uniforme: sin aceleración ni desaceleración, solo un ritmo constante de principio a fin.
Qué hace: Mueve o atenúa objetos a una velocidad constante. Perfecto para quienes aprecian la simplicidad y la previsibilidad en sus animaciones.

FACILIDAD

Origen y significado: Piense en darse un baño caliente. Comienza despacio, se acelera y luego vuelve a disminuir la velocidad, lo que proporciona una transición suave y reconfortante.
Qué hace: Añade un toque natural a las animaciones, ya que comienzan despacio, se vuelven más rápidas en la mitad y disminuyen la velocidad al final. ¡Es la opción por defecto por una razón!

ENTRAR

Origen y significado: Como entrar de puntillas en ese baño antes mencionado, se trata de empezar con cuidado.
Qué hace: Inicia la animación lentamente y, a continuación, acelera. Ideal para llamar la atención sobre los elementos que aparecen en la pantalla.

RELAJARSE

Origen y significado: Lo contrario de relajarse, como relajarse por fin en la bañera.
Qué hace: Comienza de forma más brusca y desacelera hasta detenerse suavemente. Ideal para los elementos que abandonan la escena.

ENTRAR Y SALIR CON FACILIDAD

Origen y significado: Combina lo mejor de ambos mundos: un comienzo y un final suaves con un poco de entusiasmo en el medio.
Qué hace: Comienza y termina lentamente, con una aceleración en el medio. El experto en todo lo que se refiere a transiciones que necesitan ser dinámicas y fluidas.

CUÁDRUPLE

Origen y significado: Quad proviene de «cuadrático», en referencia a un polinomio de segundo grado. Es como dar un paseo suave que poco a poco acelera el ritmo.
Qué hace: Las animaciones con la función de atenuación QUAD comienzan despacio y se aceleran suavemente a medida que avanzan, siguiendo una curva cuadrática. Es más sutil que algunas de sus contrapartes más dramáticas, y es perfecta para transiciones suaves y movimientos sencillos.

CÚBICO

Origen y significado: Esta función, que proviene de «cúbico», se refiere a un polinomio de tercer grado. Imagina un automóvil que acelera suavemente desde una señal de stop: arranca despacio pero aumenta la velocidad de forma más notable que un QUAD.
Qué hace: Las animaciones de CUBIC comienzan incluso con más suavidad que las de QUAD, pero se aceleran más rápido, creando una curva más pronunciada. Esto las hace ideales para llamar la atención y, al mismo tiempo, mantener una progresión suave.

CUARTO DE GALÓN

Origen y significado: Quart proviene de «cuártico», un polinomio de cuarto grado. Es como si un velocista saliera de un bloque de bloques, con una acumulación gradual que conduce a una rápida aceleración.
Qué hace: Con la función de aceleración QUART, las animaciones se inician muy lentamente y, a continuación, aumentan rápidamente la velocidad, creando una curva de aceleración pronunciada. Es ideal para movimientos dinámicos que necesitan enfatizar un cambio o una llegada significativos.

QUINTAR

Origen y significado: Quint se deriva de «quíntico» y se refiere a un polinomio de quinto grado. Imagínese el lanzamiento de un cohete: una pausa momentánea en la plataforma de lanzamiento antes de un poderoso ascenso.
Qué hace: Las animaciones de QUINT tienen el inicio más lento de este grupo, pero luego se aceleran drásticamente, lo que ofrece una curva muy pronunciada. Esta función es perfecta para entradas espectaculares o cuando se desea crear un fuerte impacto visual.

SENO

Origen y significado: El seno se basa en la onda sinusoidal matemática, conocida por su naturaleza suave y oscilante. Es como el suave flujo y reflujo de las olas en una playa.
Qué hace: La flexibilización SINE proporciona una oscilación armónica suave en la velocidad de la animación. Esto crea un movimiento natural y orgánico que es relajante y agradable a la vista, ideal para transiciones sutiles.

EXPOSICIÓN

Origen y significado: Expo es la abreviatura de «exponencial», lo que indica un crecimiento a un ritmo cada vez más rápido. Imagine la curva acelerada de una montaña rusa mientras corre hacia abajo.
Qué hace: Las animaciones de la EXPO comienzan casi imperceptiblemente y luego explotan en movimiento, lo que proporciona una curva de aceleración extremadamente pronunciada. Esta función es ideal para transiciones rápidas y de alta energía que necesitan captar la atención rápidamente.

CIRCO

Origen y significado: Circ se refiere a «circular» y representa el movimiento de moverse hacia adentro o hacia afuera a lo largo de una trayectoria circular. Piense en el arco suave de una pelota que se lanza por el aire.
Qué hace: Las animaciones de CIRC Easing se mueven con la suavidad y precisión de un arco circular, comienzan despacio y se aceleran de una manera natural y elegante. Es perfecto para los elementos que necesitan moverse o hacer la transición con una sensación de gracia y fluidez.

VOLVER

Origen y significado: Retroceder implica un movimiento que va más allá del punto inicial o final y luego regresa, como tirar una honda hacia atrás antes de soltarla.
Qué hace: La flexibilización de la espalda hace que las animaciones sobrepasen a su objetivo antes de asentarse en su lugar, lo que crea un divertido efecto de rebote. Añade una calidad vivaz y elástica a las transiciones, haciendo que parezcan más dinámicas y atractivas.

ELÁSTICO

Origen y significado: Elástico, como su nombre indica, encarna el comportamiento de una banda elástica que se estira y se rompe hacia atrás. Es la reina del drama de las funciones de flexibilización, ya que ofrece un movimiento exagerado y llamativo.
Qué hace: Las animaciones de ELASTIC se estiran y rebotan con una elasticidad exagerada y vivaz, lo que hace que los elementos parezcan moverse con la energía y la flexibilidad de una goma elástica. Esta función es perfecta para crear animaciones llamativas y vibrantes que añadan un toque de fantasía y diversión.

REBOTAR, REBOTAR MÁS ALLÁ

Origen y significado: Al igual que una pelota que rebota, estas interacciones imitan la física de rebotar contra una superficie, y Bounce Past añade un poco de dramatismo.
Qué hace: Crea un efecto divertido y atractivo en el que los elementos rebotan antes de asentarse en su lugar. Añade vida y energía a la página.

BALANCEARSE DE A, BALANCEARSE DE, BALANCEARSE A

Origen y significado: Imagínese un péndulo o un balanceo: estas interacciones capturan la esencia del movimiento de balanceo, ya sea de un lado a otro, comenzando o terminando con un balanceo.
Qué hace: Añade un movimiento elegante y oscilante a los elementos, creando una sensación de ritmo y fluidez. Ideal para llamar la atención de una manera sutil y sofisticada.

Y eso es básicamente eso: la historia de la flexibilización de las funciones es una fascinante saga de innovación, un entrelazamiento del arte y la ciencia, que refleja la búsqueda perdurable de la humanidad por reproducir la belleza y la complejidad del movimiento en nuestras creaciones