Gjenerator i CSS Cubic Bezier

Çfarë është Gjeneratori i CSS Cubic Bezier dhe si funksionon?

Gjeneratori i CSS Cubic Bezier është një vegël vizuale që ju lejon të krijoni një kurbë zbutjeje (easing curve) për CSS duke tërhequr dy pika kontrolli. Ndërsa rregulloni kurbën, një pikë lëviz përgjatë saj për të demonstruar efektin e zbutjes, krahas një pike tjetër që lëviz me një ritëm të qëndrueshëm. Pas formësimit të kurbës, veglat ofrojnë vlerën përkatëse të funksionit cubic-bezier(), të cilën mund ta kopjoni për ta përdorur direkt në kodin tuaj CSS.

Ky mjet është i dizajnuar posaçërisht për:

• Krijuesit që duan të ndërtojnë efekte zbutjeje të personalizuara për tranzicionet ose animacionet në CSS.
• Personat që dëshirojnë të kuptojnë vlerat e sakta të cubic-bezier() që qëndrojnë pas fjalëve kyçe standarde të kohës në CSS, si ease, ease-in, ease-out dhe ease-in-out.
• Zhvilluesit që kërkojnë të zbatojnë një animacion që parashikon (anticipates) ose tejkalon (overshoots) gjendjen e tij përfundimtare.

Kontrollet e hyrjes dhe përdorimi i ndërfaqes

Për të krijuar kurbën tuaj të zbutjes, ju mund të ndërveproni me elementet e mëposhtme të ndërfaqes:

• Tërhiqni dy dorezat: Këto doreza kontrollojnë drejtpërdrejt formën e kurbës së zbutjes.
• Pika e parë e kontrollit X: Një vlerë numerike midis 0 dhe 1.
• Pika e parë e kontrollit Y: Një vlerë numerike midis -0.70 dhe 1.70.
• Pika e dytë e kontrollit X: Një vlerë numerike midis 0 dhe 1.
• Pika e dytë e kontrollit Y: Një vlerë numerike midis -0.70 dhe 1.70.
• Zgjedhja e parazgjedhjeve: Mund të zgjidhni shpejt nga opsionet e gatshme si "ease", "ease-in", "ease-out", "ease-in-out", "Back In", "Back Out", ose "Back In-Out".

Rezultatet e gjeneruara

Ndërsa ndryshoni vlerat ose lëvizni dorezat, mjeti përditëson automatikisht këto rezultate:

• kurba juaj: Një paraqitje vizuale e kurbës suaj të zbutjes.
• cubic-bezier(x1, y1, x2, y2): Vlera e saktë e funksionit CSS cubic-bezier() që korrespondon me kurbën e formësuar.
• Copied: Një status që shfaqet në ndërfaqe pasi keni kopjuar me sukses vlerën e cubic-bezier(). Procesi i kopjimit ka vetëm një gjendje suksesi dhe nuk shfaq mesazhe të qarta refuzimi apo dështimi.

Rregullat e kurbës dhe sjellja e fushave të hyrjes

Gjatë përdorimit të gjeneratorit, zbatohen disa rregulla strikte matematikore dhe sjellje të ndërfaqes:

• Kurba fillon nga këndi majtas-poshtë (fillimi) dhe përfundon në këndin djathtas-lart (fundi). Koha përparon nga e majta në të djathtë, ndërsa progresi i animacionit shkon lart.
• Vlerat e boshtit X për pikat e kontrollit duhet të mbeten gjithmonë midis 0 dhe 1. Nëse vendosni një vlerë jashtë këtij kufiri (për shembull, duke shkruar 9 te "Pika e parë e kontrollit X") dhe pastaj largoni fokusin nga fusha, vlera do të kthehet automatikisht në 1.
• Vlerat e boshtit Y për pikat e kontrollit mund të shkojnë mbi pjesën e sipërme ose nën pjesën e poshtme (të kufizuara midis -0.70 dhe 1.70) për të krijuar efekte tejkalimi (overshoot) ose tërheqjeje prapa (pull-back).
• Nëse fshini plotësisht përmbajtjen e një fushe numerike dhe largoni fokusin prej saj, sistemi do të rikthejë vlerën e fundit të vlefshme që ishte vendosur.
• Fushat që lihen bosh ose që përmbajnë vlera jo-numerike do të presin derisa të vendoset një vlerë e plotë dhe e saktë.
• Mund të përdorni tastierën për saktësi: shtypja e tastit të shigjetës Majtas ndërsa një dorezë e pikës së kontrollit është e fokusuar do të ndryshojë vlerën e saj, për shembull, në 0.99.
• Përzgjedhja e parazgjedhjes "Back Out" vendos automatikisht vlerën e cubic-bezier() në cubic-bezier(0.34, 1.56, 0.64, 1).

Kufizimet e funksionit Cubic Bezier

Megjithëse funksioni cubic-bezier() është jashtëzakonisht i fuqishëm për krijimin e tranzicioneve të lëmuara, ai ka kufizime fizike. Një kurbë e vetme cubic-bezier mund të parashikojë lëvizjen (tërheqje prapa) dhe të tejkalojë pikën e fundit (overshoot), por ajo mund të lëvizë vetëm në një drejtim dhe më pas të stabilizohet. Kjo do të thotë se nuk mund të përdoret për të krijuar efekte që ndryshojnë drejtimin disa herë radhazi, siç janë efektet e kërcimit (bounce) apo ato elastike.

Privatësia dhe përpunimi i të dhënave

Kur përdorni këtë vegël, siguria e të dhënave tuaja është e plotë. Kurba vizatohet drejtpërdrejt në shfletuesin tuaj. Asgjë që vendosni ose rregulloni në këtë mjet nuk ngarkohet në serverët e BroBroGo.

---

Pyetje të shpeshta (FAQ)

Çfarë nënkuptojnë dy dorezat dhe katër numrat?

Kurba shkon nga majtas-poshtë (fillimi) në djathtas-lart (fundi), me kohën që shkon nga e majta në të djathtë dhe progresin që shkon lart. Dy dorezat janë pikat e kontrollit që e përkulin atë — secila ka një X dhe një Y, kështu që së bashku ato janë cubic-bezier(x1, y1, x2, y2). X qëndron midis 0 dhe 1, ndërsa Y mund të shkojë mbi pjesën e sipërme ose nën pjesën e poshtme për ta bërë lëvizjen të tejkalojë ose të tërhiqet përpara se të stabilizohet.

Si ta përdor vlerën në CSS-në time?

Kopjoni cubic-bezier() dhe vendoseni kudo ku shkon një funksion kohor — transition-timing-function, animation-timing-function, ose shkurtimi, p.sh. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Fjalët kyçe ease, ease-in, ease-out dhe ease-in-out janë thjesht kurba fikse cubic-bezier, kështu që zgjedhja e një prej atyre parazgjedhjeve ju tregon vlerën e saktë pas fjalës kyçe.

A mund të krijojë një efekt kërcimi (bounce) ose elastik?

Jo vetëm me të. Një cubic-bezier i vetëm mund të parashikojë dhe të tejkalojë — parazgjedhjet "back" tërheqin një dorezë përtej kutisë për të bërë pikërisht këtë — por ai mund të lëvizë vetëm në një drejtim dhe pastaj të stabilizohet. Efektet bounce (kërcim) dhe elastic ndryshojnë drejtimin disa herë, gjë që asnjë cubic-bezier i vetëm nuk mund ta shprehë; ato kërkojnë keyframes në CSS ose funksionin linear() me shumë ndalesa.