Generador de curvas de easing cubic-bezier
Diseña curvas de easing cubic-bezier de CSS con dos puntos de control arrastrables, ajustes preestablecidos, una vista previa de animación en vivo y código listo para copiar, todo en tu navegador.
Cargando Generador de curvas de easing cubic-bezier… Si no ocurre nada, activa JavaScript.
El easing es lo que separa una animación que se siente viva de una que se siente mecánica. En el mundo real nada se mueve a velocidad constante: los objetos aceleran al arrancar, desaceleran al detenerse y a veces se pasan de largo antes de asentarse. CSS captura esto con la función de temporización, y la función de temporización más flexible es cubic-bezier, que te permite describir toda una curva de aceleración con solo cuatro números. Esos números definen los dos puntos de control de una curva de Bezier cuyo eje horizontal es el tiempo y cuyo eje vertical es el progreso, y la forma de esa curva dicta exactamente cómo un elemento acelera y desacelera a lo largo de una transición o animación.
Preguntas frecuentes
¿Se sube algo cuando creo una curva de easing?
¿Qué significan los cuatro números de cubic-bezier?
¿Por qué puedo arrastrar los manejadores por encima de la parte superior o por debajo de la inferior, pero no a la izquierda o a la derecha de la caja?
¿Cuál es la diferencia entre ease-in, ease-out y ease-in-out?
¿Cómo creo un efecto con rebote o muelle?
¿La vista previa muestra el movimiento real?
¿Dónde uso el valor generado en mi CSS?
¿Las curvas cubic-bezier personalizadas funcionan en todos los navegadores?
Acerca de Generador de curvas de easing cubic-bezier
El problema con cubic-bezier es que los cuatro números son casi imposibles de imaginar en tu cabeza. Un valor como cubic-bezier(0.68, -0.55, 0.27, 1.55) no significa nada hasta que ves la curva que dibuja y el movimiento que produce. Este generador lo hace concreto. Muestra la curva en una cuadrícula interactiva con dos puntos de control arrastrables conectados a eventos de puntero, así que puedes tirar de los manejadores con el ratón o con un dedo y ver cómo la curva se remodela en tiempo real. La posición horizontal de cada manejador está limitada al rango válido de cero a uno que exige la especificación de CSS, mientras que la posición vertical es libre, que es lo que permite los efectos de anticipación y rebase donde el progreso baja por debajo de cero o sube por encima de uno.
Una fila de ajustes preestablecidos te ofrece las palabras clave de CSS con nombre como puntos de partida: linear para velocidad constante, ease para el valor predeterminado suave, y ease-in, ease-out y ease-in-out para los patrones de aceleración comunes. Desde cualquier ajuste preestablecido puedes arrastrar los manejadores para afinar la sensación. Es crucial que la herramienta incluya una vista previa en vivo: haz clic en la pista o en el botón de reproducción y un marcador se anima a través de ella usando tu curva exacta, de modo que juzgas el movimiento por cómo se mueve realmente y no por la geometría de la línea. El valor cubic-bezier generado y una declaración CSS completa se actualizan continuamente y se copian al portapapeles con un solo clic.
Toda la herramienta se ejecuta localmente en tu navegador. No hay nada que subir, ni cuenta, ni rastreo, y sigue funcionando sin conexión una vez cargada la página, porque toda la tarea consiste en calcular una curva y producir una breve cadena de CSS. La combinación de una curva visible, puntos arrastrables, ajustes preestablecidos con nombre y una vista previa de movimiento real convierte la abstracta sintaxis cubic-bezier de cuatro números en algo que puedes alcanzar al tacto, que es el camino más rápido hacia un easing que se vea bien en tu interfaz.
De las carrocerías de coches a la animación web: la larga vida de la curva de Bezier
Las matemáticas detrás de cada curva de easing de CSS no se desarrollaron para las pantallas, sino para la chapa metálica. A finales de los años 50 y en los 60, los fabricantes de coches franceses Renault y Citroen necesitaban una forma precisa de describir las superficies suaves y fluidas de las carrocerías para poder mecanizarlas con exactitud. Pierre Bezier, un ingeniero de Renault, popularizó y publicó las curvas que ahora llevan su nombre, mientras que Paul de Casteljau, trabajando en secreto en Citroen, desarrolló de forma independiente las mismas ideas y el elegante algoritmo para evaluarlas. Como el trabajo de de Casteljau se mantuvo confidencial, las curvas pasaron a conocerse como curvas de Bezier.
La idea clave es que una curva compleja puede definirse mediante un pequeño número de puntos de control, donde la curva pasa por los extremos y es atraída hacia, pero no a través de, los puntos intermedios. Esto hizo que las curvas de Bezier fueran perfectas para el campo emergente de los gráficos por ordenador. Se convirtieron en la base del dibujo vectorial en PostScript y PDF, de la herramienta pluma de cada programa de ilustración, de los contornos de las fuentes que estás leyendo ahora mismo y de las trayectorias de movimiento en el software de animación. Un puñado de puntos de control puede describir casi cualquier forma o movimiento suave, que es precisamente la economía que buscaban los ingenieros de los años 60.
CSS adoptó una curva cúbica de Bezier, una con dos puntos de control entre extremos fijos, como su función de temporización porque captura todo el vocabulario del movimiento natural con solo cuatro números. Las palabras clave con nombre no son mecanismos separados, sino simplemente etiquetas cómodas para valores cubic-bezier específicos: ease es cubic-bezier(0.25, 0.1, 0.25, 1), y linear es cubic-bezier(0, 0, 1, 1). Cuando arrastras los manejadores en una herramienta como esta, estás manipulando los mismos puntos de control que un ingeniero de automoción usó una vez para dar forma a un guardabarros, doblando ahora el tiempo y el progreso en lugar del metal para hacer que una interfaz se sienta receptiva y viva.