Jenereta ya CSS Cubic Bezier

Buruta mishiko miwili ili kuunda mkondo wa easing, tazama nukta inavyosafiri kulingana na ile thabiti, na unakili thamani ya cubic-bezier().

Vipimo vya Awali
Pointi za kudhibiti
Pointi ya kwanza ya kudhibiti
Pointi ya pili ya kudhibiti
Onyesho la Awali
mkondo wako
linear
Thamani
cubic-bezier(0.25, 0.1, 0.25, 1)
Buruta mshiko au chagua kipimo cha awali ili kuunda mkondo.

Mkondo unachorwa moja kwa moja kwenye kivinjari chako. Hakuna unachoweka hapa kinachopakiwa kwenye BroBroGo.

Maswali Yanayoulizwa Sana

Je, mishiko miwili na nambari nne zinamaanisha nini?

Mkondo unaanzia chini-kushoto (mwanzo) hadi juu-kulia (mwisho), huku muda ukienda kushoto kwenda kulia na maendeleo yakienda juu. Mishiko miwili ndiyo pointi za kudhibiti zinazoipinda — kila moja ina X na Y, kwa hivyo kwa pamoja ni cubic-bezier(x1, y1, x2, y2). X inabaki kati ya 0 na 1, wakati Y inaweza kwenda juu ya kilele au chini ya msingi ili kufanya mwendo upitilize au kurudi nyuma kabla ya kutulia.

Je, ninatumiake thamani hii kwenye CSS yangu?

Nakili cubic-bezier() na uiweke popote ambapo kazi ya muda (timing function) inakwenda — transition-timing-function, animation-timing-function, au kifupi chake, mfano: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Maneno muhimu kama ease, ease-in, ease-out na ease-in-out ni mikondo maalum ya cubic-bezier, kwa hivyo kuchagua mojawapo ya vipimo hivyo vya awali kunakuonyesha thamani halisi iliyo nyuma ya neno hilo kuu.

Je, inaweza kutengeneza athari ya bounce au elastic?

Sio yenyewe pekee. Cubic-bezier moja inaweza kutarajia na kupitiliza (overshoot) — vipimo vya awali vya "back" vinavuta mshiko mmoja kupita kisanduku ili kufanya hivyo — lakini inaweza tu kwenda upande mmoja kisha kutulia. Athari za Bounce na elastic zinabadilisha mwelekeo mara kadhaa, jambo ambalo hakuna cubic-bezier moja inayoweza kueleza; hizo zinahitaji CSS keyframes au linear() function yenye vituo vingi.

Imeandikwa na kukaguliwa na timu ya wahariri wa BroBroGo.Ilisasishwa mwisho:

Jinsi Chombo Hiki Kinavyofanya Kazi

Jenereta ya CSS Cubic Bezier ni chombo kinachokuruhusu kuunda mkondo wa CSS easing kwa njia ya kuona kwa kuburuta pointi mbili za kudhibiti. Unaporekebisha mkondo huo, nukta inasogea kando yake, ikionyesha athari ya easing karibu na nukta nyingine inayosogea kwa kasi thabiti. Baada ya hapo, chombo hiki kinatoa thamani inayolingana ya cubic-bezier(), ambayo unaweza kuinakili kwa ajili ya matumizi katika CSS yako.

Mkondo huu unaanzia chini-kushoto (ambao ni mwanzo) hadi juu-kulia (ambao ni mwisho). Ndani ya mfumo huu, muda unaendelea kutoka kushoto kwenda kulia, na maendeleo ya mwendo yanaenda juu.

Vipengele vya Kuingiza Data

Ili kutengeneza na kurekebisha mkondo wako, unaweza kutumia njia na vipengele mbalimbali vya kuingiza data:

  • Kuburuta mishiko miwili: Mishiko hii inadhibiti umbo la mkondo wa easing.
  • Pointi ya kwanza ya kudhibiti X: Thamani ya nambari kati ya 0 na 1.
  • Pointi ya kwanza ya kudhibiti Y: Thamani ya nambari kati ya -0.70 na 1.70.
  • Pointi ya pili ya kudhibiti X: Thamani ya nambari kati ya 0 na 1.
  • Pointi ya pili ya kudhibiti Y: Thamani ya nambari kati ya -0.70 na 1.70.
  • Uteuzi wa vipimo vya awali: Unaweza kuchagua kutoka kwenye chaguzi kama "ease", "ease-in", "ease-out", "ease-in-out", "Back In", "Back Out", au "Back In-Out".

Matokeo ya Chombo Hiki

Unapotumia chombo hiki, utapata matokeo yafuatayo kwenye kiolesura:

  • mkondo wako: Muonekano wa picha unaoonyesha umbo la mkondo wa easing uliotengenezwa.
  • cubic-bezier(x1, y1, x2, y2): Thamani ya chaguo la kukokotoa la CSS cubic-bezier() inayolingana na umbo la mkondo ulioundwa.
  • Imenakiliwa: Hali hii inaonyeshwa kwenye kiolesura baada ya kufanikiwa kunakili thamani ya cubic-bezier(). Hakuna ujumbe wowote wa kukataliwa au kufeli unaotokea wakati wa kunakili.

Sheria za Uingizaji Data na Hali Maalum

