Podstawy wygładzania

Dowiedz się, jak zmiękczać animacje i nadawać im wagi.

Paul Lewis

Nic nie przesuwa się w sposób liniowy z jednego punktu do drugiego. W rzeczywistości wraz z ruchem coś przyspiesza lub zwalnia. Nasze mózgi są zorientowane na taki ruch, więc do tworzenia animacji warto z niego korzystać. Naturalny ruch sprawia, że użytkownicy czują się bardziej komfortowo, gdy korzystają z Twoich aplikacji, co z kolei przekłada się na lepsze wrażenia użytkowników.

Podsumowanie

• Wygładzanie sprawia, że animacje wyglądają bardziej naturalnie.
• Wybierz animacje wygładzania dla elementów interfejsu.
• Unikaj animacji takich jak „wygładzanie do wejścia” lub „wygładzanie do początku”, chyba że są one krótkie. ale często czuli się osłabiająco.

W klasycznej animacji ruch, który powoli zaczyna się i przyspiesza, to „spowolnić” a w ruchu, który zaczyna się szybko, a następnie zwalnia, jest „zwolniony”. Terminologia najczęściej używana w internecie to odpowiednio „łatwo do” i „łatwo wychodzić”. Czasami te 2 elementy są ze sobą połączone, czyli jest to tzw. „łagodne wejście”. Wygładzanie to proces, dzięki któremu animacja jest mniej surowa lub bardziej wymawiana.

Wygładzanie słów kluczowych

Zarówno przejścia, jak i animacje CSS pozwalają wybrać rodzaj wygładzania animacji. Możesz użyć słów kluczowych, które wpływają na wygładzanie (timing, jak czasem nazywane jest) danej animacji. Możesz też dostosować je do swoich potrzeb, co daje Ci znacznie większą swobodę wyrażania charakteru aplikacji.

Oto kilka słów kluczowych, których możesz użyć w CSS:

• linear
• ease-in
• ease-out
• ease-in-out

Źródło: CSS przejśćs, W3C,

Możesz też użyć słowa kluczowego steps, które pozwala tworzyć przejścia o określonych krokach, ale te słowa kluczowe są najbardziej przydatne do tworzenia naturalnych animacji.

Animacje liniowe

Animacje bez wygładzania są nazywane linearnymi. Wykres przejścia liniowego wygląda tak:

Wraz z upływem czasu wartość rośnie o równe wartości. Ruch liniowy sprawia, że zjawisko wydaje się być robotyczne, nienaturalne, co jest irytujące dla użytkowników. Ogólnie rzecz biorąc, należy unikać ruchu liniowego.

Niezależnie od tego, czy kodujesz animacje za pomocą CSS czy JavaScriptu, przekonasz się, że zawsze istnieje możliwość zastosowania ruchu liniowego.

Zobacz animację liniową

Aby osiągnąć powyższy efekt przy użyciu kodu CSS, kod wyglądałby mniej więcej tak:

transition: transform 500ms linear;

Animacje zwalniające

Wygładzanie powoduje, że animacja rozpoczyna się szybciej w porównaniu z animacjami liniowymi, a także zwalnia na końcu.

Wygładzanie zwykle jest najlepsze w przypadku interfejsu, ponieważ szybki start sprawia, że animacje są aktywne, a pod koniec gry nadal spowalniają.

Zobacz animację zwalniania

Istnieje wiele sposobów na uzyskanie efektu łagodzenia, ale najprostszym jest słowo kluczowe ease-out w CSS:

transition: transform 500ms ease-out;

Animacje wolne

Animacje „wolno-wolno” zaczynają się powoli i szybko kończą, co jest przeciwieństwem tej animacji.

Animacja przypomina upadek z potężnego kamienia, który zaczyna powoli i szybko uderza o podłogę groźnym uderzeniem.

Jednak z punktu widzenia interakcji z łatwością obsługi mogą się wydawać nieco nietypowe ze względu na ich nagły koniec. zjawiska w świecie rzeczywistym raczej maleją, a nie nagle zatrzymują. Łagodzenie skutków wiąże się również z uciążliwym ruchem na początku i w związku z tym negatywnie wpływa na postrzeganie czasu reagowania Twojej witryny lub aplikacji.

Zobacz animację wygładzania

Aby użyć animacji wygładzania, podobnie jak w przypadku animacji wygładzania i wygładzania, możesz użyć tego słowa kluczowego:

transition: transform 500ms ease-in;

Animacje zwalniające

Wygładzanie i wygładzanie jest jak samochód przyspieszający i zwalniający, a przy tym ostrożnie używany może dać bardziej dramatyczny efekt niż tylko wygładzanie.

Nie używaj zbyt długiego czasu trwania animacji ze względu na powolne rozpoczęcie odtwarzania. Zazwyczaj mieści się w zakresie 300–500 ms, ale dokładna wartość zależy w dużym stopniu od charakteru projektu. Powolny początek, szybki środek i wolny koniec sprawiają, że kontrast animacji jest wysoki, co może być satysfakcjonujące dla użytkowników.

Zobacz animację wejścia-wyjścia

Aby uzyskać animację, możesz użyć słowa kluczowego CSS ease-in-out:

transition: transform 500ms ease-in-out;