Generator CSS Cubic Bezier

Funcționarea curbelor de atenuare în CSS

O curbă de atenuare (easing curve) definește modul în care viteza unei tranziții sau a unei animații CSS evoluează pe parcursul duratei sale. În loc ca mișcarea să se desfășoare în mod liniar și monoton, o funcție de temporizare permite accelerări și decelerări care oferă interfețelor web o dinamică naturală.

Funcția CSS cubic-bezier(x1, y1, x2, y2) definește o curbă Bezier cubică utilizând patru coordonate care acționează ca puncte de control. Generatorul CSS Cubic Bezier permite modelarea vizuală a acestei curbe prin tragerea a două mânere direct pe ecran. Pe măsură ce ajustați curba, un punct se deplasează de-a lungul ei pentru a demonstra efectul de atenuare, rulând în paralel cu un punct de referință care se mișcă în ritm constant. Instrumentul generează automat codul CSS corespunzător, gata de a fi copiat în foile de stil.

Parametrii de intrare și regulile de validare

Forma curbei este determinată de coordonatele a două puncte de control intermediare, denumite în interfață Primul punct de control și Al doilea punct de control. Fiecare punct are o coordonată X (timpul) și o coordonată Y (progresul animației):

• X pentru Primul punct de control: Valoare numerică strict limitată între 0 și 1.
• Y pentru Primul punct de control: Valoare numerică cuprinsă între -0.70 și 1.70.
• X pentru Al doilea punct de control: Valoare numerică strict limitată între 0 și 1.
• Y pentru Al doilea punct de control: Valoare numerică cuprinsă între -0.70 și 1.70.

Curba pornește din colțul stânga-jos (coordonata implicită 0, 0, care reprezintă începutul animației) și se termină în colțul dreapta-sus (coordonata implicită 1, 1, care reprezintă starea finală). Timpul progresează de la stânga la dreapta, iar progresul animației se dezvoltă de jos în sus.

Interfața aplică reguli stricte pentru a preveni introducerea de valori matematice invalide în specificația CSS:

• Dacă introduceți o valoare în afara limitelor permise pentru axa X (de exemplu, valoarea 9 pentru primul punct de control X) și schimbați focalizarea câmpului (lose focus), valoarea este corectată automat la limita maximă de 1.
• Dacă goliți complet un câmp numeric și schimbați focalizarea, sistemul va restaura automat valoarea validă anterioară.
• Câmpurile goale sau valorile non-numerice sunt ignorate temporar, interfața așteptând introducerea unei valori complete și corecte.
• Puteți ajusta fin poziția mânerelor folosind tastatura: apăsarea tastei Săgeată stânga în timp ce un mâner de control este focalizat va decrementa valoarea acestuia (de exemplu, transformând-o în 0.99).

Rezultate generate și utilizarea presetărilor

Pe măsură ce modificați poziția punctelor de control, generatorul actualizează în timp real următoarele elemente vizuale și textuale:

• curba dumneavoastră: Reprezentarea grafică a traseului pe care îl va urma animația.
• cubic-bezier(x1, y1, x2, y2): Codul CSS final generat pe baza coordonatelor stabilite.
• Copied: Un indicator de stare care apare pe ecran după ce valoarea a fost copiată cu succes în clipboard. Procesul de copiere are doar o stare de succes, fără mesaje de eroare sau respingere.

Pentru a simplifica fluxul de lucru, puteți selecta direct presetări standard sau avansate:

• Cuvintele-cheie standard din CSS: ease, ease-in, ease-out și ease-in-out.
• Presetări cu efecte dinamice: Back In, Back Out și Back In-Out.
• De exemplu, selectarea presetării Back Out configurează automat coordonatele la valorile cubic-bezier(0.34, 1.56, 0.64, 1).

Efecte de depășire și limitele curbelor Bezier

În timp ce valorile axei X sunt blocate între 0 și 1 deoarece timpul nu poate curge înapoi sau depăși durata totală a tranziției, valorile axei Y pot depăși limitele standard. Permițând coordonatelor Y să coboare sub 0 (până la -0.70) sau să urce peste 1 (până la 1.70), se obțin efecte fizice deosebite:

