CSS Cubic Bezier ဖန်တီးကိရိယာ

ကွေးညွှတ်မှုသည် ဘယ်ဘက်အောက် (အစ) မှ ညာဘက်အပေါ် (အဆုံး) သို့ သွားပြီး၊ အချိန်သည် ဘယ်မှညာသို့ သွားကာ တိုးတက်မှုသည် အပေါ်သို့ သွားသည်။ လက်တံနှစ်ခုသည် ၎င်းကို ကွေးညွှတ်စေသော ထိန်းချုပ်ပွိုင့်များဖြစ်သည် — တစ်ခုစီတွင် X နှင့် Y ရှိသောကြောင့် စုပေါင်းပြီး cubic-bezier(x1, y1, x2, y2) ဖြစ်လာသည်။ X သည် 0 နှင့် 1 အကြားတွင်သာ ရှိနေပြီး Y သည် လှုပ်ရှားမှုကို ကျော်လွန်စေရန် သို့မဟုတ် မငြိမ်သက်မီ နောက်သို့ဆွဲရန် အပေါ် သို့မဟုတ် အောက်သို့ ကျော်လွန်သွားနိုင်သည်။

cubic-bezier() ကို ကူးယူပြီး timing function သုံးရမည့် မည်သည့်နေရာတွင်မဆို ထည့်သွင်းပါ — transition-timing-function, animation-timing-function သို့မဟုတ် အတိုကောက်ရေးနည်းဖြစ်သော transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) စသည်တို့ဖြစ်သည်။ ease, ease-in, ease-out နှင့် ease-in-out ကဲ့သို့သော သော့ချက်စာလုံးများသည် ပုံသေ cubic-bezier ကွေးညွှတ်မှုများသာဖြစ်သောကြောင့် ၎င်းတို့ကို ရွေးချယ်ပါက နောက်ကွယ်ရှိ တန်ဖိုးအတိအကျကို ပြသပေးမည်ဖြစ်သည်။

၎င်းတစ်ခုတည်းဖြင့် မရနိုင်ပါ။ cubic-bezier တစ်ခုတည်းသည် ကြိုတင်ပြင်ဆင်မှုနှင့် ကျော်လွန်မှု (overshoot) ကို ပြုလုပ်နိုင်သည် — "back" ကြိုတင်ပြင်ဆင်မှုများသည် ထိုသို့ပြုလုပ်ရန် လက်တံတစ်ခုကို ဘောက်စ်အပြင်ဘက်သို့ ဆွဲထုတ်ပေးသည် — သို့သော် ၎င်းသည် လမ်းကြောင်းတစ်ခုတည်းသို့သာ ရွေ့လျားပြီးမှ ငြိမ်သက်သွားနိုင်သည်။ Bounce နှင့် elastic တို့သည် လမ်းကြောင်းကို အကြိမ်ပေါင်းများစွာ ပြောင်းပြန်လှန်ပေးရပြီး ၎င်းကို cubic-bezier တစ်ခုတည်းဖြင့် မဖော်ပြနိုင်ပါ၊ ထိုအတွက် CSS keyframes သို့မဟုတ် linear() function ကို အသုံးပြုရပါမည်။