Генератор на Cubic Bezier

Писането на cubic-bezier(x1, y1, x2, y2) на ръка и презареждането на страницата, за да проверите усещането, е бавен начин за настройка на анимация. Този генератор затваря този цикъл: преместете някоя от дръжките на контролните точки върху кривата или въведете точни числа в полетата x1/y1/x2/y2 и кривата, готовият за копиране CSS низ и живият предварителен преглед на анимацията се обновяват при всяка промяна – без стъпка на изграждане, без презареждане.

Двете оси работят различно нарочно. x1 и x2 остават ограничени между 0 и 1, защото това е, което CSS спецификацията реално изисква от времевата функция cubic-bezier() – стойност извън този диапазон просто е невалидна. y1 и y2 нямат такова ограничение: преместете дръжка над горния край на полето или под долния и кривата прехвърля отвъд началото или края си, което е точно начинът, по който се изграждат пружиниращи и отскачащи ефекти от единична крива на изглаждане.

Да видите число не е същото като да видите движението, затова предварителният преглед движи две еднакви топки една до друга в цикъл: едната се движи по вашата персонализирана крива, а другата – с обикновено постоянно линейно темпо. Да ги гледате как се състезават е най-бързият начин да разберете дали дадена крива на изглаждане наистина създава усещането, което искате, преди изобщо да стигне до стилов файл. Страниците с предварителни настройки – истинските числа зад собствената ключова дума ease-in-out на CSS, едно честно приближение на прехвърляне, което някои наричат отскачане, и публикуваната от Google стандартна крива на Material Design – са готови отправни точки, от които можете да влачите, вместо да започвате от празни контролни точки.

Всичко работи локално във вашия браузър: без качване, без акаунт, без обратна връзка със сървър и генераторът продължава да работи офлайн, след като страницата се е заредила.