CSS Cubic Bezier ģenerators

CSS paātrinājuma līkņu darbības principi un vadība

CSS pāreju un animāciju pamatā ir laika funkcijas (timing functions), kas nosaka, kā mainās animācijas ātrums tās norises laikā. Šis rīks vizuāli attēlo un ļauj konfigurēt trešās pakāpes Bezjē (cubic Bezier) līkni, ko izmanto CSS rekvizītos transition-timing-function un animation-timing-function. Līkne stiepjas no apakšējā kreisā stūra, kas apzīmē sākumu, līdz augšējam labajam stūrim, kas apzīmē beigas. Šajā koordinātu sistēmā laiks progresē no kreisās uz labo pusi, savukārt animācijas progress virzās no apakšas uz augšu.

Līknes formu nosaka divi vadības punkti, kurus lietotājs var regulēt, velkot abus rokturus vai manuāli ievadot skaitliskās vērtības. Katram vadības punktam ir divas koordinātas:

• Pirmais vadības punkts (x1, y1)
• Otrais vadības punkts (x2, y2)

Šo punktu koordinātas tieši ietekmē animācijas paātrinājumu un palēninājumu. Kamēr laika ass vērtības (X koordinātas) ir stingri ierobežotas diapazonā no 0 līdz 1, progresa ass vērtības (Y koordinātas) var pārsniegt šīs robežas, nodrošinot plašākas vizuālo efektu iespējas.

Ievades parametru robežas un vadības noteikumi

Lai nodrošinātu derīgu CSS kodu, rīks piemēro stingrus matemātiskos ierobežojumus ievades laukiem:

• Pirmā un otrā vadības punkta X vērtības drīkst būt tikai robežās no 0 līdz 1. Ja mēģināsiet ievadīt vērtību, kas pārsniedz šo diapazonu (piemēram, skaitli 9), un pēc tam noņemsiet fokusu no ievades lauka, vērtība automātiski tiks koriģēta uz maksimāli pieļaujamo, kas ir 1.
• Pirmā un otrā vadības punkta Y vērtības drīkst būt robežās no -0.70 līdz 1.70. Šis diapazons ļauj izvirzīt vadības punktus ārpus standarta rāmja, lai radītu specifiskus kustības efektus.

Ja skaitliskās ievades lauks tiek pilnībā iztukšots un fokuss tiek zaudēts, sistēma automātiski atjauno iepriekšējo derīgo vērtību. Tukšas vai ne-skaitliskas rakstzīmes netiek apstrādātas, un rīks gaida pilnīgas, korektas vērtības ievadi. Precīzai vērtību regulēšanai var izmantot tastatūru: kad vadības punkta rokturis ir fokusā, nospiežot kreiso bultiņas taustiņu, vērtība tiek samazināta (piemēram, mainoties uz 0.99).

Sagataves un to matemātiskās vērtības

Rīks piedāvā izvēlēties no vairākām iepriekš definētām sagatavēm, kas atbilst standarta CSS atslēgvārdiem vai sarežģītākiem kustības modeļiem:

• ease, ease-in, ease-out un ease-in-out — standarta CSS paātrinājuma līknes.
• Atpakaļ iekšā, Atpakaļ ārā un Atpakaļ iekšā-ārā — sagataves, kas izmanto paplašināto Y ass diapazonu.

Piemēram, izvēloties sagatavi "Atpakaļ ārā", tiek iestatīta precīza funkcija cubic-bezier(0.34, 1.56, 0.64, 1). Šī līkne pārsniedz progresa robežu (Y vērtība ir 1.56), radot vizuālu efektu, kur animētais objekts vispirms pārvietojas garām savam gala mērķim un pēc tam atgriežas atpakaļ galapunktā.

Vizuālais priekšskatījums un rezultātu iegūšana

Darba gaitā rīks nodrošina tūlītēju vizuālo atgriezenisko saiti:

