CSS Cubic Bezier генераторы

CSS-тегі уақыт функцияларының негіздері

CSS transitions және animations технологияларында қозғалыстың қалай дамитынын анықтау үшін уақыт функциялары қолданылады. Қозғалыс басынан аяғына дейін бірқалыпты жылдамдықпен жүруі мүмкін немесе белгілі бір заңдылықпен тездеп, баяулай алады. Бұл динамика transition-timing-function және animation-timing-function қасиеттері арқылы басқарылады.

CSS-тегі стандартты уақыт функциялары арнайы кілт сөздермен анықталған. Олардың қатарына ease, ease-in, ease-out және ease-in-out жатады. Бұл кілт сөздердің әрқайсысының артында нақты математикалық қисықтар тұрады. Анимацияның жылдамдығы мен прогресін толық бақылау үшін стандартты кілт сөздердің шеңберінен шығып, cubic-bezier() функциясының көмегімен жекеленген қисықтарды жасау қажет.

Cubic Bezier математикалық тұжырымдамасы және басқару нүктелері

Cubic Bezier (кубтық Безье) қисығы төрт нүктемен сипатталатын математикалық функция болып табылады. Қисық әрқашан төменгі сол жақтан (координаттар басы, яғни анимацияның басталуы) басталып, жоғарғы оң жаққа (анимацияның аяқталуы) қарай бағытталады.

Уақыт солдан оңға қарай прогресс ретінде жүреді, ал анимацияның орындалу деңгейі (прогресс) төменнен жоғары қарай бағытталады. Қисықтың бастапқы нүктесі әрқашан (0, 0) координатасында, ал соңғы нүктесі (1, 1) координатасында бекітілген. Қисықтың пішінін өзгерту үшін екі аралық басқару нүктесі қолданылады:

• Бірінші басқару нүктесі (x₁, y₁)
• Екінші басқару нүктесі (x₂, y₂)

Осы екі басқару нүктесінің координаталары cubic-bezier(x1, y1, x2, y2) функциясының параметрлері болып табылады. Осы нүктелердің орналасуын өзгерту арқылы анимацияның кез келген сәттегі жылдамдығын дәлме-дәл реттеуге болады.

Басқару элементтері және енгізу ережелері

Генератор интерфейсінде қисықтың пішінін өзгерту үшін екі тұтқаны тарту мүмкіндігі қарастырылған. Бұл тұтқалар басқару нүктелерінің координаталарын тікелей өзгертеді. Сонымен қатар, мәндерді қолмен енгізуге арналған өрістер бар:

• Бірінші басқару нүктесі X (x₁): 0 мен 1 аралығындағы сандық мән.
• Бірінші басқару нүктесі Y (y₁): -0.70 пен 1.70 аралығындағы сандық мән.
• Екінші басқару нүктесі X (x₂): 0 мен 1 аралығындағы сандық мән.
• Екінші басқару нүктесі Y (y₂): -0.70 пен 1.70 аралығындағы сандық мән.

Енгізу өрістерінде нақты ережелер мен шектеулер қолданылады:

• Уақыт кері бағытта жүре алмайтындықтан, X мәндері қатаң түрде 0 мен 1 аралығында шектелген. Егер "Бірінші басқару нүктесі" өрісіне 9 сияқты шектен тыс мәнді енгізіп, фокусты жоғалтсаңыз (басқа жақты шертсеңіз), мән автоматты түрде ең жоғарғы шекке, яғни 1 мәніне ауысады.
• Сандық енгізу өрісін толық тазартып, фокусты жоғалтқан жағдайда, жүйе бұған дейінгі жарамды мәнді автоматты түрде қалпына келтіреді.
• Бос немесе сандық емес мәндер енгізілгенде, жүйе толық әрі дұрыс мән енгізілгенге дейін күтеді.
• Басқару нүктесінің тұтқасы фокуста болған кезде пернетақтадағы сол жақ көрсеткі (Left arrow) пернесін басу арқылы мәнді дәлдікпен өзгертуге болады, мысалы, мән 0.99 деңгейіне дейін өзгереді.

