Generator krzywej Cubic Bezier
Zaprojektuj własną funkcję wygładzania CSS cubic-bezier(), przeciągając dwa punkty kontrolne i porównując ją na żywo z ruchem liniowym, a następnie skopiuj gotową wartość.
🔒 Przetwarzane w całości w Twojej przeglądarce — nic, co tu wpiszesz, nie zostanie nigdy przesłane.
Wynik
Ręczne wpisywanie cubic-bezier(x1, y1, x2, y2) i przeładowywanie strony, by sprawdzić odczucie, to powolny sposób dostrajania animacji. Ten generator zamyka tę pętlę: przeciągnij dowolny uchwyt punktu kontrolnego na krzywej lub wpisz dokładne liczby w pola x1/y1/x2/y2, a krzywa, gotowy do skopiowania ciąg CSS i podgląd animacji na żywo aktualizują się przy każdej zmianie — bez budowania, bez przeładowywania.
Obie osie działają celowo inaczej. x1 i x2 są ograniczone do przedziału od 0 do 1, ponieważ jest to wymóg specyfikacji CSS dla funkcji wygładzania cubic-bezier() — wartość spoza tego zakresu jest po prostu nieprawidłowa. y1 i y2 nie mają takiego ograniczenia: przeciągnij uchwyt powyżej górnej krawędzi pola lub poniżej dolnej, a krzywa odskoczy poza swoją pozycję początkową lub końcową, co jest dokładnie metodą tworzenia efektów sprężystych i odbić z pojedynczej krzywej wygładzania.
Zobaczyć liczbę a zobaczyć ruch to nie to samo, dlatego podgląd pokazuje zapętloną animację dwóch identycznych kulek obok siebie: jedna porusza się według Twojej krzywej, druga w stałym, liniowym tempie. Obserwowanie ich wyścigu to najszybszy sposób oceny, czy krzywa wygładzania faktycznie daje pożądane odczucie, zanim trafi do arkusza stylów. Strony presetów — konkretne liczby stojące za słowem kluczowym CSS ease-in-out, uczciwe przybliżenie odbicia, które niektórzy nazywają odbiciem, oraz opublikowana przez Google standardowa krzywa Material Design — są gotowymi punktami startowymi, od których możesz zacząć przeciąganie.
Wszystko działa lokalnie w Twojej przeglądarce: bez wysyłania plików, bez konta, bez komunikacji z serwerem, a generator kontynuuje pracę offline po załadowaniu strony.