Dhaliyaha CSS Cubic Bezier

Jiid labada gacan si aad u qaabayso qalooca, daawo dhibic raacaysa marka la barbardhigo mid joogto ah, oo koobiyeey qiimaha cubic-bezier().

Hababka Diyaarsan
Dhibcaha xakamaynta
Dhibicda kowaad ee xakamaynta
Dhibicda labaad ee xakamaynta
Hor-u-arag
qaloocaaga
linear
Qiimaha
cubic-bezier(0.25, 0.1, 0.25, 1)
Jiid gacan ama dooro hab diyaarsan si aad u qaabayso qalooca.

Qalooca waxaa si toos ah loogu sawiraa biraawsarkaaga. Waxba oo aad halkan ku dejiso looma soo gudbiyo BroBroGo.

Su'aalaha badanaa la isweydiiyo

Maxay ka dhigan yihiin labada gacan iyo afarta lambar?

Qaloocu wuxuu ka bilaabmaa bidix-hoose (bilowga) ilaa midig-sare (dhamaadka), iyadoo waqtigu u socdo bidix ilaa midig horumarkuna uu kor u kacayo. Labada gacan waa dhibcaha xakamaynta ee qaloociya — mid kastaa wuxuu leeyahay X iyo Y, markaa wadajir waxay u yihiin cubic-bezier(x1, y1, x2, y2). X wuxuu u dhexeeyaa 0 iyo 1, halka Y uu aadi karo ka sarreeya dusha sare ama ka hooseeya salka si uu dhaqdhaqaaqu u dhafo (overshoot) ama dib u soo jiido ka hor inta uusan dagi lahayn.

Sideen ugu isticmaalaa qiimaha CSS-kayga?

Koobiyeey cubic-bezier() oo ku tuur meel kasta oo ay gasho timing function — transition-timing-function, animation-timing-function, ama qaabka gaaban, tusaale ahaan transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Erayada muhiimka ah ee ease, ease-in, ease-out iyo ease-in-out waa uun qaloocyo cubic-bezier oo go'an, markaa doorashada mid ka mid ah hababkaas diyaarsan waxay ku tusaysaa qiimaha saxda ah ee ka dambeeya erayga muhiimka ah.

Miyaa lagu samayn karaa saamaynta bounce ama elastic?

Kaliya kaligiis ma sameyn karo. Hal cubic-bezier wuxuu filan karaa oo dhaafi karaa (overshoot) — hababka diyaarsan ee "back" waxay jiidayaan hal gacan si ay taas u sameeyaan — laakiin wuxuu u dhaqaaqi karaa hal dhinac oo keliya ka dibna wuu dagi karaa. Bounce iyo elastic waxay beddelaan jihada dhowr jeer, taas oo aanu hal cubic-bezier muujin karin; kuwaas waxay u baahan yihiin CSS keyframes ama linear() function oo leh istaago badan.

Waxaa qortay oo dib u eegtay kooxda tafatirka ee BroBroGo.Markii ugu dambaysay ee la cusboonaysiiyay:

Fahamka CSS Cubic Bezier iyo Sida uu u Shaqeeyo

Dhaqdhaqaaqyada ku dhex jira boggaga internetka (CSS transitions iyo animations) waxay u baahan yihiin hab lagu xakameeyo xawaaraha iyo hannaanka uu u socdo isbeddelku. Habka ugu muhiimsan ee loo xakameeyo hannaankan waa adeegsiga shaqada cubic-bezier(x1, y1, x2, y2). Qalooca cubic Bezier wuxuu ka bilaabmaa bidix-hoose (oo ka dhigan bilowga animation-ka) wuxuuna u socdaa ilaa midig-sare (oo ka dhigan dhammaadka animation-ka).

Muddada uu animation-ku socdo waxay u dhexaysaa bidix ilaa midig (dhidibka X), halka horumarka isbeddelka ama barokaca uu u socdo kor iyo hoos (dhidibka Y). Adiga oo isticmaalaya laba dhibcood oo xakamayn ah, waxaad go'aamin kartaa qaabka uu qaloocu u qalloocanayo, taas oo si toos ah u go'aamisa xawaaraha animation-ka xilli kasta.

Gelinta Xogta iyo Xakamaynta Qalooca

