Генератор CSS Cubic Bezier кривих

Превуците две ручице да бисте обликовали криву анимације, упоредите кретање са константном брзином и копирајте cubic-bezier() вредност.

Шаблони
Контролне тачке
Прва контролна тачка
Друга контролна тачка
Преглед
ваша крива
linear
Вредност
cubic-bezier(0.25, 0.1, 0.25, 1)
Превуците ручицу или изаберите шаблон да бисте обликовали криву.

Крива се исцртава директно у вашем прегледачу. Ништа што овде подесите не шаље се на BroBroGo.

Честа питања

Шта значе две ручице и четири броја?

Крива се протеже од доњег левог угла (почетак) до горњег десног угла (крај), при чему време тече слева надесно, а напредак одоздо нагоре. Две ручице су контролне тачке које савијају криву — свака има своје 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 су заправо фиксне кубне Безијерове криве, па избором неког од тих шаблона можете видети тачне вредности које стоје иза њих.

Може ли се помоћу овога направити ефекат одбијања или еластичности?

Не директно. Једна кубна Безијерова крива може да направи ефекат ишчекивања или пребачаја — шаблони са ознаком „back” превлаче једну ручицу ван оквира графикона управо ради тога — али може да се креће само у једном смеру пре него што се умири. Ефекти одбијања (bounce) или еластичности захтевају промену смера више пута, што се не може описати једном кривом; за то су вам потребни CSS keyframes или функција linear() са више тачака.

Написао и прегледао уреднички тим BroBroGo.Последњи пут ажурирано:

Како функционише Генератор CSS Cubic Bezier кривих

Овај алат вам омогућава да визуелно креирате CSS криву анимације превлачењем две контролне тачке. Док подешавате криву, тачка се креће дуж ње, демонстрирајући ефекат убрзања и успоравања одмах поред друге тачке која се креће константном брзином. Након што обликујете криву, алат приказује одговарајућу 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". На пример, избором шаблона "Back Out", вредност функције се аутоматски поставља на cubic-bezier(0.34, 1.56, 0.64, 1).

Правила уноса и аутоматске исправке

Током рада са вредностима контролних тачака, алат примењује следећа правила за унос и исправку грешака:

  • Вредности за координату X су строго ограничене на опсег од 0 до 1, док су вредности за Y ограничене на опсег од -0.70 до 1.70.
  • Ако за поље "Прва контролна тачка X" унесете вредност ван опсега, на пример 9, и затим уклоните фокус са тог поља, вредност ће се аутоматски променити на максималних 1.
  • Ако потпуно испразните нумеричко поље и изгубите фокус са њега, алат ће вратити претходну исправну вредност.
  • Празни уноси или уноси који нису бројеви неће бити прихваћени, већ ће систем чекати да унесете комплетну и исправну вредност.
  • Вредности можете фино подешавати и помоћу тастатуре. Када је ручица контролне тачке у фокусу, притиском на тастер са стрелицом лево променићете њену вредност, на пример, на 0.99.

Излазни подаци и копирање

Као резултат вашег подешавања, алат генерише следеће елементе:

  • ваша крива: Визуелни приказ криве анимације коју сте обликовали.
  • cubic-bezier(x1, y1, x2, y2): Тачна CSS cubic-bezier() вредност која одговара тренутном облику криве.
  • Copied: Статус који се приказује након што успешно копирате генерисану вредност. Процес копирања приказује само ово обавештење о успеху, без икаквих порука о грешкама или одбијању.

Могућности и ограничења кривих

Кубне Безијерове криве омогућавају креирање напредних ефеката кретања, али имају и јасна физичка ограничења:

  • Ефекти пребачаја и повлачења: Док вредности за X морају остати унутар граница од 0 до 1, вредности за Y могу ићи изнад врха (преко 1) или испод дна (испод 0). Ово омогућава креирање ефеката где анимација прелази своју крајњу тачку (overshoot) или се повлачи уназад пре почетка главног кретања (pull-back).
  • Ограничење сложености: Једна cubic-bezier функција може да изведе ефекат ишчекивања и пребачаја, али може да се креће само у једном смеру и да се након тога умири. Она не може да опише сложене ефекте који захтевају вишеструку промену смера, као што су ефекат одбијања (bounce) или еластично кретање.

Приватност и сигурност података

Ваша приватност током коришћења алата је потпуно заштићена. Комплетна крива се исцртава директно у вашем веб прегледачу. Ништа што подесите или унесете унутар овог алата не шаље се на сервере 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 су заправо фиксне кубне Безијерове криве, па избором неког од тих шаблона можете видети тачне вредности које стоје иза њих.

Може ли се помоћу овога направити ефекат одбијања или еластичности?

Не директно. Једна кубна Безијерова крива може да направи ефекат ишчекивања или пребачаја — шаблони са ознаком „back” превлаче једну ручицу ван оквира графикона управо ради тога — али може да се креће само у једном смеру пре него што се умири. Ефекти одбијања (bounce) или еластичности захтевају промену смера више пута, што се не може описати једном кривом; за то су вам потребни CSS keyframes или функција linear() са више тачака.

Генератор градијената (Gradient Generator)Креирајте линеарни, радијални или конусни градијент, додајте боје и подесите смер, па копирајте CSS код једним кликом.Генератор заобљености углова (Border Radius)Заоблите сваки угао помоћу клизача, обликујте органске форме уз елиптични режим и одмах копирајте CSS код.CSS Flexbox ГенераторПодесите flex контејнер и његове ставке помоћу визуелних контрола, пратите промене уживо и копирајте CSS једним кликом.CSS Grid ГенераторДефинишите колоне и редове, превуците преко ћелија да бисте поставили ставке и копирајте готов CSS и пратећи HTML код једним кликом.Генератор сенки (Box Shadow)Подесите клизаче да бисте креирали сенку, додајте слојеве за већу дубину и одмах копирајте готов CSS код.CSS clamp() КалкулаторУнесите величину за мале и велике екране и добијте флуидну clamp() вредност која се глатко прилагођава — за величину фонта, унутрашње и спољашње маргине или размаке.