Generator CSS cubic-bezier

Czym jest Generator CSS cubic-bezier?

Generator CSS cubic-bezier to darmowy edytor wizualny funkcji wygładzania używanych przez przejścia i animacje CSS, stworzony dla programistów front-end i projektantów ruchu. W trybie cubic-bezier przeciągasz dwa punkty kontrolne (lub je wpisujesz), aby ukształtować krzywą: wartości x pozostają w dozwolonym zakresie 0–1, podczas gdy wartości y mogą przekraczać 1 lub schodzić poniżej 0, tworząc overshoot i anticipation. Tryb steps() obejmuje schodkowe czasy z regulowaną liczbą kroków i terminem skoku — jump-start, jump-end, jump-none lub jump-both, gdzie step-start i step-end to steps(1, …). Podgląd animacji na żywo odtwarza bieżące wygładzanie na prostokącie, który porusza się i skaluje przez ustawiony przez Ciebie czas, możesz nałożyć dowolne ustawienie wstępne jako krzywą-ducha do porównania oraz zaimportować istniejący ciąg cubic-bezier() lub steps(). Skopiuj dokładną deklarację do swojej transition-timing-function lub animation-timing-function.

Jak używać Generator CSS cubic-bezier

1. Wybierz u góry tryb cubic-bezier() lub steps(), albo otwórz Ustawienia, aby zacząć od ustawienia wstępnego takiego jak ease, ease-in-out lub linear.
2. W trybie cubic-bezier przeciągnij dwa uchwyty na wykresie lub wpisz dokładne wartości x1, y1, x2 i y2; przesuń y powyżej 1, aby uzyskać overshoot.
3. W trybie steps() ustaw liczbę kroków i wybierz termin skoku (jump-start, jump-end, jump-none lub jump-both), aby narysować schodki.
4. Naciśnij Odtwórz, aby uruchomić animację na żywo na poruszającym się i skalującym prostokącie, i dostosuj czas w sekundach, by poczuć rytm.
5. Wybierz krzywą porównawczą w Ustawieniach, aby nałożyć ustawienie wstępne jako ducha na tym samym wykresie, albo wklej wartość w Importuj i zastosuj ją.
6. Skopiuj wygenerowaną wartość cubic-bezier() lub steps() 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.34, y1 1.56, x2 0.64, y2 1

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

tryb steps, N 4, jump-end

steps(4, jump-end)

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.

Do czego służy tryb steps()?

steps() przeskakuje między ustaloną liczbą wartości zamiast płynnie interpolować — przydatne przy animacjach sprite'ów, tykających licznikach czy efektach klatka po klatce. Ustaw liczbę kroków i termin skoku: jump-start, jump-end, jump-none lub jump-both. step-start jest równe steps(1, jump-start), a step-end równe steps(1, jump-end).

Jak działa podgląd animacji na żywo?

Naciśnij Odtwórz, a prostokąt przesuwa się po torze i skaluje przy użyciu bieżącego wygładzania, tam i z powrotem. Zmień czas w sekundach, aby go spowolnić lub przyspieszyć; używa czystej animacji CSS z Twoją wartością cubic-bezier() lub steps() jako funkcją czasu.

Czy mogę zaimportować istniejącą wartość wygładzania?

Tak. Wklej wartość cubic-bezier(...) lub steps(...) — albo słowo kluczowe takie jak ease-in-out, step-start czy step-end — w pole Importuj i zastosuj ją; edytor przetworzy ją z powrotem na punkty kontrolne lub ustawienia kroków.

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.