Wakati wa kutumia na kuingiza nambari kwenye chombo hiki, kuna sheria maalum na mipaka inayozingatiwa:

  • Thamani za X za pointi za kudhibiti lazima zibaki kati ya 0 na 1. Thamani za Y zinaweza kwenda juu ya kilele (juu ya 1) au chini ya msingi (chini ya 0) ili kutengeneza athari za kupitiliza (overshoot) au kurudi nyuma (pull-back).
  • Kiwango cha juu na cha chini cha uingizaji wa nambari za X kimezuiliwa kuwa 0–1, wakati thamani za Y zimezuiliwa kuwa -0.70–1.70.
  • Ukiingiza thamani kama 9 kwa ajili ya "Pointi ya kwanza ya kudhibiti X" na kisha kubofya nje ya kisanduku (kupoteza mwelekeo/focus), thamani hiyo itabadilika kiotomatiki na kuwa 1.
  • Ukifuta kabisa nambari kwenye kisanduku cha kuingizia data na kisha kupoteza mwelekeo, chombo kitarejesha thamani halali iliyokuwepo hapo awali.
  • Ukibonyeza kitufe cha mshale wa Kushoto (Left arrow key) wakati mshiko wa pointi ya kudhibiti ukiwa umechaguliwa, thamani yake itabadilika, kwa mfano, kuwa 0.99.
  • Ukichagua kipimo cha awali cha "Back Out", thamani ya cubic-bezier() itawekwa kuwa cubic-bezier(0.34, 1.56, 0.64, 1).
  • Ikiwa utaacha kisanduku wazi au kuingiza herufi zisizo nambari, mfumo utasubiri hadi uingize thamani kamili.

Walengwa wa Chombo Hiki

Chombo hiki kimeundwa mahususi kwa ajili ya:

  • Mtu yeyote anayetaka kuunda athari maalum za easing (custom easing effects) kwa ajili ya mabadiliko (transitions) au miguso (animations) ya CSS.
  • Mtu anayehitaji kuelewa thamani halisi za cubic-bezier() zilizo nyuma ya maneno muhimu ya kawaida ya CSS timing functions kama vile ease, ease-in, ease-out, na ease-in-out.
  • Mtu anayetafuta jinsi ya kutekeleza miguso inayorudi nyuma kidogo kabla ya kuanza (anticipates) au inayopitiliza kikomo chake kabla ya kutulia (overshoots).

Faragha na Usindikaji wa Data

Mkondo unachorwa moja kwa moja kwenye kivinjari chako. Hakuna unachoweka hapa kinachopakiwa kwenye BroBroGo.

Maswali Yanayoulizwa Mara kwa Mara (FAQ)

Je, mishiko miwili na nambari nne zinamaanisha nini?

Mkondo unaanzia chini-kushoto (mwanzo) hadi juu-kulia (mwisho), huku muda ukienda kushoto kwenda kulia na maendeleo yakienda juu. Mishiko miwili ndiyo pointi za kudhibiti zinazoipinda — kila moja ina X na Y, kwa hivyo kwa pamoja ni cubic-bezier(x1, y1, x2, y2). X inabaki kati ya 0 na 1, wakati Y inaweza kwenda juu ya kilele au chini ya msingi ili kufanya mwendo upitilize au kurudi nyuma kabla ya kutulia.

Je, ninatumiake thamani hii kwenye CSS yangu?

Nakili cubic-bezier() na uiweke popote ambapo kazi ya muda (timing function) inakwenda — transition-timing-function, animation-timing-function, au kifupi chake, mfano: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Maneno muhimu kama ease, ease-in, ease-out na ease-in-out ni mikondo maalum ya cubic-bezier, kwa hivyo kuchagua mojawapo ya vipimo hivyo vya awali kunakuonyesha thamani halisi iliyo nyuma ya neno hilo kuu.

Je, inaweza kutengeneza athari ya bounce au elastic?

Sio yenyewe pekee. Cubic-bezier moja inaweza kutarajia na kupitiliza (overshoot) — vipimo vya awali vya "back" vinavuta mshiko mmoja kupita kisanduku ili kufanya hivyo — lakini inaweza tu kwenda upande mmoja kisha kutulia. Athari za Bounce na elastic zinabadilisha mwelekeo mara kadhaa, jambo ambalo hakuna cubic-bezier moja inayoweza kueleza; hizo zinahitaji CSS keyframes au linear() function yenye vituo vingi.

Jenereta ya GradientUnda gradient ya linear, radial, au conic, ongeza vituo vya rangi na uweke mwelekeo, kisha unakili CSS kwa mbofyo mmoja.Jenereta ya Border RadiusFanya kila pembe kuwa ya mduara kwa vitelezi, unda maumbo asilia ya blob kwa njia ya duaradufu, na unakili CSS papo hapo.Jenereta ya FlexboxWeka chombo cha flex na vipengele vyake kwa vidhibiti vya macho, tazama mpangilio unavyobadilika moja kwa moja, na unakili CSS kwa mbofyo mmoja.Jenereta ya CSS GridWeka safuwima na safu mlalo zako, buruta kwenye seli ili kuweka vipengele, na unakili CSS ya gridi pamoja na HTML inayolingana kwa mbofyo mmoja.Jenereta ya Box ShadowBuruta vitelezi ili kuunda box-shadow, weka tabaka kwa kina zaidi, na unakili CSS iliyokamilika papo hapo.Kikokotoo cha CSS clamp()Ingiza saizi ya skrini ndogo na kubwa na upate thamani ya clamp() inayobadilika vizuri katikati yake — kwa ajili ya saizi za fonti, padding, margin au gap.