• Anticiparea (pull-back): O valoare Y negativă trage curba sub linia de pornire, făcând elementul să se miște ușor în direcția opusă înainte de a porni spre destinație.
• Depășirea (overshoot): O valoare Y supraunitară (peste 1) forțează elementul să treacă dincolo de poziția sa finală, ca apoi să revină și să se stabilizeze la valoarea finală.

Cu toate acestea, o singură funcție cubic-bezier() are limitări matematice clare. Ea poate anticipa și depăși limita, dar se poate deplasa într-o singură direcție înainte de a se stabiliza. Nu este posibilă crearea unor efecte care își schimbă direcția de mai multe ori, cum ar fi un ricoșeu repetat (bounce) sau o oscilație elastică multiplă. Pentru astfel de comportamente complexe sunt necesare cadre cheie (@keyframes) sau funcții de tip linear() cu puncte de oprire multiple.

Integrarea în codul CSS

Valoarea generată se utilizează direct în proprietățile CSS destinate animațiilor și tranzițiilor. Aceasta poate fi aplicată prin proprietăți individuale sau prin proprietăți combinate (shorthand):

/* Utilizare în cadrul tranzițiilor */
.element {
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Utilizare în formă prescurtată */
.element-rapid {
  transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Utilizare în cadrul animațiilor */
.element-animat {
  animation-name: glisare;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

Confidențialitate și procesare locală

Toate calculele matematice, randarea grafică a curbei și simulările de mișcare sunt executate local, direct în browserul dumneavoastră. Datele introduse, coordonatele selectate sau presetările accesate nu sunt trimise către servere externe și nimic din ceea ce setați aici nu este încărcat pe BroBroGo.

Întrebări frecvente

Ce reprezintă cele două mânere și cele patru numere?

Curba pornește din stânga-jos (începutul) și ajunge în dreapta-sus (sfârșitul), timpul curgând de la stânga la dreapta, iar progresul de jos în sus. Cele două mânere sunt punctele de control care o curbează — fiecare are coordonate X și Y, formând împreună cubic-bezier(x1, y1, x2, y2). Coordonata X rămâne întotdeauna între 0 și 1, în timp ce Y poate depăși limita superioară sau inferioară pentru a crea un efect de depășire (overshoot) sau de retragere înainte de stabilizare.

Cum folosesc valoarea în codul meu CSS?

Copiați funcția cubic-bezier() și introduceți-o oriunde este necesară o funcție de temporizare — transition-timing-function, animation-timing-function sau în forma prescurtată, de exemplu transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Cuvintele-cheie ease, ease-in, ease-out și ease-in-out sunt doar curbe cubic-bezier fixe; selectarea uneia dintre aceste presetări vă va afișa valoarea exactă din spatele cuvântului-cheie.

Se poate crea un efect de tip ricoșeu (bounce) sau elastic?

Nu direct. O singură curbă cubic-bezier poate anticipa și depăși limita — presetările de tip „back” trag de un mâner dincolo de casetă tocmai pentru a obține acest lucru — dar se poate deplasa doar într-o direcție înainte de a se stabiliza. Efectele de tip ricoșeu (bounce) sau elastic își schimbă direcția de mai multe ori, lucru pe care o singură curbă cubic-bezier nu îl poate exprima; pentru acestea aveți nevoie de keyframes CSS sau de funcția linear() cu mai multe puncte de oprire.

De ce valoarea X nu poate fi mai mică de 0 sau mai mare de 1?

Axa X reprezintă progresia timpului în cadrul animației, raportată la durata totală a acesteia. Timpul începe de la 0% (pornirea animației) și se termină la 100% (sfârșitul animației), reprezentat prin intervalul numeric 0–1. Deoarece timpul nu poate curge înapoi și nu poate depăși durata totală alocată în mod absolut, specificația CSS limitează strict aceste coordonate pentru a asigura validitatea fizică a animației.