Уредник на cubic-bezier

Како да го користите уредникот на cubic-bezier

1. Повлечете ги двете рачки на графиконот. P1 (првата контролна точка) го обликува почетокот на движењето, P2 крајот. Времето тече од лево кон десно, а напредокот од долу кон горе.
2. Или внесете вредност во Вредност cubic-bezier(): цело cubic-bezier(0.4, 0, 0.2, 1), четири броја или клучен збор како ease-in-out. Полињата x1, y1, x2 и y2 уредуваат по една координата.
3. Почнете од менито Готови кривини (CSS клучни зборови, фамилиите од sine до back и кривините на Material Design) или од копчињата со клучни зборови. Кога вашата кривина одговара на готова, нејзиното име се прикажува до копчињата.
4. Погледнете го Преглед на анимацијата: точката на Вашата кривина и точката на linear минуваат исто растојание за исто Времетраење. Користете Пауза/Пушти и Рестартирај за да ги споредите.
5. Копирајте го резултатот од CSS функција за време или копирајте ја Апроксимација со linear() и изберете го бројот на Сегменти.

Тастатура: фокусирајте рачка и користете ги стрелките за да ја поместите за 0,01 или 0,1 со Shift.

Ако вашиот систем е поставен да го намали движењето, анимацијата почнува паузирана. Притиснете Пушти ако сакате сепак да се изврши.

Алатката работи во вашиот прелистувач. Ништо од внесеното не се испраќа на сервер.

Што значи cubic-bezier()

CSS функцијата за easing го пресликува изминатото време на премин (0 до 1) во неговиот напредок (0 до 1). cubic-bezier(x1, y1, x2, y2) го опишува ова пресликување со кубна Безиева кривина што почнува во (0, 0), завршува во (1, 1) и се влече од две контролни точки, P1 = (x1, y1) и P2 = (x2, y2).

• Вредностите x се времиња и мора да останат меѓу 0 и 1, инаку функцијата не би била валидна кривина на време. Уредникот ги држи во опсег.
• Вредностите y се напредок и може да одат под 0 или над 1. y над 1 ја прави анимацијата да ја надмине целта и да се врати, како кривините Back; под 0 најпрво се движи наназад.
• Стрмен наклон значи брзо движење, рамен бавно. ease-out почнува брзо и завршува бавно, што делува природно за елементи што влегуваат на екранот. ease-in прави спротивно и одговара на елементи што излегуваат.

CSS клучните зборови се кратенки: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) и linear = (0, 0, 1, 1).

Апроксимацијата со linear()

Понововата функција linear() наведува вредности на напредок во еднакво распоредени времиња, на пример linear(0, 0.25, 0.5, 0.75, 1), и ги поврзува со прави линии. Алатката ја зема вашата кривина (ја решава Безиевата за секој временски чекор) и ги запишува вредностите со три децимали. Со 20 до 40 сегменти резултатот е визуелно идентичен со кривината. Вистинската корист од linear() е за кривини што Безиева не може да ги нацрта, како отскокнување и пружини, но овозможува и споделување на една синтакса. Работи во Chrome и Edge 113+, Firefox 112+ и Safari 17.2+, па задржете ја вредноста cubic-bezier() како резервна.