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

Бұл құрал не істейді?

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

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

Дереккөз: CSS Easing Functions Level 1, W3C — cubic-bezier() пен осы құралдың дайын параметрлері негізделген атаулы бес кілт сөзді анықтайтын спецификация.

Оны неге пайдалану керек?

• Тірі SVG графигі қисығыңыздың тіркелген бастапқы және соңғы нүктелер арасында қалай иілетінін нақты көрсетеді, айқындық үшін екі бақылау нүктесі мен олардың тұтқалары да сызылған.
• Ойнату түймесі алдын ала қарау элементін нақ сол қисығыңыз бойынша жол бойымен анимациялайды, сол арқылы сіз статикалық графикті көріп қана қоймай, қозғалысты сезінесіз.
• CSS Easing Functions спецификациясында құжатталғандай, бес стандартты атаулы жеделдету функциясы — ease, ease-in, ease-out, ease-in-out және linear — үшін бір рет басу арқылы дайын параметрлер.
• Y мәндері 0-ден төмен түсіп немесе 1-ден жоғары шығып, атаулы кілт сөздер шығара алмайтын шамадан тыс өту/серпілу стиліндегі жеделдетулерді жасауға мүмкіндік береді.
• transition-timing-function атты, кірістіруге дайын CSS кодын шығарады — дәл сол мән animation-timing-function үшін де жұмыс істейді.
• Толығымен браузеріңізде жұмыс істейді — сіз конфигурациялаған ештеңе ешқайда жүктелмейді. Тегін, тіркеусіз.

Оны қалай пайдалану керек

1. Анимацияның қалай басталатынын пішіндейтін бірінші бақылау нүктесін орнату үшін x1/y1 слайдерлерін сүйреңіз.
2. Анимацияның қалай аяқталатынын пішіндейтін екінші бақылау нүктесін орнату үшін x2/y2 слайдерлерін сүйреңіз.
3. Графиктегі қара қисықты бақылаңыз — басында диагональдан жоғары шығып тұрған қисық қозғалыстың жылдам басталатынын білдіреді, ал одан төмен қалатын қисық қозғалыстың баяу басталатынын білдіреді.
4. Алдын ала қарау элементінің қисығыңызды transition-timing-function ретінде пайдаланып жол бойымен қозғалғанын көру үшін Ойнату түймесін басыңыз.
5. Бастапқы нүкте ретінде дайын параметрді (ease, ease-in, ease-out, ease-in-out, linear) байқап көріңіз, содан кейін слайдерлерді сол жерден дәл баптаңыз.
6. Жасалған CSS кодын көшіріп, оны transition немесе animation ережесіне қойыңыз.

Мысал

Енгізу

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Нәтиже

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

Бұл стандартты CSS ease кілт сөзінің нақты бақылау нүктелері түрінде жазылған нұсқасы — жылдам бастау, өткір жеделдету, содан кейін соңына қарай біртіндеп баяулау.

Y мәндері неге 0–1 аралығынан асып кете алады

Уақытты білдіретін және 0-ден 1-ге дейін жүруі керек x осінен айырмашылығы, y осі анимацияланған мәннің прогресін білдіреді және мұндай шектеуі жоқ. y1 мәнін 0-ден төмен немесе y2 мәнін 1-ден жоғары орнату қисықтың тұрақталмас бұрын бастапқы мәннен төмен түсуіне немесе соңғы мәннен асып кетуіне әкеледі — бұл түймені басу, модальды терезелердің шығуы және ойынды UI микроәрекеттесулерінде қолданылатын шамадан тыс өту мен күту эффектілерінің негізі. Бес атаулы кілт сөздің (ease, ease-in, ease-out, ease-in-out, linear) ешқайсысы мұны жасай алмайды; ол үшін реттелетін cubic-bezier() қажет.

transition-timing-function және animation-timing-function айырмашылығы

Бұл құрал жасайтын cubic-bezier() мәні екі қасиетте де бірдей жұмыс істейді. Қозғалыс күй өзгерісімен (тінтуірді үстінен өткізу немесе класты ауыстыру сияқты) іске қосылғанда transition-timing-function пайдаланыңыз, ал бірдей жеделдету сезімін автоматты түрде немесе циклде қолдану қажет болғанда @keyframes негізіндегі анимация ережесінде animation-timing-function пайдаланыңыз.

Кең таралған жеделдету үлгілері

• Жылдам UI кері байланысы (түймелер, ауыстырғыштар): бақылау нүктелерін диагональға жақын, аздап ease-out бейімдігімен ұстаңыз, мысалы cubic-bezier(0.4, 0, 0.2, 1).
• Material Design стандартты қисығы: cubic-bezier(0.4, 0, 0.2, 1) — жылдам бастау, жұмсақ аяқтау, панельдер мен карталар өтпелерінде кеңінен қолданылады.
• Серпілу/шамадан тыс өту: y2 мәнін 1-ден жоғары итеріңіз, мысалы cubic-bezier(0.34, 1.56, 0.64, 1), ойынды пайда болу сезімі үшін.
• Қозғалыс алдындағы күту: элемент алға жылжымас бұрын сәл артқа тартылуы үшін y1 мәнін 0-ден төмен итеріңіз.
• Қайталанатын анимацияларға арналған тегіс ease-in-out: қисықты орталыққа қатысты симметриялыққа жақын ұстаңыз.

Басқа CSS құралдарымен қосу

Жеделдету қисығы сирек жалғыз тұрады — әдетте ол көлеңкелер, дөңгеленген бұрыштар немесе градиенттер де қажет ететін элементке қолданылады. Төмендегі басқа CSS құралдарымен көрнекі стильді жасаңыз, содан кейін осы құралдың уақыттау функциясын сол ережеге немесе transition/animation декларациясына қосыңыз.

→ Box Shadow Generator · Border Radius Generator

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