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()

Obsługa przeglądarek

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2

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:

Wizualizacja wykresu liniowego(0; 0,25; 1).

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%.

Wizualizacja wykresu liniowego(0, 0,25 75%, 1).

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%.

Wizualizacja wykresu liniowego(0, 0,25 25% 75%; 1).

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:

Gładka krzywa odbicia narysowana na niebiesko.

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

Gładka krzywa odbijania odbijania w kolorze niebieskim z zielonymi kropkami u góry.

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.

Uproszczona krzywa w kolorze zielonym na niebiesko ułożona na oryginalnej gładkiej krzywej.

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:

Zaktualizowana krzywa z 2 razy większą liczbą przystanków.

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().

Zrzut ekranu pokazujący narzędzie do generatora wygładzania liniowego.
Zrzut ekranu przedstawiający działanie https://linear-easing-generator.netlify.app/.

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.

Zrzut ekranu pokazujący edytor „linear()” w Narzędziach deweloperskich w Chrome.
Zrzut ekranu pokazujący edytor „linear()” w Narzędziach deweloperskich w Chrome.

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

Zdjęcie: Howie Mapson, Unsplash