Sześcienny generator Beziera CSS

Dokumentacja Cubic Beziera

Co to jest sześcienna krzywa Beziera?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

Składnia CSS

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Typowe przypadki użycia

Animowane przejścia:Twórz płynne animacje dla elementów zmieniających właściwości.
Efekty przewijania:Kontroluj szybkość animacji przewijania.
Elementy interaktywne:Określ, w jaki sposób elementy reagują na interakcje użytkownika, takie jak najechanie kursorem lub kliknięcie.
Projektowanie ruchu:Twórz złożone sekwencje ruchu dla elementów interfejsu.

Popularne funkcje krzywych dynamiki

Ease (default)

Zaczyna się powoli, szybko przyspiesza, a następnie ponownie zwalnia.

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

Linear

Stała prędkość od początku do końca.

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

Ease-in

Zaczyna się powoli, potem przyspiesza.

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

Ease-out

Zaczyna się szybko, a potem zwalnia.

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

Wskazówki dotyczące tworzenia krzywych niestandardowych

Zachowaj wartości x w zakresie od 0 do 1:Wartości spoza tego zakresu mogą powodować nieoczekiwane zachowanie.
Wizualizacja krzywej:Użyj interaktywnego wykresu, aby zrozumieć, jak zmiany wpływają na animację.
Test z rzeczywistymi elementami:Zawsze wyświetlaj podgląd krzywej z rzeczywistymi komponentami interfejsu użytkownika, aby upewnić się, że jest odpowiednia.
Zapisz ustawienia wstępne:Dodaj do zakładek przydatne krzywe dla przyszłych projektów.