Tworzenie złożonych krzywych animacji w CSS za pomocą funkcji wygładzania linear()

Przedstawiamy linear(), funkcję wygładzania w CSS, która interpoluje liniowo między punktami, umożliwiając odtworzenie efektów odbicia i sprężyny.

Bramus

Funkcje przejścia w CSS

Podczas animowania lub przechodzenia między elementami w CSS możesz kontrolować szybkość zmiany wartości za pomocą funkcji wygładzania, używając właściwości animation-timing-function i transition-timing-function.

W CSS dostępnych jest kilka słów kluczowych jako ustawień wstępnych, a mianowicie linear, ease, ease-in, ease-out i ease-in-out. Aby utworzyć własne krzywe wygładzania, użyj funkcji cubic-bezier() lub zastosuj podejście oparte na krokach, korzystając z funkcji wygładzania steps().

Odpowiednio użyte funkcje wygładzania nadają animowanemu elementowi poczucie wagi, gdy nabiera on rozpędu.

Tworzenie złożonych krzywych, takich jak efekty odbicia lub sprężyny, nie jest możliwe w CSS, ale dzięki linear() możesz teraz zadziwiająco dobrze je przybliżać.

Wprowadzenie do linear()

Nowy sposób definiowania funkcji przejścia w CSS to linear(). Ta funkcja akceptuje liczbę przystanków oddzielonych przecinkami. Każdy punkt to pojedyncza liczba z zakresu od 0 do 1. Pomiędzy poszczególnymi punktami interpolacja jest wykonywana w sposób liniowy, co wyjaśnia nazwę funkcji.

animation-timing-function: linear(0, 0.25, 1);

Domyślnie są one rozmieszczone w równych odstępach. W powyższym fragmencie kodu oznacza to, że wartość wyjściowa zmiennej 0.25 zostanie użyta przy 50% wartości.

Wizualizacja wykresu dla linear(0, 0.25, 1) wygląda tak:

Jeśli nie chcesz, aby przystanki były rozmieszczone w równych odległościach, możesz opcjonalnie przekazać długość przystanku. Jeśli jako długość zatrzymania podasz jedną wartość, musisz zdefiniować jej punkt początkowy:

animation-timing-function: linear(0, 0.25 75%, 1);

W tym przypadku wartość wyjściowa 0.25 nie będzie używana w miejscu oznaczonym jako 50%, ale będzie używana w miejscu oznaczonym jako 75%.

Podając 2 wartości jako długość przystanku, określasz zarówno jego punkt początkowy, jak i końcowy:

animation-timing-function: linear(0, 0.25 25% 75%, 1);

Wartość wyjściowa 0,25 będzie używana od 25% do 75% czasu.

Tworzenie złożonych krzywych

W poprzednich przykładach zastosowano prostsze funkcje łagodzenia, ale za pomocą elementu linear() możesz odtworzyć bardziej złożone funkcje łagodzenia, jeśli nie zależy Ci na pełnej precyzji.

Weźmy tę krzywą wygładzania odbicia, czyli typ wygładzania, którego nie można wyrazić bezpośrednio w CSS, a który jest zdefiniowany za pomocą JavaScriptu:

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

Kod może nie być zbyt czytelny, ale wizualizacja może Ci wiele powiedzieć. Oto dane wyjściowe przedstawione w postaci niebieskiej krzywej:

Krzywą można uprościć, dodając do niej kilka przystanków. Każda zielona kropka oznacza przystanek:

Po przekazaniu do funkcji linear() otrzymasz krzywą, która wygląda podobnie do pierwotnej, ale ma nieco bardziej szorstkie krawędzie.

Porównaj zielony animowany kwadrat z niebieskim – widać, że nie jest tak płynny.

Jeśli jednak dodasz wystarczającą liczbę przystanków, możesz dość dobrze przybliżyć pierwotną krzywą. Oto zaktualizowana wersja:

Wystarczy podwoić liczbę przystanków, aby uzyskać płynny efekt.

Kod użyty do animacji wygląda tak:

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

Narzędzie, które pomoże

Ręczne utworzenie tej listy przystanków byłoby bardzo uciążliwe. Jake i Adam stworzyli narzędzie, które pomoże Ci przekształcić krzywą wygładzania w jej linear()odpowiednik.

Narzędzie przyjmuje jako dane wejściowe funkcję wygładzania JavaScript lub krzywą SVG i zwraca uproszczoną krzywą za pomocą linear(). Za pomocą suwaków możesz określić liczbę przystanków i ich precyzję.

W prawym górnym rogu możesz też wybrać jeden z gotowych ustawień: Spring (Sprężyna), Bounce (Odbicie), Simple elastic (Proste elastyczne) lub Material Design emphasized easing (Zwolnienie z akcentem Material Design).

Obsługa Narzędzi deweloperskich

W Narzędziach deweloperskich dostępna jest funkcja wizualizacji i edycji wyniku linear(). Kliknij ikonę, aby wyświetlić interaktywną etykietkę, która umożliwia przeciąganie przystanków.

Ta funkcja Narzędzi deweloperskich jest dostępna w Narzędziach deweloperskich w Chrome 114.