Zasada działania krzywych Beziera w animacjach CSS
Funkcja cubic-bezier(x1, y1, x2, y2) definiuje rozkład prędkości przejścia lub animacji w czasie. Pozwala ona na porzucenie standardowych, liniowych przejść na rzecz naturalnie wyglądającego ruchu. Narzędzie Generator CSS Cubic Bezier umożliwia wizualne projektowanie tych krzywych poprzez bezpośrednią manipulację dwoma punktami kontrolnymi na wykresie.
Wykres krzywej przebiega od lewego dolnego rogu (który reprezentuje start animacji w czasie 0 i stanie początkowym 0) do prawego górnego rogu (oznaczającego koniec animacji w czasie 1 i stanie końcowym 1). Oś pozioma reprezentuje upływ czasu, natomiast oś pionowa obrazuje postęp animacji. Podczas modyfikacji krzywej, użytkownik widzi ruchomy punkt poruszający się wzdłuż zaprojektowanej ścieżki. Obok niego wyświetla się drugi punkt poruszający się w tempie jednostajnym, co pozwala na natychmiastowe porównanie dynamiki ruchu z animacją liniową. Po uzyskaniu pożądanego efektu, narzędzie generuje gotowy kod funkcji cubic-bezier(), który można skopiować bezpośrednio do arkusza stylów CSS.
Parametry wejściowe i kontrola punktów
Kształtowanie krzywej odbywa się za pomocą dwóch uchwytów, które odpowiadają za pozycję punktów kontrolnych:
- Pierwszy punkt kontrolny (określany współrzędnymi x1, y1),
- Drugi punkt kontrolny (określany współrzędnymi x2, y2).
Współrzędne X dla obu punktów kontrolnych określają czas, dlatego ich wartości muszą bezwzględnie mieścić się w przedziale od 0 do 1. Współrzędne Y odpowiadają za postęp i mogą wykraczać poza standardowy zakres, przyjmując wartości od -0.70 do 1.70. Pozwala to na chwilowe cofnięcie ruchu na początku animacji lub przekroczenie stanu docelowego na jej końcu.
Wprowadzanie wartości do generatora podlega określonym regułom walidacji:
- Wartości współrzędnych X są ograniczone do przedziału 0–1.
- Wartości współrzędnych Y są ograniczone do przedziału -0.70–1.70.
- Wpisanie wartości spoza zakresu (np. wpisanie cyfry
9dla współrzędnej X pierwszego punktu kontrolnego) i opuszczenie pola tekstowego (utrata fokusu) spowoduje automatyczne skorygowanie wartości do najbliższej granicy, czyli w tym przypadku do1. - Całkowite wyczyszczenie pola numerycznego i utrata fokusu przywraca poprzednią prawidłową wartość.
- Pola puste lub zawierające znaki nienumeryczne nie aktualizują wykresu i oczekują na wprowadzenie kompletnej, poprawnej liczby.
- Precyzyjną regulację można przeprowadzić za pomocą klawiatury. Naciśnięcie klawisza strzałki w lewo, gdy dany uchwyt punktu kontrolnego jest aktywny, zmniejsza jego wartość (przykładowo zmieniając ją na
0.99).
Korzystanie z gotowych szablonów
Generator ułatwia pracę poprzez zestaw predefiniowanych ustawień (szablonów), które odpowiadają standardowym słowom kluczowym CSS oraz popularnym efektom bibliotecznym:
- ease, ease-in, ease-out, ease-in-out – podstawowe krzywe CSS, których dokładne matematyczne współrzędne można podejrzeć po wybraniu z listy,
- Back In – krzywa z efektem cofnięcia na starcie,
- Back Out – krzywa z efektem przestrzelenia celu na końcu animacji. Wybór tego szablonu ustawia funkcję na dokładną wartość
cubic-bezier(0.34, 1.56, 0.64, 1), - Back In-Out – połączenie cofnięcia na początku i przestrzelenia na końcu ruchu.
Integracja z kodem CSS i interpretacja wyników
Wygenerowana wartość funkcji, np. cubic-bezier(0.25, 0.1, 0.25, 1), jest bezpośrednio wykorzystywana w deklaracjach stylów CSS. Wkleja się ją jako wartość właściwości odpowiedzialnych za czas przejścia:
transition-timing-function– przy określaniu dynamiki przejść płynnych,animation-timing-function– przy definiowaniu zachowania animacji opartych na klatkach kluczowych,- W zapisach skróconych, takich jak np.
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1).
Po kliknięciu przycisku kopiowania, interfejs wyświetla komunikat potwierdzający pomyślne zapisanie wartości w schowku. Proces ten nie generuje żadnych komunikatów o błędach ani odrzuceń.
Ograniczenia matematyczne pojedynczej krzywej
Choć funkcja cubic-bezier() daje ogromną kontrolę nad dynamiką ruchu, posiada ona sztywne ograniczenia matematyczne wynikające z jej natury. Pojedyncza krzywa trzeciego stopnia może opisywać ruch, który przyspiesza, zwalnia, cofa się (pull-back) lub przekracza punkt docelowy (overshoot). Nie jest jednak w stanie obsłużyć animacji wymagających wielokrotnych zmian kierunku.
Oznacza to, że za pomocą jednej funkcji cubic-bezier() niemożliwe jest stworzenie efektu wielokrotnego odbicia piłki (bounce) lub drgającej sprężyny (elastic). Tego typu złożone zachowania wymagają zastosowania sekwencji klatek kluczowych @keyframes lub nowszych rozwiązań, takich jak funkcja linear() z wieloma punktami pośrednimi.
Bezpieczeństwo danych i przetwarzanie
Wszystkie obliczenia, renderowanie podglądu oraz rysowanie krzywej odbywają się bezpośrednio w przeglądarce użytkownika. Żadne parametry wprowadzane do pól tekstowych ani współrzędne punktów kontrolnych nie są przesyłane do serwerów zewnętrznych ani do BroBroGo.
Często zadawane pytania (FAQ)
Co oznaczają dwa uchwyty i cztery liczby? Krzywa przebiega od lewego dolnego rogu (początek) do prawego górnego (koniec). Oś pozioma to czas, a pionowa to postęp animacji. Dwa uchwyty to punkty kontrolne, które wyginają krzywą — każdy ma współrzędne X i Y, co daje zapis cubic-bezier(x1, y1, x2, y2). Współrzędna X musi mieścić się w przedziale od 0 do 1, natomiast Y może wykraczać poza te granice, co pozwala na uzyskanie efektu cofnięcia lub przestrzelenia celu.
Jak użyć tej wartości w kodzie CSS? Skopiuj wygenerowaną funkcję cubic-bezier() i wklej ją w kodzie CSS tam, gdzie definiuje się dynamikę przejścia — np. transition-timing-function, animation-timing-function lub w zapisie skróconym, np. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Słowa kluczowe takie jak ease, ease-in, ease-out i ease-in-out to po prostu predefiniowane krzywe cubic-bezier — wybór tych szablonów pokaże dokładne wartości stojące za tymi nazwami.
Czy za pomocą tej krzywej można uzyskać efekt odbicia (bounce) lub sprężystości? Nie bezpośrednio. Pojedyncza krzywa cubic-bezier może stworzyć efekt cofnięcia lub lekkiego przestrzelenia (szablony typu „back” wyciągają jeden z uchwytów poza obszar wykresu), ale ruch może odbyć się tylko w jedną stronę przed zatrzymaniem. Efekty typu bounce (odbicie) lub elastic wymagają wielokrotnej zmiany kierunku, czego nie da się zapisać jedną krzywą — do tego potrzebne są klatki kluczowe CSS (@keyframes) lub funkcja linear() z wieloma punktami.
Dlaczego moja wartość X automatycznie zmienia się na 1 lub 0? Współrzędna X reprezentuje postęp czasu w animacji, który fizycznie nie może się cofać ani wykraczać poza ramy czasowe trwania przejścia. Z tego powodu wartości X dla obu punktów kontrolnych są ściśle ograniczone do przedziału od 0 do 1. Jeśli wpiszesz wartość spoza tego zakresu i opuścisz pole edycji, generator automatycznie przywróci najbliższą dopuszczalną wartość graniczną.