CSS အတွက် စိတ်ကြိုက် cubic-bezier easing curve ကို ဘယ်လိုဖန်တီးရမလဲ။

မျဉ်းကွေးပေါ်ရှိ ထိန်းချုပ်အမှတ်နှစ်ခုကို ဆွဲရွှေ့ပါ၊ တိကျသော x1, y1, x2, y2 တန်ဖိုးများကို ရိုက်ထည့်ပါ သို့မဟုတ် ကြိုတင်သတ်မှတ်ချက်တစ်ခုကို ရွေးချယ်ပါ။ ထို့နောက် ထွက်ရှိမှုပုံစံ အောက်တွင် CSS ကို ရွေးချယ်ပြီး transition-timing-function အတွက် cubic-bezier() တန်ဖိုးကို ရယူရန် ကူးပါ ကို နှိပ်ပါ။

cubic-bezier နဲ့ bounce သို့မဟုတ် overshoot အထူးပြုလုပ်ချက် ဘယ်လိုလုပ်ရမလဲ။

Y တန်ဖိုး 0-1 အကွာအဝေးထက် ကျော်လွန်သွားစေရန် ထိန်းချုပ်အမှတ်ကို ဘောင်အပြင်ဘက် အပေါ် သို့မဟုတ် အောက်သို့ ဆွဲတင်ပါ။ X တန်ဖိုးသည် 0 နှင့် 1 ကြားတွင်သာ ရှိရမည်ဖြစ်ပြီး Y သည် ကျော်လွန်နိုင်ပါသည်။ back-out နှင့် anticipate ပုံစံများသည် အဆင်သင့်သုံးနိုင်သော overshoot နမူနာများ ဖြစ်ကြပါသည်။

Tailwind, Framer Motion ဒါမှမဟုတ် anime.js အတွက် easing ရယူနိုင်မလား။

ရယူနိုင်ပါသည်။ ရလဒ်ပုံစံများမှာ CSS, Tailwind, Framer Motion နှင့် anime.js တို့ ဖြစ်ကြပါသည်။ ၎င်းတို့အားလုံးသည် တူညီသော ဂဏန်း ၄ လုံးကို ပုံစံပြောင်းလဲပေးခြင်းဖြစ်ပြီး လိုချင်သော tab ကို ရွေးကာ clipboard ပေါ် ကူးယူရန် ကူးပါ ကို နှိပ်ပါ။

ရှိပြီးသား cubic-bezier တန်ဖိုးကို ပြင်ဆင်ဖို့ ဘယ်လိုထည့်သွင်းရမလဲ။

cubic-bezier(.17, .67, .83, .67) ကဲ့သို့သော တန်ဖိုးကို import အကွက်ထဲ ထည့်ပြီး ယူထားချပါ ကို နှိပ်ပါ။ ဂဏန်း ၄ လုံးကို ဖတ်မရပါက အမှားသတိပေးချက် ပြပါမည်။ မျဉ်းကွေးအချက်အလက်ကို ဝဘ်ဆိုက် URL ၏ hash နောက်တွင်လည်း ထည့်သွင်းပေးထားသဖြင့် မျှဝေအသုံးပြုနိုင်ပါသည်။

အစမ်းကြည့်ရှုမှုက အမှန်တကယ်ထက် ဘာကြောင့် ပိုနှေးနေသလဲ။

Motion အစမ်းကြည့် တွင် သင် ပြင်ဆင်နိုင်သော ကာလ သတ်မှတ်ချက်ပါရှိပြီး မျဉ်းကွေးပုံစံကို လေ့လာနိုင်စေရန် ပုံသေအားဖြင့် နှေးကွေးအောင် ပြုလုပ်ထားပါသည်။ ကာလ ကို လျှော့ချပြီး သင်အသုံးပြုလိုသည့် အမြန်နှုန်းအတိုင်း မြင်တွေ့နိုင်ရန် Replay ကို အသုံးပြုပါ။

တကယ် အခမဲ့လား။

ဟုတ်ပါသည်။ ကိရိယာအားလုံးကို အကောင့်ဖွင့်ရန် သို့မဟုတ် ခရက်ဒစ်ကတ်ပေးရန် မလိုဘဲ အခမဲ့ အသုံးပြုနိုင်ပါသည်။ လုပ်ဆောင်ချက်များကို ကျွန်ုပ်တို့၏ ဆာဗာများပေါ်တွင် မဟုတ်ဘဲ သင့်စက်ထဲတွင်သာ ပြုလုပ်ပေးသောကြောင့် အခမဲ့ ဝန်ဆောင်မှုပေးနိုင်ခြင်း ဖြစ်ပါသည်။

မိုဘိုင်းတွင် အလုပ်လုပ်ပါသလား?

ရပါတယ်။ iOS နှင့် Android ရှိ ခေတ်သစ်မိုဘိုင်းဘရောက်ဇာများတွင် ဘာမျှ ထည့်သွင်းစရာမလိုဘဲ အလုပ်လုပ်ပါသည်။

📈

အခမဲ့ CSS Cubic-Bezier ချောမွေ့မှုထုတ်လုပ်စက်

control point ဆွဲ၍ CSS easing curve ဒီဇိုင်းဆွဲ၊ motion ကို live preview ကြည့်ကာ cubic-bezier() တန်ဖိုး copy ပါ။ overshoot/bounce preset ပါဝင်သည်。

browser တွင် အလုပ်လုပ်သည်အကောင့်မပြုလုပ်ရ၊ pop-up မရှိလော့ဂ်အင် မလိုပါထာဝရ အခမဲ့

Load ပြီးသည်နှင့် offline အလုပ်လုပ်သည်

