Кубичен генератор на Безие

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

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

Виждането на число не е същото като виждането на движението, така че визуализацията пуска две идентични топки една до друга в цикъл: едната се движи, използвайки вашата персонализирана крива, другата се движи с обикновено постоянно линейно темпо. Гледането им да се състезават е най-бързият начин да разберете дали кривата на облекчаване наистина създава усещането, което искате, преди изобщо да достигне до таблица със стилове. Предварително зададените страници – реалните числа зад собствената ключова дума на CSS за улесняване на излизането, честно приближение на надхвърляне, което някои наричат ​​отскачане, и публикуваната от Google стандартна крива на Material Design – са готови отправни точки, от които можете да плъзнете, а не празни контролни точки.

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