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()
Obsługa przeglądarek
- 113
- 113
- 112
- x
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