📈

Акысыз CSS Cubic-Bezier тегиздөө генератору

Көзөмөлдөө чекиттерин сүйрөп CSS тегиздөө ийри сызыктарын долбоорлоңуз, кыймылды түз алдын ала көрүңүз жана cubic-bezier() маанисин көчүрүп алыңыз. Ашыкча ийрилүү/секирүү даярдалган варианттарын камтыйт.

Браузериңизде иштейтКаттоо жок, ачылуучу терезелер жокКирүү талап кылынбайтТүбөлүк акысыз

Жүктөлгөндөн кийин оффлайн иштейт

Ийри сызыкты калыптоо үчүн көк-жашыл жана кызгылт туткаларды сүйрөңүз

Көзөмөл чекиттери

x1y1x2y2

Кыймыл алдын ала көрүнүшү

Узактыгы1.6s

Туура өтүү

CSS мааниси

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

Даяр үлгүлөр

Кызгылт жана көк-жашыл туткалар кутучанын үстүнө же алдына тартылып (Y 0-1ден чыгып), back-out жана anticipate сыяктуу 'ашыкча' / секирүү эффекттерин жаратышы мүмкүн. X 0-1 аралыгында калат (убакыт артка кете албайт).

Бул кантип иштейт

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

1
Көзөмөл чекиттерин сүйрөңүз же териңиз
Эки туткач (P1 деңизчил түстө, P2 раушан түстө) SVG canvas'та жайгашкан. Сүйрөө Pointer Events API'син setPointerCapture менен колдонот, ошондуктан туткач манжаңызды же курсоруңузду 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 ease массиви же anime.js жумшартуу саб катары форматтайт. Үлгү navigator.clipboard менен алмашуу буферине жазылат. Ийри сызык дагы URL хешинде (#b=x1,y1,x2,y2) коддолот, ошондуктан аны бөлүшсө же кыстармага коюсо болот.