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, co pozwala odtworzyć efekty odbić i sprężyn.

Wygładzanie w CSS

Podczas animowania lub przenoszenia elementów w CSS za pomocą funkcji wygładzania możesz kontrolować szybkość, z jaką zmienia się wartość, za pomocą właściwości animation-timing-function i transition-timing-function.

W CSS jest kilka słów kluczowych dostępnych jako gotowe ustawienia: linear, ease, ease-in, ease-out i ease-in-out. Aby utworzyć własne krzywe wygładzania, użyj funkcji cubic-bezier() lub skorzystaj z funkcji wygładzania steps(), korzystając z metody opartej na krokach.

Właściwie stosowane wygładzanie nadaje animowanemu elementowi wrażenie wagi, ponieważ zdaje się, że nabiera rozpędu.

Tworzenie złożonych krzywych, takich jak odbicia czy efekty sprężynowe, nie jest możliwe w CSS, ale dzięki linear() możesz teraz zachwycająco dobrze je określać.

Wprowadzenie do usługi linear()

Nowy sposób definiowania wygładzania w CSS to użycie właściwości linear(). Ta funkcja może zawierać pewną liczbę przystanków rozdzielonych przecinkami. Każdy przystanek to jedna liczba z zakresu od 0 do 1. Pomiędzy każdym przystankiem interpolacja jest przeprowadzana liniowo, objaśniając nazwę funkcji.

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

Domyślnie przystanki są równoodległe. W poprzednim fragmencie kodu oznacza to, że w przypadku znacznika 50% zostanie użyta wartość wyjściowa funkcji 0.25.

Zwizualizowany wykres dla wskaźnika linear(0, 0.25, 1) wygląda tak:

Jeśli nie chcesz, aby przystanki były równomiernie rozłożone, możesz opcjonalnie użyć długości przystanków. Przekazując jedną wartość jako długość przystanku, określasz 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 znacznika 50%, ale w miejscu 75%.

Jeśli jako długość zatrzymania podasz 2 wartości, określasz punkt początkowy i końcowy:

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

Wyjściowa wartość 0,25 zostanie wykorzystana w przedziale czasu od 25% do 75%.

Tworzenie złożonych krzywych za pomocą funkcji linear()

Te przykłady to bardzo proste wygładzanie, ale za pomocą funkcji linear() możesz w bardzo prosty sposób odtworzyć złożone funkcje wygładzania, ale tym samym stracić część dokładności.

Przyjrzyjmy się krzywej wygładzania, które jest rodzajem wygładzania, którego nie można wyrazić bezpośrednio w CSS, zdefiniowanej za pomocą kodu JavaScript:

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 niewiele mówić, ale wizualizacja może to przynieść. Oto wynik przedstawiony jako niebieska krzywa:

Krzywą można uprościć, dodając do niej pewną liczbę przystanków. W tym przypadku każda zielona kropka wskazuje przystanek:

Po przejściu do funkcji linear() otrzymujemy krzywą, która wygląda jak pierwotna, ale na krawędziach jest nieco chudniejsza.

Porównaj zieloną animowaną ramkę z niebieskim – okazuje się, że nie jest ona tak gładka.

Jeśli jednak dodasz wystarczającą liczbę przystanków, możesz uzyskać całkiem dobre przybliżenie pierwotnej krzywej. Oto zaktualizowana wersja:

Już tylko podwojenie liczby przystanków zapewnia 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
);

Pomocne narzędzie

Ręczne tworzenie takiej listy przystanków byłoby bardzo pracochłonne. Na szczęście Jake i Adam stworzyli narzędzie, które pomaga przekonwertować krzywą wygładzania na jej odpowiedniki w formacie linear().

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

W prawym górnym rogu możesz też wybrać jedno z gotowych ustawień: wygładzanie sprężynowe, odbijanie, proste elastyczne lub wygładzanie w stylu Material Design.

Pomoc do Narzędzi deweloperskich

Dostępne w Narzędziach deweloperskich zapewnia obsługę wizualizacji i edytowania wyniku działania linear(). Kliknij ją, aby wyświetlić interaktywną etykietkę, która pozwala przeciągać przystanki.

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

Fot. Howie Mapson, Unsplash