Il-Fundamenti tat-Timing Functions fis-CSS
It-tranżizzjonijiet u l-animazzjonijiet fis-CSS jiddependu fuq timing functions biex jiddeterminaw kif il-veloċità ta' bidla tevolvi matul iż-żmien. Minflok moviment lineari u mekkaniku, il-funzjoni cubic-bezier() tippermetti li l-progress ta' animazzjoni jiġi aċċellerat jew deċellerat b'mod fluwidu. Din il-funzjoni hija applikabbli direttament fi proprjetajiet bħal transition-timing-function u animation-timing-function.
Il-kurva ta' easing hija bbażata fuq kunċett matematiku ta' kurva Bezier kubika, li hija definita minn erba' punti. L-ewwel punt jinsab dejjem fil-pożizzjoni (0,0), li tirrappreżenta l-bidu tal-animazzjoni, u r-raba' punt jinsab f'(1,1), li tirrappreżenta t-tmiem. Iż-żewġ punti tan-nofs huma l-punti ta' kontroll li l-utent jista' jimmanipula biex jiddefinixxi l-forma tal-kurva.
Il-Rwol tal-Punti ta' Kontroll (x1, y1, x2, y2)
Il-forma tal-kurva tiġi ddeterminata mill-koordinati ta' żewġ punti ta' kontroll speċifiċi:
- L-ewwel punt ta' kontroll (P1): Definit mill-koordinati (x1, y1).
- It-tieni punt ta' kontroll (P2): Definit mill-koordinati (x2, y2).
Il-valuri tal-assi X (x1 u x2) jirrappreżentaw il-ħin u huma strettament limitati għal firxa bejn 0 u 1. Dan ifisser li l-ħin ma jistax imur lura jew jaqbeż il-limiti tal-animazzjoni. Il-valuri tal-assi Y (y1 u y2) jirrappreżentaw il-progress tal-animazzjoni. Dawn il-valuri għandhom firxa limitata bejn -0.70 u 1.70 fl-interface tal-għodda. Billi l-assi Y jista' jmur lil hinn mill-firxa standard ta' 0 sa 1, huwa possibbli li jinħolqu effetti fejn l-animazzjoni tmur lil hinn mill-istat finali tagħha jew tiġbed lura qabel ma tibda.
Effetti ta' Overshoot u Pull-back
Meta l-valuri ta' Y fl-ewwel jew fit-tieni punt ta' kontroll jiġu kkonfigurati barra l-limiti standard ta' 0 u 1, l-animazzjoni tikseb effetti dinamiċi ta' moviment:
- Pull-back (Anticipation): Jekk y1 jiġi ssettjat għal valur negattiv (taħt 0), l-element l-ewwel jimxi fid-direzzjoni opposta qabel ma javvanza 'l quddiem.
- Overshoot: Jekk y2 jiġi ssettjat għal valur akbar minn 1 (sa 1.70), l-element jaqbeż il-pożizzjoni finali tiegħek u mbagħad jerġa' lura biex jistabbilizza ruħu fl-aħħar.
Eżempju ċar ta' dan huwa l-preset "Back Out", li jikkonfigura l-valur għal cubic-bezier(0.34, 1.56, 0.64, 1). Hawnhekk, il-valur ta' y1 huwa 1.56, li jimbotta l-progress lil hinn mill-mira finali qabel ma jissetilja.
Limitazzjonijiet tal-Funzjoni cubic-bezier()
Għalkemm il-funzjoni cubic-bezier() hija b'saħħitha ħafna għal tranżizzjonijiet dettaljati, hija għandha limitazzjonijiet strutturali. Kurva Bezier kubika waħda tista' antiċipata (pull-back) u taqbeż il-mira (overshoot), iżda tista' timxi biss f'direzzjoni waħda u mbagħad tissetilja. Hija ma tistax tesprimi effetti kumplessi li jibdlu d-direzzjoni diversi drabi, bħal effett ta' bounce (bouncing) jew moviment elastiku ripetut. Għal dawk l-effetti avvanzati, hemm bżonn li jintużaw keyframes tas-CSS jew metodi oħra.
Regoli tal-Input u l-Interface tal-Għodda
Il-Ġeneratur ta' CSS Cubic Bezier jippermetti li tiddefinixxi l-kurva viżwalment jew permezz ta' inputs numeriċi. L-għodda tapplika regoli stretti biex tiżgura li l-valuri kkonfigurati jkunu dejjem validi għas-CSS:
- Limitazzjoni tal-Assi X: L-inputs għal X huma limitati għal firxa bejn 0 u 1. Jekk ddaħħal valur bħal
9għal "L-ewwel punt ta' kontroll" u mbagħad tneħħi l-fokus mill-input, il-valur awtomatikament jiġi kkoreġut għal1. - Limitazzjoni tal-Assi Y: L-inputs għal Y huma limitati għal firxa bejn -0.70 u 1.70.
- Irkupru ta' Valuri: Jekk tħassar input numeriku u tneħħi l-fokus, l-għodda terġa' ddaħħal l-aħħar valur validu li kien hemm qabel.
- Inputs Mhux Kompleti: Inputs vojta jew mhux numeriċi temporanjament ma jbiddlux il-kurva sakemm jiġi pprovdut valur sħiħ u validu.
- Kontroll bit-Tastiera: Meta manku ta' punt ta' kontroll ikun iffukat, tista' tagħfas il-vleġġa tax-Xellug biex tbiddel il-valur tiegħu b'mod preċiż, pereżempju għal
0.99.
Meta l-kurva tiġi fformata, tista' tikkopja l-valur iġġenerat. Meta l-kopja tirnexxi, l-interface turi l-istat "Copied". Il-proċess tal-kopja għandu biss stat ta' suċċess u ma jurix twissijiet ta' falliment.
Privatezza u Proċessar tad-Data
Il-kurva tiġi ġġenerata direttament fil-browser tiegħek. Xejn minn dak li tikkonfigura hawn ma jiġi mtella' fuq BroBroGo.
Mistoqsijiet Frekwenti (FAQ)
Xi jfissru ż-żewġ manki u l-erba' numri?
Il-kurva timxi minn isfel-xellug (il-bidu) għal fuq-lemin (it-tmiem), bil-ħin miexi mix-xellug għal-lemin u l-progress miexi 'l fuq. Iż-żewġ manki huma l-punti ta' kontroll li jgħawġuha — kull wieħed għandu X u Y, u għalhekk flimkien huma cubic-bezier(x1, y1, x2, y2). X jibqa' dejjem bejn 0 u 1, filwaqt li Y jista' jmur 'il fuq mill-quċċata jew taħt il-qiegħ biex joħloq moviment li jaqbeż il-mira jew jiġbed lura qabel ma jieqaf.
Kif nista' nuża l-valur fis-CSS tiegħi?
Ikkopja l-cubic-bezier() u poġġih fejn trid tuża timing function — transition-timing-function, animation-timing-function, jew fil-forma mqassra, eż. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Il-kliem ewlieni ease, ease-in, ease-out u ease-in-out huma biss kurvi cubic-bezier fissi, għalhekk meta tagħżel wieħed minn dawk il-presets tara l-valur eżatt wara l-kelma ewlenija.
Jista' joħloq effett ta' bounce jew elastiku?
Mhux waħdu. Cubic-bezier wieħed jista' jantiċipa u jaqbeż il-mira (overshoot) — il-presets "back" jiġbdu manku wieħed lil hinn mill-kaxxa biex jagħmlu preċiżament dan — iżda jista' jimxi biss f'direzzjoni waħda u mbagħad jieqaf. Effetti ta' bounce u elastiċi jibdlu d-direzzjoni diversi drabi, u dan ma jistax jiġi espress b'cubic-bezier wieħed; dawk jeħtieġu keyframes tas-CSS jew il-funzjoni linear() b'ħafna waqfiet.