Aaladdan waxay kuu oggolaanaysaa inaad si muuqaal ah u qaabayso qalooca adoo isticmaalaya habab kala duwan oo xog-gelin ah:

  • Jiidista labada gacan: Waxaad si toos ah u jiidi kartaa labada dhibcood ee xakamaynta si aad u beddesho qaabka qalooca.
  • Dhibicda kowaad ee xakamaynta (X iyo Y): Qiimaha X wuxuu u dhexeeyaa 0 iyo 1, halka qiimaha Y uu u dhexeeyo -0.70 iyo 1.70.
  • Dhibicda labaad ee xakamaynta (X iyo Y): Sidoo kale, qiimaha X wuxuu ku xaddidan yahay 0 iyo 1, halka Y uu u dhexeeyo -0.70 iyo 1.70.
  • Xulashada hababka diyaarsan: Waxaad dooran kartaa hababka caadiga ah ee CSS sida "ease", "ease-in", "ease-out", "ease-in-out", ama hababka horumarsan ee "Back In", "Back Out", iyo "Back In-Out".

Haddii aad isticmaalayso kiiboodhka, adigoo dul taagan mid ka mid ah gacanta xakamaynta, waxaad riixi kartaa badhanka falaarta Bidix si aad u beddesho qiimaha (tusaale ahaan, inuu noqdo 0.99).

Aaladdu waxay leedahay xeerar adag oo lagu xaqiijinayo saxnaanta xogta. Haddii aad geliso qiimo ka baxsan xadka, tusaale ahaan haddii aad u qorto 9 qaybta "Dhibicda kowaad ee xakamaynta" ka dibna aad meel kale gujiso (losing focus), qiimuhu wuxuu si toos ah u noqonayaa 1. Sidoo kale, haddii aad gabi ahaanba tirtirto sanduuqa qoraalka ee lambarka oo aad meel kale gujiso, aaladdu waxay dib u soo celinaysaa qiimihii hore ee saxda ahaa. Marka sanduuqa la dhex joogo oo uu madhan yahay ama la geliyo xog aan lambar ahayn, aaladdu waxay sugaysaa inta laga gelinayo qiimo dhammaystiran.

Waxyaabaha ka Soo Baxa Aaladda

Markaad wax ka beddesho gacanta xakamaynta ama aad doorato hab diyaarsan, aaladdu waxay soo saartaa:

  • qaloocaaga: Muuqaal garaaf ah oo muujinaya qaabka qalooca ee aad naqshadaysay.
  • cubic-bezier(x1, y1, x2, y2): Qiimaha rasmiga ah ee CSS ee u dhigma qalooca aad samaysay, kaas oo aad koobiyeysan karto.
  • Copied: Markaad gujiso badhanka koobiga, qoraalkan ayaa soo baxaya si uu u xaqiijiyo in qiimaha si guul leh loogu koobiyey clipboard-ka. Ma jiraan fariimo kale oo muujinaya guuldarro ama diidmo inta lagu guda jiro koobiyeynta.

Si aad u aragto saamaynta qalooca, dhibic ayaa ku dhex dhaqaaqaysa qalooca dhexdiisa, taas oo barbar socota dhibic kale oo ku socota xawaare joogto ah (linear) si aad u barbardhigto xawaaraha kala duwan.

Xaddidaadda iyo Saamaynta Gaarka ah (Overshoot iyo Pull-back)

In kasta oo cubic-bezier() uu yahay mid aad u awood badan, haddana wuxuu leeyahay xaddidaad dhanka xisaabta ah. Hal qalooc oo cubic-bezier ah wuxuu samayn karaa oo keliya hal jiho oo dhaqdhaqaaq ah ka dibna wuu dagi karaa. Taas macnaheedu waa ma muujin karo saamaynta dib-u-boodka dhowrka jeer ah (sida bounce ama elastic effects) sababtoo ah saamayntaas waxay u baahan yihiin in jihada dhaqdhaqaaqa la beddelo dhowr jeer.

Si kastaba ha ahaatee, waxaad samayn kartaa saamaynta loo yaqaan "anticipation" (dib u jiidasho ka hor inta aan la bilaabin) iyo "overshoot" (in la dhaafo barta dhammaadka ka dibna dib loogu soo laabto). Tani waxay suurtogal tahay sababtoo ah qiimaha Y ee dhibcaha xakamaynta wuxuu dhaafi karaa xadka sare ee 1 (ilaa 1.70) ama wuxuu ka hoos mari karaa salka 0 (ilaa -0.70). Tusaale ahaan, habka diyaarsan ee "Back Out" wuxuu dejiyaa qiimaha cubic-bezier(0.34, 1.56, 0.64, 1), halkaas oo qiimaha Y1 ee ah 1.56 uu keenayo in animation-ku uu dhaafo barta dhammaadka ka hor inta uusan dib ugu soo laaban meeshii loogu talagalay.

