Edytor krzywych cubic-bezier

Jak korzystać z edytora cubic-bezier

1. Przeciągaj dwa uchwyty na wykresie. P1 (pierwszy punkt kontrolny) kształtuje początek ruchu, P2 – jego koniec. Czas biegnie od lewej do prawej, a postęp od dołu do góry.
2. Możesz też wpisać wartość w polu Wartość cubic-bezier(): pełne cubic-bezier(0.4, 0, 0.2, 1), cztery liczby albo słowo kluczowe, np. ease-in-out. Pola x1, y1, x2 i y2 zmieniają po jednej współrzędnej.
3. Zacznij od menu Gotowe krzywe (słowa kluczowe CSS, rodziny od Sine do Back oraz krzywe Material Design) lub przycisków ze słowami kluczowymi. Gdy twoja krzywa odpowiada gotowej, jej nazwa pojawia się obok przycisków.
4. Obserwuj Podgląd animacji: kropka na krzywej Twoja krzywa i kropka na krzywej linear pokonują tę samą odległość w tym samym czasie (Czas trwania). Użyj przycisków Pauza/Odtwórz i Od nowa, aby je porównać.
5. Skopiuj wynik z pola Funkcja czasowa CSS albo skopiuj Przybliżenie linear() i wybierz liczbę segmentów (Segmenty).

Klawiatura: ustaw fokus na uchwycie i przesuwaj go strzałkami o 0,01 albo o 0,1 z wciśniętym Shift.

Jeśli w systemie włączone jest ograniczenie ruchu, animacja startuje wstrzymana. Naciśnij Odtwórz, jeśli mimo to chcesz ją uruchomić.

Co oznacza cubic-bezier()

Funkcja wygładzania (easing) w CSS przekształca upływ czasu przejścia (od 0 do 1) w jego postęp (od 0 do 1). cubic-bezier(x1, y1, x2, y2) opisuje to przekształcenie sześcienną krzywą Béziera, która zaczyna się w (0, 0), kończy w (1, 1) i jest „ciągnięta” przez dwa punkty kontrolne: P1 = (x1, y1) i P2 = (x2, y2).

• Wartości x to czas i muszą mieścić się między 0 a 1, inaczej funkcja nie byłaby poprawną krzywą czasową. Edytor utrzymuje je w tym zakresie.
• Wartości y to postęp i mogą spaść poniżej 0 lub przekroczyć 1. Y powyżej 1 sprawia, że animacja przestrzeliwuje cel i wraca, jak w krzywych Back; poniżej 0 element najpierw cofa się.
• Strome nachylenie oznacza szybki ruch, płaskie – powolny. ease-out zaczyna szybko i kończy powoli, co wygląda naturalnie dla elementów wchodzących na ekran. ease-in działa odwrotnie i pasuje do elementów, które znikają.

Słowa kluczowe CSS to skróty: 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), a linear = (0, 0, 1, 1). W kodzie CSS liczby zawsze zapisuje się z kropką dziesiętną.

Przybliżenie linear()

Nowsza funkcja linear() wymienia wartości postępu w równych odstępach czasu, np. linear(0, 0.25, 0.5, 0.75, 1), i łączy je odcinkami prostymi. Narzędzie próbkuje twoją krzywą (rozwiązuje równanie Béziera dla każdego kroku czasu) i zapisuje te wartości z trzema miejscami po przecinku. Przy 20–40 segmentach wynik jest wizualnie identyczny z krzywą. Prawdziwa przewaga linear() ujawnia się przy krzywych, których Bézier nie narysuje, takich jak odbicia i sprężyny, ale funkcja pozwala też używać jednej składni. Działa w Chrome i Edge 113+, Firefox 112+ oraz Safari 17.2+, więc zachowaj wartość cubic-bezier() jako rozwiązanie awaryjne.