Generador de CSS Cubic Bezier

Què fa aquesta eina

El Generador de CSS Cubic Bezier és una eina visual que permet dissenyar una corba de transició CSS arrossegant dos punts de control. A mesura que s'ajusta la corba, un punt es mou al llarg d'aquesta per demostrar l'efecte de la transició al costat d'un altre punt que es mou a un ritme constant. Un cop definida la corba, l'eina proporciona el valor cubic-bezier() corresponent, el qual es pot copiar per utilitzar-lo directament al codi CSS.

Entrades de l'usuari i control de la corba

Per definir la forma de la corba de transició, l'usuari disposa dels següents controls i camps d'entrada:

• Arrossegament de dos controladors: Aquests controladors defineixen visualment la forma de la corba de transició.
• Primer punt de control X: Un valor numèric que s'ha de mantenir estrictament entre 0 i 1.
• Primer punt de control Y: Un valor numèric limitat entre -0.70 i 1.70.
• Segon punt de control X: Un valor numèric que s'ha de mantenir estrictament entre 0 i 1.
• Segon punt de control Y: Un valor numèric limitat entre -0.70 i 1.70.
• Selecció de preajustaments: Permet triar directament entre opcions predefinides com "ease", "ease-in", "ease-out", "ease-in-out", "Back In", "Back Out" o "Back In-Out".

Sortides i resultats de l'eina

L'eina genera diferents elements visuals i de text a partir de la configuració establerta:

• la seva corba: Una representació visual interactiva de la corba de transició que s'està dissenyant.
• cubic-bezier(x1, y1, x2, y2): El valor de la funció CSS cubic-bezier() que correspon exactament a la corba dibuixada.
• Copied: Un estat que es mostra en pantalla després de copiar correctament el valor de cubic-bezier(). El procés de còpia només disposa d'aquest estat d'èxit, sense missatges de rebuig o d'error explícits.

Regles de validació i comportament de la interfície

L'aplicació compta amb un conjunt de regles de comportament i límits estrictes per garantir que els valors introduïts siguin sempre vàlids per a CSS:

• Límits de la corba: La corba transcorre des de la part inferior esquerra (l'inici) fins a la part superior dreta (el final). El temps progressa d'esquerra a dreta, mentre que el progrés de l'animació va cap amunt.
• Restriccions dels valors X i Y: Els valors de l'eix X per als punts de control estan limitats estrictament a l'interval de 0 a 1. En canvi, els valors de l'eix Y es poden situar per sobre del límit superior o per sota del límit inferior (entre -0.70 i 1.70) per generar efectes de sobrepassat (overshoot) o de retrocés (pull-back).
• Correcció automàtica en perdre el focus: Si s'introdueix un valor fora de rang, com ara un 9 al camp del "Primer punt de control X", en perdre el focus del camp de text el valor es corregirà automàticament i passarà a ser 1.
• Restauració de valors buits: Si es buida un camp d'entrada numèric i es perd el focus, el sistema restaurarà l'últim valor vàlid que hi havia registrat. Els camps buits o amb caràcters no numèrics simplement esperaran que s'introdueixi un valor complet.
• Control amb el teclat: Quan un dels controladors de la corba està enfocat, prémer la tecla de direcció Esquerra reduirà el seu valor, per exemple, fins a 0.99.
• Valors dels preajustaments: Triar el preajustament "Back Out" estableix automàticament el valor de la funció a cubic-bezier(0.34, 1.56, 0.64, 1).

Casos d'ús i aplicació pràctica

Aquesta eina està especialment dissenyada per a perfils professionals i de desenvolupament que es troben en les següents situacions:

• Necessitat de crear efectes de transició personalitzats per a animacions o transicions CSS mitjançant les propietats transition-timing-function i animation-timing-function.
• Voler comprendre els valors numèrics exactes de cubic-bezier() que defineixen les paraules clau estàndard de CSS com ease, ease-in, ease-out i ease-in-out.
• Voler dissenyar animacions que facin un efecte d'anticipació (retrocés abans de començar) o de sobrepassat (anar més enllà de l'estat final abans d'estabilitzar-se).

Limitacions de les corbes Cubic Bezier

Tot i la seva flexibilitat, una única funció cubic-bezier() té limitacions físiques importants. Una sola corba pot anticipar el moviment i sobrepassar el límit, però només es pot moure en una única direcció i després estabilitzar-se. Això significa que no és possible utilitzar una única funció cubic-bezier() per expressar efectes complexos que inverteixen la direcció diverses vegades, com ara els efectes de rebot (bounce) o els moviments elàstics.

Privacitat i processament de dades

La privacitat de l'usuari està assegurada durant l'ús de l'eina. La corba es dibuixa directament al seu navegador. Cap dada que defineixi aquí es puja a BroBroGo.

Preguntes freqüents (FAQ)

Què signifiquen els dos controladors i els quatre números?

La corba va des de la part inferior esquerra (l'inici) fins a la part superior dreta (el final), on el temps avança d'esquerra a dreta i el progrés va cap amunt. Els dos controladors són els punts de control que la curven: cadascun té una X i una Y, de manera que junts formen cubic-bezier(x1, y1, x2, y2). La X es manté entre 0 i 1, mentre que la Y pot anar per sobre del límit superior o per sota de l'inferior per fer que el moviment es sobrepassi o es retregui abans d'estabilitzar-se.

Com utilitzo el valor al meu CSS?

Copieu el cubic-bezier() i col·loqueu-lo on vagi una funció de temporització: transition-timing-function, animation-timing-function o la forma abreujada, per exemple, transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Les paraules clau ease, ease-in, ease-out i ease-in-out són només corbes cubic-bezier fixes, de manera que en triar un d'aquestes preajustaments es mostra el valor exacte que hi ha darrere de la paraula clau.

Es pot crear un efecte de rebot o elàstic?

No per si sol. Un únic cubic-bezier pot anticipar i sobrepassar (els preajustaments "back" estiren un dels controladors més enllà de la caixa per fer precisament això), però només pot moure's en una direcció i després estabilitzar-se. Els efectes de rebot (bounce) o elàstics inverteixen la direcció diverses vegades, cosa que cap cubic-bezier individual pot expressar; per a això es necessiten fotogrames clau (keyframes) CSS o la funció linear() amb molts punts de parada.