Асып кету және кері шегіну әсерлерін жасау

Y координаталарының мәндері уақыт сияқты қатаң шектелмеген. Олардың мәні 0-ден төмен (төменгі шектен төмен) немесе 1-ден жоғары (жоғарғы шектен жоғары) бола алады. Бұл мүмкіндік анимацияда ерекше динамикалық әсерлерді жасауға жол ашады:

1. Кері шегіну (Pull-back / Anticipation): Y мәнін 0-ден төмен (мысалы, -0.5) орнатқанда, элемент қозғалысты бастамас бұрын сәл артқа шегініп барып, алға қарай серпіледі.
2. Асып кету (Overshoot): Y мәнін 1-ден жоғары (мысалы, 1.5) орнатқанда, элемент өзінің соңғы нүктесінен асып барып, содан кейін орнына қайта оралады.

Мысалы, "Артқа шегініп шығу" дайын үлгісін таңдаған кезде, жүйе cubic-bezier(0.34, 1.56, 0.64, 1) мәнін орнатады. Мұндағы y₁ мәні 1.56-ға тең, бұл элементтің соңғы нүктеден айтарлықтай асып барып тоқтайтынын көрсетеді.

Бір кубтық Безье қисығының шектеулері

cubic-bezier() функциясы өте икемді болғанымен, оның математикалық шектеулері бар. Бір ғана кубтық Безье қисығының көмегімен күрделі қозғалыстарды сипаттау мүмкін емес.

Қисық бір уақытта алдын ала кері шегінуді де, соңында асып кетуді де қамти алады, бірақ ол тек бір бағытта қозғалып, содан кейін барып тұрақтала алады. Бір ғана cubic-bezier функциясының көмегімен бағытты бірнеше рет өзгертетін әсерлерді жасау мүмкін емес. Мысалы, доптың жерге соғылып бірнеше рет секіруі (bounce) немесе серпімді тербеліс (elastic) сияқты қозғалыстарды бұл функциямен өрнектей алмайсыз. Мұндай күрделі әсерлер үшін CSS-те keyframes немесе көптеген нүктелерді қолдайтын linear() функциясын пайдалану қажет.

Құпиялылық және деректерді өңдеу

Бұл құралды пайдалану барысында деректердің қауіпсіздігі толық сақталады. Анимация қисығын есептеу және оны визуалды түрде көрсету процестері тікелей сіздің браузеріңізде орындалады. Пайдаланушы орнатқан ешқандай параметрлер, координаталар немесе қисық мәндері BroBroGo серверіне жүктелмейді.

---

Жиі қойылатын сұрақтар (FAQ)

Екі тұтқа мен төрт сан нені білдіреді?

Қисық төменгі сол жақтан (басы) жоғарғы оң жаққа (соңы) қарай жүреді, уақыт солдан оңға қарай, ал прогресс жоғары қарай жылжиды. Екі тұтқа — оны иетін басқару нүктелері — әрқайсысының X және Y мәндері бар, сондықтан олар бірге cubic-bezier(x1, y1, x2, y2) құрайды. X мәні 0 мен 1 аралығында қалады, ал Y мәні қозғалыстың асып кетуін немесе тоқтағанға дейін кері шегінуін жасау үшін жоғарғы шектен аса алады немесе төменгі шектен төмен түсе алады.

Бұл мәнді CSS-те қалай пайдаланамын?

cubic-bezier() мәнін көшіріп, оны уақыт функциясы қолданылатын кез келген жерге қойыңыз — 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 алдын ала шегіну мен асып кетуді жасай алады — «back» дайын үлгілері дәл осыны жасау үшін бір тұтқаны шектен тыс тартады — бірақ ол тек бір бағытта қозғалып, содан кейін тоқтай алады. Серпіліс (bounce) немесе серпімді (elastic) әсерлер бағытты бірнеше рет өзгертеді, мұны бір ғана cubic-bezier арқылы өрнектеу мүмкін емес; олар үшін CSS keyframes немесе көптеген нүктелері бар linear() функциясы қажет.