Какво представлява инструментът и как работи
Инструментът CSS Cubic Bezier Генератор позволява визуално да създадете CSS крива на ускорение (easing curve) чрез плъзгане на две контролни точки. Докато настройвате формата на кривата, една точка се движи по нея, демонстрирайки ефекта на ускорението непосредствено до друга точка, която се движи с постоянна, равномерна скорост. След като постигнете желания резултат, инструментът предоставя съответната стойност cubic-bezier(), която можете лесно да копирате за директна употреба във Вашия CSS код.
Контроли и въвеждане на данни
Оформянето на кривата се управлява чрез следните входящи параметри и действия:
- Плъзгане на две дръжки: Тези физически дръжки контролират формата и извивката на Вашата крива на ускорение.
- Първа контролна точка X: Числова стойност, която задължително трябва да бъде в диапазона между 0 и 1.
- Първа контролна точка Y: Числова стойност, ограничена в диапазона от -0.70 до 1.70.
- Втора контролна точка X: Числова стойност, която също трябва да остане между 0 и 1.
- Втора контролна точка Y: Числова стойност в диапазона от -0.70 до 1.70.
- Избор на шаблон: Можете бързо да изберете готови предварително зададени опции, включително стандартните "ease", "ease-in", "ease-out", "ease-in-out", както и по-динамичните "Back In", "Back Out" или "Back In-Out".
Изходящи резултати и визуализация
Инструментът генерира следните визуални и текстови резултати в реално време:
- Вашата крива: Графично представяне на текущата крива на ускорение, което се променя веднага при всяка корекция.
- cubic-bezier(x1, y1, x2, y2): Точната стойност на CSS функцията
cubic-bezier(), съответстваща на конфигурираната от Вас крива. - Copied: Текстов статус за успешно копиране, който се изписва веднага след като копирате генерираната
cubic-bezier()стойност.
Правила за валидация и специфични поведения
При работа с генератора важат следните математически правила и софтуерни поведения:
- Посока на кривата: Кривата винаги започва от долния ляв ъгъл (началото на анимацията) и завършва в горния десен ъгъл (края на анимацията). Времето прогресира от ляво на дясно, а физическият прогрес на анимацията се движи нагоре.
- Ограничения за X координатите: Стойностите за X на двете контролни точки са строго ограничени в границите между 0 и 1. Ако се опитате да въведете стойност извън тези граници (например въведете
9за „Първа контролна точка X“) и след това фокусът върху полето бъде изгубен, стойността автоматично ще се коригира на максимално допустимата1. - Ограничения за Y координатите: Стойностите за Y могат да излизат над горната граница (над 1) или под долната граница (под 0) в диапазона от -0.70 до 1.70. Това позволява създаването на ефекти на преминаване на лимита (overshoot) или издърпване назад преди старта (pull-back).
- Възстановяване на стойности: Ако изтриете съдържанието на някое от числовите полета и след това преместите фокуса извън него, системата автоматично ще възстанови последната валидна стойност.
- Фино регулиране с клавиатурата: Когато дадена дръжка на контролна точка е фокусирана, натискането на клавиша със стрелка наляво ще промени стойността ѝ (например на
0.99). - Поведение при непълни данни: Празни или нечислови входове в полетата няма да счупят инструмента, а просто ще изчакат въвеждането на пълна и коректна стойност.
- Шаблонът "Back Out": Изборът на този готов шаблон автоматично задава стойността на
cubic-bezier(0.34, 1.56, 0.64, 1). - Копиране на стойността: Процесът по копиране на резултата разполага единствено със състояние за успех и не показва съобщения за отхвърляне или грешка.
Поверителност и обработка на данните
Вашата поверителност е напълно защитена при използването на този инструмент:
- Кривата се изчертава директно във Вашия браузър.
- Нищо от това, което настройвате или въвеждате в инструмента, не се изпраща или качва към сървърите на 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 криви, така че изборът на някой от тези шаблони Ви показва точната стойност зад ключовата дума.
Може ли да създаде ефект на отскачане (bounce) или еластичност?
Не и самостоятелно. Единична cubic-bezier крива може да предвижда и преминава границите (overshoot) — шаблоните „back“ издърпват едната дръжка извън кутията точно за тази цел — но тя може да се движи само в една посока и след това да се установи. Ефектите на отскачане (bounce) и еластичност променят посоката си няколко пъти, което не може да бъде изразено с една cubic-bezier крива; за тях са необходими CSS keyframes или функцията linear() с множество точки.