Generator CSS cubic-bezier

Czym jest Generator CSS cubic-bezier?

Generator CSS cubic-bezier to darmowy edytor wizualny funkcji czasu cubic-bezier() używanej przez przejścia i animacje CSS, stworzony dla programistów front-end i projektantów ruchu. Wybierz ustawienie wstępne takie jak ease, linear, ease-in, ease-out lub ease-in-out albo samodzielnie dostrój dwa punkty kontrolne: wartości x są ograniczone do dozwolonego zakresu 0–1, podczas gdy wartości y mogą przekraczać 1 lub schodzić poniżej 0, aby tworzyć overshoot i anticipation. Podgląd rysuje krzywą na kwadracie jednostkowym, dzięki czemu na pierwszy rzut oka odczytasz przyspieszanie i zwalnianie, a dokładna deklaracja cubic-bezier(x1, y1, x2, y2) jest generowana do skopiowania. Używaj go zawsze, gdy wbudowane słowo kluczowe wydaje się zbyt ogólne, a chcesz ruchu bardziej żwawego, bardziej sprężystego lub bardziej wyważonego.

Jak używać Generator CSS cubic-bezier

1. Otwórz Ustawienia i wybierz początkowe ustawienie wstępne — ease, linear, ease-in, ease-out lub ease-in-out — aby zainicjować punkty kontrolne.
2. Przeciągnij dwa okrągłe uchwyty na podglądzie krzywej, aby przekształcić wygładzanie, lub wpisz dokładne wartości w pola x1, y1, x2 i y2.
3. Utrzymuj x1 i x2 między 0 a 1; przesuń y1 lub y2 powyżej 1 albo poniżej 0, aby dodać do ruchu overshoot lub anticipation.
4. Odczytaj krzywą względem przerywanej liniowej linii bazowej, aby ocenić, jak wygładzanie przyspiesza i zwalnia.
5. Skopiuj wygenerowaną wartość cubic-bezier() i wklej ją do swojej transition-timing-function lub animation-timing-function.

Przykłady

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

Najczęściej zadawane pytania

Co oznaczają cztery liczby cubic-bezier?

To współrzędne dwóch punktów kontrolnych: x1, y1 dla pierwszego punktu i x2, y2 dla drugiego. Krzywa zawsze zaczyna się w (0,0) i kończy w (1,1); punkty kontrolne zginają ją pomiędzy, co decyduje o tym, jak animowana właściwość przyspiesza i zwalnia w czasie.

Dlaczego nie mogę ustawić x1 lub x2 powyżej 1?

Specyfikacja CSS wymaga, aby współrzędne x (czas) obu punktów kontrolnych pozostawały między 0 a 1, dzięki czemu funkcja czasu pozostaje prawidłowym odwzorowaniem postępu na wynik. To narzędzie automatycznie ogranicza pola x i uchwyty przeciągania do tego zakresu. Wartości y mogą natomiast przekraczać 1 lub schodzić poniżej 0, aby tworzyć overshoot lub anticipation.

Jak stworzyć odbijające się lub sprężyste wygładzanie?

Przesuń jedną z wartości y powyżej 1 (dla overshootu na końcu) lub poniżej 0 (dla anticipation na początku). Na przykład cubic-bezier(0.34, 1.56, 0.64, 1) przestrzeliwuje, zanim się ustabilizuje, dając sprężyste wrażenie bez żadnego JavaScriptu.

Gdzie używam wygenerowanej wartości?

Wklej ją jako wartość transition-timing-function lub animation-timing-function — na przykład transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Zastępuje słowa kluczowe takie jak ease czy ease-in-out Twoją własną krzywą.

Czy moje dane są wysyłane na serwer?

Nie. Cały edytor działa w Twojej przeglądarce w JavaScripcie — punkty kontrolne i krzywa są obliczane lokalnie i nigdy nie są przesyłane, więc działa prywatnie, a po wczytaniu strony nawet offline.