⭐ 0
🔍
Tekst Obraz PDF i Dokumenty Audio Muzyka Elektronika Czas Użyteczne programy Walidatory Ezoteryka Gry

Krzywa łagodzenia CSS w stylu Bounce

Zaprojektuj niestandardową funkcję synchronizacji CSS Cube-bezier(), przeciągając dwa punkty kontrolne, wyświetl podgląd na żywo względem odniesienia liniowego, a następnie skopiuj gotową wartość.

Przeciągnij pomarańczowy uchwyt (P1) i czerwony uchwyt (P2), aby zmienić kształt krzywej — klawisze strzałek również działają. X pozostaje zaciśnięte pomiędzy 0 a 1, zgodnie z wymaganiami CSS; przeciągnij uchwyt nad lub pod polem, aby wysłać y poza ten zakres w celu uzyskania efektów przekroczenia i odbicia.

Twoja krzywa

Liniowy (dla porównania)

Przetwarzanie... 0%

Wynik

Ta strona otwiera generator z już załadowanymi x1=0,68, y1=-0,55, x2=0,265, y2=1,55 — krzywa przekroczenia, którą niektóre biblioteki łagodzące oznaczą jako easyOutBack. Ujemne y1 i y2 powyżej 1 są dokładnie powodem, dla którego poniższy podgląd animacji cofa się od początku i końca, zanim się uspokoi; przeciągnij uchwyt lub edytuj liczby, aby efekt był silniejszy lub łagodniejszy.

Mówiąc szczerze, co to jest: pojedyncza krzywa sześcienna-bezier() ma tylko dwa punkty kontrolne, więc może przybliżać jeden ruch przekroczenia i osiadania, a nie prawdziwe fizyczne odbicie z wieloma odbiciami z kilkoma malejącymi przeskokami. Aby uzyskać dosłowny efekt odbicia piłki, potrzeba wielu klatek kluczowych lub segmentów funkcji kroków() połączonych ze sobą — ta krzywa jest najbliższa zwykłej funkcji synchronizacji przejścia, jaką można uzyskać w jednej linii.

To pojedyncze przekroczenie jest w dalszym ciągu dokładnie tym, czego oczekuje najbardziej sprężysty interfejs użytkownika: przycisk, który wyskakuje nieco powyżej rozmiaru spoczynkowego, modal, który przekracza swój rozmiar przed osiedleniem się, karta, która wskakuje na miejsce. Skopiuj wartość w niezmienionej postaci, aby uzyskać wrażenie zgryźliwości, lub zmiękcz y1 w stronę 0 i y2 w stronę 1, aby cofnąć przeregulowanie.

🛡️
Wykonywane w przeglądarce

Twoje pliki i dane nigdy nie opuszczają tego urządzenia. Przetwarzanie odbywa się całkowicie offline. W 100% bezpieczne.

Zasady i formaty

  • Przeciągany edytor krzywych SVG z dwoma uchwytami (P1 i P2) oraz edytowalnymi wejściami liczbowymi x1/y1/x2/y2 dla wartości precyzyjnych w pikselach.
  • Zapętlony podgląd animacji porównujący niestandardowe taktowanie funkcji sześciennej bezier() z liniową kulką odniesienia, dzięki czemu można zobaczyć złagodzenie, a nie tylko je przeczytać.
  • Kopiowalny ciąg znaków sześciennych (x1, y1, x2, y2) gotowy do funkcji synchronizacji przejścia lub funkcji synchronizacji animacji, a także gotowe strony ułatwiające wychodzenie, odbijanie i standardową krzywą Material Design.

Kluczowe korzyści

✓ Przeciągnij dowolny uchwyt punktu kontrolnego i obejrzyj krzywą, podgląd animacji na żywo i ciąg CSS, który można kopiować, aktualizują się razem — nie ma potrzeby zapamiętywania współrzędnych matematycznych.
✓ Y może przekroczyć wartości 0 i 1 w przypadku efektów sprężystości i odbicia, podczas gdy X pozostaje ograniczony do zakresu 0–1 faktycznie wymaganego przez CSS, więc każda skopiowana wartość jest ważna w momencie jej wklejenia.
✓ Podgląd obok siebie porównuje niestandardową krzywą z prostym odniesieniem liniowym, więc różnica w odczuciu ruchu — cały powód stosowania wygładzania — jest oczywista na pierwszy rzut oka, a nie tylko w postaci kodu wyjściowego.

Przypadki użycia

  • • Czy potrzebujesz niestandardowej funkcji synchronizacji przejścia CSS lub wartości funkcji synchronizacji animacji zamiast jednego z wbudowanych słów kluczowych ułatwiających?
  • • Czy chcesz dokładnie zobaczyć, jak sześcienna bezier(0,42, 0, 0,58, 1) — rzeczywiste liczby kryjące się za własnym słowem kluczowym CSS „easy-in-out” — wygląda w ruchu, zanim ją wyślesz?
  • • Czy tworzysz animację sprężystego przycisku, modalu lub karty i potrzebujesz gotowej krzywej łagodzenia przekroczeń, którą możesz skopiować bezpośrednio do arkusza stylów?