• jūsu līkne — grafisks attēlojums, kurā redzama izveidotā paātrinājuma līkne.
• Kustības salīdzinājums — priekšskatījumā blakus pārvietojas divi punkti. Viens punkts pārvietojas vienmērīgā, nemainīgā ātrumā (lineāri), savukārt otrs punkts precīzi seko jūsu izveidotajai paātrinājuma līknei. Tas ļauj reāllaikā novērtēt izveidotā paātrinājuma dinamiku.
• cubic-bezier(x1, y1, x2, y2) — rīks uzreiz ģenerē gatavu CSS funkcijas kodu.

Nokopējot šo vērtību, saskarnē parādās statuss "Copied". Kopēšanas procesam ir tikai veiksmīga izpildījuma stāvoklis, bez kļūdu paziņojumiem.

Pārlēkšanas efekti un matemātiskie ierobežojumi

Izmantojot Y koordinātas, kas ir mazākas par 0 vai lielākas par 1, var panākt divus svarīgus efektus:

1. Atpakaļvilkšana (pull-back / anticipation): Ja Y1 vai Y2 ir negatīvs (līdz -0.70), objekts animācijas sākumā nedaudz pakāpjas pretējā virzienā, pirms sāk kustību uz priekšu.
2. Pārlēkšana (overshoot): Ja Y vērtība pārsniedz 1 (līdz 1.70), objekts animācijas beigās pārsniedz savu mērķa pozīciju un pēc tam atgriežas atpakaļ.

Tomēr vienai cubic-bezier() funkcijai ir būtiski matemātiski ierobežojumi. Tā spēj nodrošināt tikai vienu apsteidzošu kustību sākumā un vienu pārlēkšanu beigās, pēc kuras objekts apstājas. Ar šo funkciju nav iespējams izveidot efektus, kas vairākas reizes maina virzienu, piemēram, elastīgu svārstību vai atlekšanas (bounce) efektu. Šādu sarežģītu kustību realizācijai ir nepieciešami citi risinājumi.

Datu apstrāde un privātums

Līkne tiek zīmēta tieši jūsu pārlūkprogrammā. Nekas no tā, ko šeit iestatāt, netiek augšupielādēts BroBroGo. Visi aprēķini, vizualizācija un koda ģenerēšana notiek lokāli lietotāja ierīcē.

---

Biežāk uzdotie jautājumi

Ko nozīmē abi rokturi un četri skaitļi?

Līkne stiepjas no apakšējā kreisā stūra (sākums) līdz augšējam labajam (beigas), kur laiks iet no kreisās uz labo pusi, bet progress — uz augšu. Abi rokturi ir vadības punkti, kas to izliec — katram ir X un Y, tāpēc kopā tie veido cubic-bezier(x1, y1, x2, y2). X paliek starp 0 un 1, savukārt Y var iet virs augšējās vai zem apakšējās malas, lai radītu pārlēkšanas vai atpakaļvilkšanas efektu pirms apstāšanās.

Kā es varu izmantot šo vērtību savā CSS?

Nokopējiet cubic-bezier() un ievietojiet to jebkur, kur nepieciešama laika funkcija (timing function) — transition-timing-function, animation-timing-function vai saīsinātajā pierakstā, piemēram, transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Atslēgvārdi ease, ease-in, ease-out un ease-in-out ir tikai fiksētas cubic-bezier līknes, tāpēc, izvēloties kādu no šīm sagatavēm, tiks parādīta precīza vērtība aiz šī atslēgvārda.

Vai ar to var izveidot atlekšanas vai elastības efektu?

Ne gluži paša spēkiem. Viena cubic-bezier līkne var paredzēt kustību un pārsniegt mērķi (pārlēkt pāri) — "back" sagataves pavelk vienu rokturi ārpus rāmja, lai to izdarītu —, taču tā var kustēties tikai vienā virzienā un tad apstāties. Atlekšanas (bounce) un elastīgie efekti maina virzienu vairākas reizes, ko viena cubic-bezier līkne nespēj izteikt; tiem ir nepieciešami CSS keyframes vai linear() funkcija ar daudziem punktiem.