CSS timing function များ၏ အခြေခံသဘောတရား
CSS transitions နှင့် animations များတွင် လှုပ်ရှားမှုတစ်ခု၏ အရှိန်ပြောင်းလဲမှုကို ထိန်းချုပ်ရန် timing function များကို အသုံးပြုရသည်။ ဤလှုပ်ရှားမှုများ၏ အရှိန်နှုန်းကို cubic-bezier() function ဖြင့် တိကျစွာ သတ်မှတ်နိုင်သည်။ CSS Cubic Bezier ဖန်တီးကိရိယာသည် အဆိုပါ easing curve များကို စိတ်ကြိုက်ပုံဖော်နိုင်ရန် ကူညီပေးသော ကိရိယာဖြစ်သည်။
ကွေးညွှတ်မှု (curve) သည် ဘယ်ဘက်အောက်ခြေ (အစပွိုင့်) မှ ညာဘက်အပေါ်ခြေ (အဆုံးပွိုင့်) သို့ ပြေးဆွဲသည်။ ဤစနစ်တွင် အချိန် (time) သည် ဘယ်ဘက်မှ ညာဘက်သို့ တိုးသွားပြီး၊ လှုပ်ရှားမှုတိုးတက်မှု (progress) သည် အောက်မှ အပေါ်သို့ တက်လှမ်းသည်။ ဤကွေးညွှတ်မှုပုံသဏ္ဌာန်ကို ထိန်းချုပ်ပွိုင့် (control points) နှစ်ခုဖြင့် ပုံဖော်ပြီး ၎င်းတို့၏ တန်ဖိုးများကို cubic-bezier(x1, y1, x2, y2) အဖြစ် ဖော်ပြသည်။
ထိန်းချုပ်ပွိုင့်များ၏ စည်းမျဉ်းများနှင့် ကန့်သတ်ချက်များ
ကွေးညွှတ်မှုကို ပုံဖော်ရာတွင် ထိန်းချုပ်ပွိုင့်တစ်ခုစီအတွက် X နှင့် Y တန်ဖိုးများကို စနစ်တကျ သတ်မှတ်ရသည်။ ဤတန်ဖိုးများအတွက် အောက်ပါစည်းမျဉ်းများ သတ်မှတ်ထားသည် -
- X တန်ဖိုးများ (x1, x2): အချိန်တိုးတက်မှုကို ကိုယ်စားပြုသဖြင့် 0 နှင့် 1 အကြားတွင်သာ ရှိရမည်။ အကယ်၍ ပထမ ထိန်းချုပ်ပွိုင့် X တွင်
9ကဲ့သို့သော တန်ဖိုးကို ရိုက်ထည့်ပြီး focus ဖယ်လိုက်ပါက တန်ဖိုးသည် အလိုအလျောက်1သို့ ပြောင်းလဲသွားမည်ဖြစ်သည်။ - Y တန်ဖိုးများ (y1, y2): လှုပ်ရှားမှုတိုးတက်မှုကို ကိုယ်စားပြုပြီး -0.70 နှင့် 1.70 အကြား သတ်မှတ်နိုင်သည်။ Y တန်ဖိုးများသည် အပေါ်ဘက် သို့မဟုတ် အောက်ဘက်သို့ ကျော်လွန်သွားနိုင်ပြီး ၎င်းသည် လှုပ်ရှားမှုကို ပုံမှန်ထက် ကျော်လွန်သွားစေခြင်း (overshoot) သို့မဟုတ် နောက်သို့ ဆွဲယူခြင်း (pull-back) အကျိုးသက်ရောက်မှုများကို ဖန်တီးပေးသည်။
ကိန်းဂဏန်းထည့်သွင်းသည့်နေရာကို အလွတ်ထားပြီး focus ဖယ်လိုက်ပါက ယခင်ရှိခဲ့သော တရားဝင်တန်ဖိုးကို ပြန်လည်ဖြည့်သွင်းပေးမည်ဖြစ်သည်။ ထိန်းချုပ်ပွိုင့်လက်တံကို focus ပေးထားစဉ် Left arrow key ကို နှိပ်ပါက တန်ဖိုးသည် 0.99 ကဲ့သို့သော တန်ဖိုးသို့ ပြောင်းလဲသွားမည်ဖြစ်သည်။
ကိရိယာ၏ လုပ်ဆောင်ချက်နှင့် အသုံးပြုပုံ
ဤကိရိယာတွင် easing curve တစ်ခုကို ပုံဖော်ရန် လက်တံနှစ်ခုကို ဆွဲယူနိုင်သည်။ လက်တံများကို ဆွဲယူချိန်ညှိနေစဉ် သင့်ကွေးညွှတ်မှု ကို မြင်တွေ့ရမည်ဖြစ်ပြီး အစမ်းကြည့်ရှုမှုတွင် ပုံမှန်အရှိန် (linear) ဖြင့် ရွေ့လျားနေသော အစက်နှင့် သင်ဖန်တီးထားသော အရှိန်ဖြင့် ရွေ့လျားနေသော အစက်တို့ကို ယှဉ်တွဲကြည့်ရှုနိုင်သည်။
အဆင်သင့်ပုံစံများ (presets) ဖြစ်သော "ease", "ease-in", "ease-out", "ease-in-out", "Back In ပုံစံ", "Back Out ပုံစံ", သို့မဟုတ် "Back In-Out ပုံစံ" တို့ကိုလည်း တိုက်ရိုက်ရွေးချယ်နိုင်သည်။ ဥပမာအားဖြင့် "Back Out ပုံစံ" ပုံစံကို ရွေးချယ်ပါက cubic-bezier(0.34, 1.56, 0.64, 1) တန်ဖိုးကို ရရှိမည်ဖြစ်သည်။ စိတ်ကြိုက်ပုံဖော်ပြီးပါက ထွက်ပေါ်လာသော cubic-bezier() တန်ဖိုးကို ကူးယူနိုင်ပြီး ကူးယူမှုအောင်မြင်ပါက "Copied" ဟု ပြသမည်ဖြစ်သည်။
ဤကိရိယာ၏ လုပ်ဆောင်ချက်အားလုံးသည် သင့်ဘရောက်ဆာထဲတွင် တိုက်ရိုက်ဆွဲခြင်းဖြစ်ပြီး သင်သတ်မှတ်သမျှကို BroBroGo သို့ တင်ပို့မည်မဟုတ်ပါ။
အမေးအဖြေကဏ္ဍ (FAQ)
မေး - လက်တံနှစ်ခုနှင့် ကိန်းဂဏန်းလေးလုံးက ဘာကို ဆိုလိုသနည်း။
ဖြေ - ကွေးညွှတ်မှုသည် ဘယ်ဘက်အောက် (အစ) မှ ညာဘက်အပေါ် (အဆုံး) သို့ သွားပြီး၊ အချိန်သည် ဘယ်မှညာသို့ သွားကာ တိုးတက်မှုသည် အပေါ်သို့ သွားသည်။ လက်တံနှစ်ခုသည် ၎င်းကို ကွေးညွှတ်စေသော ထိန်းချုပ်ပွိုင့်များဖြစ်သည် — တစ်ခုစီတွင် X နှင့် Y ရှိသောကြောင့် စုပေါင်းပြီး cubic-bezier(x1, y1, x2, y2) ဖြစ်လာသည်။ X သည် 0 နှင့် 1 အကြားတွင်သာ ရှိနေပြီး Y သည် လှုပ်ရှားမှုကို ကျော်လွန်စေရန် သို့မဟုတ် မငြိမ်သက်မီ နောက်သို့ဆွဲရန် အပေါ် သို့မဟုတ် အောက်သို့ ကျော်လွန်သွားနိုင်သည်။
မေး - တန်ဖိုးကို CSS တွင် မည်သို့အသုံးပြုရမည်နည်း။
ဖြေ - 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 ကွေးညွှတ်မှုများသာဖြစ်သောကြောင့် ၎င်းတို့ကို ရွေးချယ်ပါက နောက်ကွယ်ရှိ တန်ဖိုးအတိအကျကို ပြသပေးမည်ဖြစ်သည်။
မေး - ၎င်းသည် bounce သို့မဟုတ် elastic အကျိုးသက်ရောက်မှုကို ဖန်တီးပေးနိုင်ပါသလား။
ဖြေ - ၎င်းတစ်ခုတည်းဖြင့် မရနိုင်ပါ။ cubic-bezier တစ်ခုတည်းသည် ကြိုတင်ပြင်ဆင်မှုနှင့် ကျော်လွန်မှု (overshoot) ကို ပြုလုပ်နိုင်သည် — "back" ကြိုတင်ပြင်ဆင်မှုများသည် ထိုသို့ပြုလုပ်ရန် လက်တံတစ်ခုကို ဘောက်စ်အပြင်ဘက်သို့ ဆွဲထုတ်ပေးသည် — သို့သော် ၎င်းသည် လမ်းကြောင်းတစ်ခုတည်းသို့သာ ရွေ့လျားပြီးမှ ငြိမ်သက်သွားနိုင်သည်။ Bounce နှင့် elastic တို့သည် လမ်းကြောင်းကို အကြိမ်ပေါင်းများစွာ ပြောင်းပြန်လှန်ပေးရပြီး ၎င်းကို cubic-bezier တစ်ခုတည်းဖြင့် မဖော်ပြနိုင်ပါ၊ ထိုအတွက် CSS keyframes သို့မဟုတ် linear() function ကို အသုံးပြုရမည်ဖြစ်သည်။