Як стварыць уласную крывую згладжвання cubic-bezier для CSS?

Перацягніце дзве кантрольныя кропкі на графіцы, увядзіце дакладныя значэнні x1, y1, x2, y2 або выберыце прапаноўку. Затым выберыце CSS у «Фармат вывада» і націсніце «Скапіяваць», каб атрымаць значэнне cubic-bezier() для transition-timing-function.

Як зрабіць эфект адскоку або пералёту з дапамогай cubic-bezier?

Перацягніце кантрольную кропку вышэй або ніжэй поля так, каб яе значэнне Y выйшла за межы 0-1. Y можа выходзіць за гэты дыяпазон, у той час як X застаецца паміж 0 і 1. Прапаноўкі back-out і anticipate — гэта гатовыя адпраўныя кропкі для пералёту.

Ці магу я атрымаць згладжванне для 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 Easing — бясплатна

Праектуйце крывыя 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 з прыхоційСпроектуйце натуральныя эфекты павільнення для наўмесных эфектаў, меню і пераходаў інтэрфейсу.
Анімацыі адскока і пераскокаСтварайце прыцяжныя рухомасці пружыны, цягнучы кантрольныя пункты за межы скрыні.
Павільненне для анімацыяў @keyframesВыберыце правільную animation-timing-function для CSS keyframe анімацыяў.
Значэнні pavil'nennyja для JS-біблgatekak anіmacyjiАтрымайце cubic-bezier значэнні для GSAP, Framer Motion, anime.js і іншых.
Разумейце, як працуе павільненнеАдстежвайце сувязь паміж крывой безье і рухомасцю, якую яна вырабляе.

Як гэта працуе

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

1
Перацягвайце ці ўводзьце кропкі кіравання
Дзве ручкі (P1 бірузовая, P2 ружовая) размешчаны на канвасе SVG. Перацягванне выкарыстоўвае Pointer Events API з setPointerCapture, таму ручка адсочвае ваш палец ці курсор нават за межамі SVG. Вы таксама можаце зрушваць ручкі клавішамі са стрэлкамі ці ўводзіць дакладныя значэнні ў палі лікаў x1/y1/x2/y2.
2
SVG малюе крывую ў рэальным часе
Крывая — гэта адзіны элемент SVG <path>, чыя каманда C (кубічны Бэзье) пераразлічваецца з чатырох каардынат кропак кіравання пры кожным абнаўленні стану. Ні канваса, ні знешняй бібліятэкі — рухавік SVG браўзера малюе шлях непасрэдна.
3
Рухавік CSS браўзера паказвае папярэдні прагляд змякчэння
Тры жывыя анімацыі (кропка, якая слізгае, пераход шырыні і маштаб) запускаюць CSS @keyframes са значэннем cubic-bezier(), устаўленым убудавана. Уласны рухавік анімацыі браўзера інтэрпрэтуе крывую, так што тое, што вы бачыце, дакладна тое, што вырабіць ваш вытворчы CSS.
4
Скапіруйце ўрывак у сінтаксісе вашага фрэймворка
Укладкі фарматуюць тыя ж чатыры лічбы як CSS transition-timing-function, клас адвольнага значэння Tailwind, масіў змякчэння Framer Motion ці радок змякчэння anime.js. Урывак запісваецца ў буфер абмену з navigator.clipboard. Крывая таксама кадуецца ў хэшы URL (#b=x1,y1,x2,y2), так што вы можаце падзяліцца ёю ці захаваць у закладкі.