Kluczowe punkty
- 01Przeciągaj uchwyty dwóch punktów kontrolnych, aby kształtować krzywę easingu wizualnie zamiast zgadywać wartości liczbowe.
- 02Animacja piłki na żywo odtwarza timing, dzięki czemu możesz poczuć ruch przed zatwierdzeniem.
- 03Wszystkie pięć wbudowanych presetów CSS (ease, linear, ease-in, ease-out, ease-in-out) jest dostępnych jako punkty wyjścia.
- 04Wartość cubic-bezier() aktualizuje się na żywo z dokładnością do dwóch miejsc po przecinku, gotowa do wklejenia w dowolną właściwość CSS.
Dlaczego niestandardowe krzywe easingu są ważne dla ruchu interfejsu
Wbudowane funkcje timing CSS — ease, ease-in-out, linear — obejmują wiele przypadków, ale każdy interfejs ma momenty, gdy domyślne ustawienie wydaje się nieodpowiednie. Tooltip, który pojawia się zbyt szybko, modal, który przesadnie się otwiera, pasek postępu, który wygląda mechanicznie. Krzywe cubic-bezier pozwalają dostroić ruch, aby był naturalny zamiast mechaniczny, ale cztery liczby w cubic-bezier(0.4, 0, 0.2, 1) są prawie niemożliwe do bezpośredniego zrozumienia.
Edytor cubic-bezier Handytool zamienia te liczby w wizualną krzywą z dwoma ruchomymi uchwytami. Przesuń uchwyt, a animacja piłki odtwarza się natychmiast, dzięki czemu możesz iterować poprzez czucie, aż ruch będzie odpowiadać Twojemu zamiarowi. Następnie skopiuj wartość i wklej ją do CSS — gotowe.
Jak zaprojektować krzywę easingu CSS
- 01
Zacznij od presetu
Wybierz ease, linear, ease-in, ease-out lub ease-in-out jako linię bazową. Uchwyty przylegają do prawidłowych pozycji dla każdego presetu.
- 02
Przeciągaj uchwyty punktów kontrolnych
Każdy uchwyt kontroluje jeden koniec krzywej — uchwyt początkowy kształtuje początkowe przyspieszenie, uchwyt końcowy kształtuje końcowe spowolnienie. Przesunięcie uchwytu automatycznie zmienia preset na 'custom'.
- 03
Obserwuj animację piłki
Piłka animuje się od lewej do prawej strony, używając Twojej krzywej. Dostosuj suwak czasu trwania, aby podejrzeć powolne vs szybkie przejścia.
- 04
Eksperymentuj z przesunięciem
Przeciągaj uchwyt osi Y powyżej 1 lub poniżej 0, aby utworzyć przesunięcie — efekt 'sprężysty', który sprawia, że menu otwiera się energicznie.
- 05
Skopiuj wartość CSS
Kliknij Kopiuj, aby pobrać ciąg cubic-bezier() i wklej go do transition-timing-function lub animation-timing-function w arkuszu stylów.
Działa całkowicie w Twojej przeglądarce
Edytor to samodzielne narzędzie przeglądarki — żadne czcionki, skrypty i dane nie są ładowane po otwarciu strony. Przeciąganie uchwytów i podgląd animacji działa offline. Formuła cubic-bezier używana do podglądu piłki to ta sama, którą przeglądarki używają dla przejść CSS, więc to, co widzisz w edytorze, to dokładnie to, co będzie produkować Twój arkusz stylów.
Nie ma nic do zainstalowania i nic do rejestracji. Wynik to pojedyncza wartość CSS — wklej ją i gotowe.
FAQ edytora Cubic-Bezier
Co to jest krzywa easingu cubic-bezier?
To krzywa matematyczna zdefiniowana przez dwa punkty kontrolne, która określa, jak przejście lub animacja CSS przyspieszają w czasie. Cztery liczby w cubic-bezier(x1, y1, x2, y2) ustawiają pozycje tych punktów kontrolnych.
Dlaczego wartości Y mogą być powyżej 1 lub poniżej 0?
Wartości Y poza 0–1 tworzą przesunięcie i niedosunięcie — krzywa przechodzi poza punkt końcowy przed ustaleniem się. To tworzy 'sprężyste' krzywe easingu. Wartości X muszą pozostać w 0–1.
Jak używać wyniku?
Skopiuj ciąg cubic-bezier(...) i wklej go do dowolnej wartości transition-timing-function lub animation-timing-function CSS. Działa w każdej nowoczesnej przeglądarce.
Co dokładnie oznacza ease-in-out?
Ease-in-out zaczyna się powoli, przyspieszając na środku i zwalniając na końcu — cubic-bezier(0.42, 0, 0.58, 1). Odzwierciedla, jak rzeczywiste obiekty przyspieszają i zwalniają, i jest domyślnym wyborem dla większości wyrafinowanego ruchu interfejsu.
Czy podgląd animacji piłki jest dokładny dla CSS?
Tak — podgląd używa tej samej formuły cubic bezier, którą przeglądarki stosują do przejść CSS. Suwak czasu trwania pozwala poczuć powolne vs szybkie krzywe przed zatwierdzeniem.