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 odbijania i sprzętu.

Bramus

Wygładzanie w CSS

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

W CSS jest kilka słów kluczowych dostępnych w postaci gotowych ustawień: linear, ease, ease-in, ease-out i ease-in-out. Aby utworzyć własne krzywe wygładzania, użyj funkcji cubic-bezier() lub użyj funkcji wygładzania steps(), która bazuje na krokach.

Prawidłowo używane wygładzanie nadaje animowanemu elementowi poczucie wagi, który wydaje się nabierać 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żna teraz bardzo dobrze je przybliżać.

Wprowadzenie do linear()

Nowy sposób definiowania wygładzania w CSS to linear(). Ta funkcja akceptuje 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 realizowana liniowo, wyjaśniając nazwę funkcji.

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

Domyślnie te przystanki są rozłożone w równych odstępach. We wcześniejszym fragmencie kodu oznacza to, że wartość wyjściowa 0.25 zostanie użyta przy znaku 50%.

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

Jeśli nie chcesz, aby postoje były rozłożone równomiernie, możesz opcjonalnie podać długość zatrzymania. Wprowadzając jedną wartość jako długość przystanku, definiujesz punkt początkowy:

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

W tym przypadku wartość wyjściowa 0.25 nie zostanie użyta w miejscu 50%, ale w 75%.

Określając dwie wartości jako długość zatrzymania, definiujesz zarówno punkt początkowy, jak i końcowy:

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

Wartość wyjściowa 0,25 zostanie użyta w przedziale od 25% do 75%.

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

Powyższe przykłady to bardzo proste wygładzanie, jednak za pomocą obiektu linear() możesz bardzo łatwo odtworzyć złożone funkcje wygładzania, ale bez ryzyka utraty precyzji.

Weźmy na przykład krzywą wygładzania, typ wygładzania, którego nie można wyrazić bezpośrednio w CSS, 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;
}

Choć kod może niewiele mówić, wizualizacja może okazać się przydatna. Wyniki są przedstawione w postaci niebieskiej krzywej:

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

Po przekazaniu do funkcji linear() wynikiem jest krzywa, która wygląda mniej więcej tak jak pierwotna, ale jej krawędzie jest nieco szersza.

Porównaj zielone pole z animacją z niebieską – nie jest tak płynne.

Jednak jeśli dodasz wystarczającą liczbę przystanków, możesz całkiem dobrze przybliżyć oryginalną krzywą. Oto zaktualizowana wersja:

Podwojenie liczby przystanków pozwala już na uzyskanie płynnego wyniku.

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 pomocne

Ręczne utworzenie takiej listy przystanków byłoby bardzo uciążliwe. Na szczęście Jake i Adam opracowali narzędzie, które pomaga przekonwertować krzywą wygładzania na jej odpowiednik linear().

Narzędzie pobiera funkcję wygładzania JavaScript lub krzywą SVG i wyświetla uproszczoną krzywą za pomocą funkcji linear(). Za pomocą suwaków możesz określić liczbę postojów i ich precyzję.

W prawym górnym rogu możesz też wybrać jedno z gotowych ustawień: wygładzanie Spring (Sprężyna), Odbijanie, Prosto urządzone elastyczne lub Material Design.

Pomoc dotycząca Narzędzi deweloperskich

W Narzędziach deweloperskich dostępne są narzędzia do wizualizacji i edytowania wyniku funkcji linear(). Kliknij ikonę, aby wyświetlić interaktywną etykietkę, którą można przeciągać wokół przystanków.

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

Zdjęcie: Howie Mapson, Unsplash