teal & rose handle ကို ဆွဲ၍ curve ပုံသဏ္ဌာန် ပြောင်းပါ

ကည့်ညွှန်းဆောင်ရွက်သည့်အချက်များ

x1y1x2y2

Motion အစမ်းကြည့်

ကာလ၁.၆ s

အကျယ် transition

CSS တန်ဖိုး

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

ကြိုတင်ချိန်ညှိချက်

rose နှင့် teal handle များသည် ဘောက်စ်အပေါ် သို့မဟုတ် အောက်သို့ ဆွဲနိုင်သည် (Y သည် 0-1 ကျော်) — back-out နှင့် anticipate ကဲ့သို့ 'overshoot'/bounce အကျိုးသက်ရောက်မှုများ ဖန်တီးရန်။ X သည် 0-1 တွင်သာ ရှိသည် (အချိန်ပြောင်းပြန်မဖြစ်နိုင်)။

အသုံးများသော အသုံးပြုမှုများ

စိတ်ကူးအခြင်း CSS အကြည်အရည်ပြင်ခြင်းအလည်အွန်များ၊ဖန်သုံးများနှင့် UI ပြောင်းလဲမှုများအတွက်သဘာဝအသုံးအရုံးများဖန်တီးခြင်း။
အုပ်စုအုပ်စုများနှင့်သိန်းများအုပ်စုများထုပ်ကုပ်သောအုပ်စုများထုပ်ကုပ်ခြင်းများတွင်မျက်နှာများကြီးကြားခြင်း။
@keyframes အခြင်းများအတွက်အခြင်းများCSS keyframe အခြင်းများအတွက်အကြီးမားသောအခြင်းအခြင်းများရွေးချယ်ခြင်း။
JS အခြင်းများတွေ့များအတွက်အခြင်းများတန်ဖိုးများGSAP၊ Framer Motion၊ anime.js ၊အစရှိသည်တို့အတွက် cubic-bezier တန်ဖိုးများကိုရယူခြင်း။
အခြင်းများမည်သည့်အခြင်းများကိုစဉ်းစားခြင်းBezier အုပ်စုများနှင့်၎င်းသည်ဖန်တီးသည့်အခြင်းများအကြားဆက်သွယ်မှုကြည့်ရှုခြင်း။

မည်သို့ အလုပ်လုပ်သည်

Editor ကို React state နှင့် SVG ကို သုံး၍ browser ထဲတွင် လုံးဝ တည်ဆောက်ထားသည် — curve ဂဏန်းသင်္ချာကို ကိုင်တွယ်သော library မရှိပါ။ ဆွဲနိုင်သော control point နှစ်ခုသည် SVG cubic Bezier path တစ်ခုကို သတ်မှတ်ပြီး browser ၏ ကိုယ်ပိုင် CSS animation engine သည် ရလဒ် cubic-bezier() တန်ဖိုးကို @keyframes rule တစ်ခုထဲသို့ တိုက်ရိုက် ထည့်၍ motion preview ကို ဖွင့်ပေးသည်။

1
Control point များကို ဆွဲပါ (သို့) ရိုက်ထည့်ပါ
Handle နှစ်ခု (P1 teal ရောင်၊ P2 rose ရောင်) သည် SVG canvas ပေါ်တွင် ရှိသည်။ ဆွဲခြင်းသည် setPointerCapture ပါသော Pointer Events API ကို သုံးသဖြင့် handle သည် SVG နယ်နိမိတ်ပြင်ပတွင်ပင် သင့်လက်ချောင်း သို့မဟုတ် cursor ကို track လုပ်သည်။ Arrow key များဖြင့် handle များကို ဖယောင်း (nudge) လုပ်နိုင်သည် (သို့) x1/y1/x2/y2 number input များတွင် အတိအကျ တန်ဖိုးများကို ရိုက်ထည့်နိုင်သည်။
2
SVG သည် curve ကို အချိန်နှင့်တပြေးညီ ဆွဲသည်
Curve သည် control point ကိုးကားချက် လေးခုမှ state update တိုင်းတွင် ပြန်တွက်ချက်သော C (cubic Bezier) command ပါသော SVG <path> element တစ်ခုတည်းဖြစ်သည်။ Canvas၊ ပြင်ပ library မပါဝင်ပါ — browser ၏ SVG renderer သည် path ကို တိုက်ရိုက် ဆွဲသည်။
3
Browser CSS engine သည် easing ကို ကြိုကြားပြသည်
Live animation သုံးခု (ရွေ့လျားသော အစက်၊ width transition နှင့် scale) သည် inline ထည့်ထားသော cubic-bezier() တန်ဖိုးပါသော CSS @keyframes ကို ဖွင့်သည်။ Browser ၏ ကိုယ်ပိုင် animation engine က curve ကို ဖော်ပြသည်၊ ထို့ကြောင့် သင်မြင်ရသည်မှာ သင့် production CSS က ထုတ်ပေးမည့်အရာအတိအကျ ဖြစ်သည်။
4
Snippet ကို သင့် framework ၏ syntax ဖြင့် ကူးယူပါ
Tab များသည် ကိန်းလေးခုတူတူကို CSS transition-timing-function၊ Tailwind arbitrary-value class၊ Framer Motion ease array သို့မဟုတ် anime.js easing string အဖြစ် ဖော်မတ်ချသည်။ Snippet ကို navigator.clipboard ဖြင့် clipboard သို့ ရေးထားသည်။ Curve ကို URL hash (#b=x1,y1,x2,y2) တွင်လည်း encode လုပ်ထားသဖြင့် မျှဝေ (သို့) bookmark လုပ်နိုင်သည်။