Ilaalinta Xogta iyo Asturnaanta

Markaad isticmaalayso aaladdan, dhammaan habaynta iyo sawiridda qalooca waxay si toos ah uga dhacayaan dhexda biraawsarkaaga (browser-kaaga). Wax xog ah oo aad geliso ama aad ku dejiso aaladda looma soo gudbiyo BroBroGo.

Su'aalaha Badanaa La Is Weydiiyo (FAQ)

Maxay ka dhigan yihiin labada gacan iyo afarta lambar?

Qaloocu wuxuu ka bilaabmaa bidix-hoose (bilowga) ilaa midig-sare (dhamaadka), iyadoo waqtigu u socdo bidix ilaa midig horumarkuna uu kor u kacayo. Labada gacan waa dhibcaha xakamaynta ee qaloociya — mid kastaa wuxuu leeyahay X iyo Y, markaa wadajir waxay u yihiin cubic-bezier(x1, y1, x2, y2). X wuxuu u dhexeeyaa 0 iyo 1, halka Y uu aadi karo ka sarreeya dusha sare ama ka hooseeya salka si uu dhaqdhaqaaqu u dhafo (overshoot) ama dib u soo jiido ka hor inta uusan dagi lahayn.

Sideen ugu isticmaalaa qiimaha CSS-kayga?

Koobiyeey cubic-bezier() oo ku tuur meel kasta oo ay gasho timing function — transition-timing-function, animation-timing-function, ama qaabka gaaban, tusaale ahaan transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Erayada muhiimka ah ee ease, ease-in, ease-out iyo ease-in-out waa uun qaloocyo cubic-bezier oo go'an, markaa doorashada mid ka mid ah hababkaas diyaarsan waxay ku tusaysaa qiimaha saxda ah ee ka dambeeya erayga muhiimka ah.

Miyaa lagu samayn karaa saamaynta bounce ama elastic?

Kaliya kaligiis ma sameyn karo. Hal cubic-bezier wuxuu filan karaa oo dhaafi karaa (overshoot) — hababka diyaarsan ee "back" waxay jiidayaan hal gacan si ay taas u sameeyaan — laakiin wuxuu u dhaqaaqi karaa hal dhinac oo keliya ka dibna wuu dagi karaa. Bounce iyo elastic waxay beddelaan jihada dhowr jeer, taas oo aanu hal cubic-bezier muujin karin; kuwaas waxay u baahan yihiin CSS keyframes ama linear() function oo leh istaago badan.

Dhaliyaha GradientDhis gradient linear, radial, ama conic ah, ku dar istaagyada midabka oo dejiso jihada, ka dibna ku koobiyeey CSS-ka hal gujin.Dhaliyaha Border RadiusU wareeji gees kasta adigoo isticmaalaya jiidado, ku qaabeey qaabab dabiici ah habka elliptical-ka, oo si degdeg ah u koobiyeey CSS-ka.Dhaliyaha FlexboxU diyaari weel flex ah iyo walxihiisa adigoo isticmaalaya xakamaynta muuqaalka, daawo qaabka oo si toos ah u falcelinaya, oo ku koobiyeey CSS-ka hal gujin.Dhaliyaha CSS GridDejiso tiirarkaaga iyo safarkaaga, ku jiid unugyada dushooda si aad u dhigto walxaha, oo ku koobiyeey grid CSS-ka iyo HTML-ka u dhigma hal gujin.Dhaliyaha Box ShadowJiid jiidadaha si aad u qaabayso box-shadow, isku dul radd lakabyo si aad u hesho qoto-dheer, oo si degdeg ah u koobiyeey CSS-ka dhammaaday.Xisaabiyaha CSS clamp()Geli cabbir loogu talagalay shaashadaha yaryar iyo kuwa waaweyn si aad u hesho qiimo dabiici ah oo clamp() ah oo si habsmooth ah ugu dhex miisaamaya — ee cabbirrada farta, padding, margins ama gaps.