CSS үшін теңшелетін cubic-bezier жеңілдік қисығын қалай жасаймын?

Графиктегі екі басқару нүктесінің тұтқасын сүйреңіз, нақты x1, y1, x2, y2 мәндерін теріңіз немесе алдын ала параметрді таңдаңыз. Содан кейін Шығыс пішімі астынан CSS таңдап, transition-timing-function үшін cubic-bezier() мәнін алу үшін Көшіру түймесін басыңыз.

Cubic-bezier көмегімен серпілу немесе асып кету әсерін қалай жасаймын?

Тұтқаны ұяшықтың үстіне немесе астына сүйреңіз, сонда оның Y мәні 0-1-ден асып кетеді. Y бұл ауқымнан асып кете алады, ал X 0 мен 1 арасында қалады. Кері шығу және болжау алдын ала параметрлері - дайын асып кету бастапқы нүктелері.

Tailwind, Framer Motion немесе anime.js үшін жеңілдікті ала аламын ба?

Иә. Шығыс пішімі қойындылары - CSS, Tailwind, Framer Motion және anime.js. Олардың барлығы бірдей төрт санды пішімдейді, сондықтан қойындыны таңдап, үзіндіні алмасу буферіне қою үшін Көшіру түймесін басыңыз.

Өңдеу үшін бар cubic-bezier мәнін қалай жүктеймін?

Импорттау өрісіне cubic-bezier(.17, .67, .83, .67) сияқты мәнді қойып, Жүктеу түймесін басыңыз. Егер төрт сан оқылмаса, қате туралы хабарлама аласыз. Қисық сонымен қатар хэштен кейін беттің URL мекенжайында сақталады, осылайша оны бөлісуге болады.

Неліктен алдын ала қарау менің нақты ауысуларымнан баяу сезіледі?

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

Шынымен тегін бе?

Иә. Әрбір құрал тегін, аккаунтсыз және несие картасынсыз қолданылады. Жұмыс серверлерімізде емес, құрылғыңызда орындалады, бұл оның тегін жұмыс істеуін қамтамасыз етеді.

Мобильді құрылғыларда жұмыс істей ме?

Иә. iOS және Android жүйелеріндегі заманауи мобильді браузерлерде ештеңе орнатпай жұмыс істейді.

📈

CSS Cubic-Bezier жеңілдік генераторы — тегін

Басқару нүктелерін сүйреп CSS жеңілдік қисықтарын жобалаңыз, қозғалысты тірі алдын ала қараңыз және cubic-bezier() мәнін көшіріңіз. Асу/секіру алдын ала орнатуларын қамтиды.

Браузерде жұмыс істейдіТіркелу жоқ, қалқымалы терезелер жоқКіруді қажет етпейдіМәңгілік тегін

Жүктелгеннен кейін офлайн жұмыс істейді

Қисықты пішіндеу үшін жасыл-көк және қызғылт тұтқаларды сүйреңіз

Басқару нүктелері

x1y1x2y2

Қозғалысты алдын ала қарау

Ұзақтығы1,6 с

Ен өтуі

CSS мәні

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

Дайын үлгілер

Қызғылт және жасыл-көк тұтқалар қораптың үстіне немесе астына шыға алады (Y 0-1 сыртында) — back-out және anticipate сияқты асып кету / секіру әсерлерін жасау үшін. X 0-1 шегінде қалады (уақыт артқа кете алмайды).

Жиі қолданылуы

CSS Өтінімі Өндіктіліктің ТөлеуҚұл эффектілері, мәзірлер және UI өтінімдеріне арналған табиғи сезімділік құрастырыңыз.
Секіру және Артығым АнимацияларыБасқарылау нүктелерін құтыдан тыс тарту арқылы ойынды пружина/секіру қозғалысы жасаңыз.
@keyframes Анимациялары үшін ТөлеуCSS аналық шынайы анимациялар үшін дұрыс анимация-уақыт функциясын таңдаңыз.
JS Анимация Кітапханаларының Төлеу ҚұндылықтарыGSAP, Framer Motion, anime.js және өзге үшін cubic-bezier мәндерін алыңыз.
Төлеу Қалай Жұмыс істейтінін ТүсініңізБезье қисығы мен оның шығаратын қозғалысының арасындағы қарым-қатынасты көріңіз.

Қалай жұмыс істейді

Редактор толығымен React күйі мен SVG пайдаланып браузерде жасалған — қисық математикасын ешбір кітапхана басқармайды. Екі сүйрелетін бақылау нүктесі SVG кубтық Безье жолын анықтайды, ал браузердің өз CSS анимация қозғалтқышы алынған cubic-bezier() мәнін @keyframes ережесіне тікелей енгізу арқылы қозғалыс алдын ала қарауын жүргізеді.

1
Бақылау нүктелерін сүйреу немесе теру
Екі тұтқа (жасыл-көк түсті P1, раушан түсті P2) SVG canvas-та орналасады. Сүйреу setPointerCapture арқылы Pointer Events API пайдаланады, сондықтан тұтқа SVG шекарасынан тыс болса да саусағыңызды немесе курсорыңызды қадағалайды. Сондай-ақ тұтқаларды көрсеткі перне арқылы жылжытуға немесе x1/y1/x2/y2 сандық кірістеріне нақты мәндерді теруге болады.
2
SVG қисықты нақты уақытта сызады
Қисық — C (кубтық Безье) командасы әр күй жаңартуында төрт бақылау нүктесінің координаттарынан қайта есептелетін жалғыз SVG <path> элементі. Canvas жоқ, сыртқы кітапхана жоқ — браузердің SVG өңдеуші жолды тікелей сызады.
3
Браузер CSS қозғалтқышы жеңілдетуді алдын ала көрсетеді
Үш тірі анимация (сырғымалы нүкте, ен ауысуы және масштаб) инлайн енгізілген cubic-bezier() мәнімен CSS @keyframes-ты іске қосады. Браузердің өз анимация қозғалтқышы қисықты түсіндіреді, сондықтан не көрсеңіз, өндірістік CSS-іңіз нақ сол нәтиже беретін болады.
4
Үзіндіні фреймворкіңіздің синтаксисінде көшіру
Қойындылар дәл сол төрт санды CSS transition-timing-function, Tailwind еркін мән класы, Framer Motion жеңілдету массиві немесе anime.js жеңілдету жолы ретінде пішімдейді. Үзінді navigator.clipboard арқылы буферге жазылады. Қисық сондай-ақ URL хэшінде (#b=x1,y1,x2,y2) кодталады, сондықтан онымен бөлісе аласыз немесе бетбелгіге қоса аласыз.