Podstawy wygładzania

Dowiedz się, jak łagodzić i nadawać wagę animacjom.

Paul Lewis

Nic w przyrodzie nie porusza się w prostej linii z jednego punktu do drugiego. W rzeczywistości obiekty przyspieszają lub zwalniają podczas poruszania się. Nasze mózgi są zbudowane na bazie takiego ruchu, więc do tworzenia animacji warto z niego korzystać. Naturalne animacje sprawiają, że użytkownicy czują się w Twojej aplikacji bardziej komfortowo, co przekłada się na lepsze wrażenia.

Podsumowanie

• Wygładzanie sprawia, że animacje wyglądają bardziej naturalnie.
• Wybierz animacje łagodnego wygaszania dla elementów interfejsu.
• Unikaj animacji łagodnego wejścia i wyjścia, chyba że możesz je skrócić. Mogą one sprawiać wrażenie ociężałości.

W klasycznej animacji ruch, który zaczyna się powoli i przyspiesza, nazywa się „slow in”, a ruch, który zaczyna się szybko i zwalnia, nazywa się „slow out”. Terminologia najczęściej używana w internecie to odpowiednio „łatwo do” i „łatwo wychodzić”. Czasami te 2 metody są łączone, co nazywa się „łagodnym przejściem”. Wygładzanie to proces, który powoduje, że animacja jest mniej wyraźna.

Wygładzanie słów kluczowych

Zarówno przejścia, jak i animacje CSS umożliwiają wybór rodzaju łagodnego przejścia, którego chcesz użyć w 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 niektóre słowa kluczowe, których możesz używać w CSS:

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

Źródło: CSS Processings, W3C

Możesz też użyć słowa kluczowego steps, które umożliwia tworzenie przejść z rozdzielonymi krokami, ale wymienione powyżej słowa kluczowe są najbardziej przydatne do tworzenia animacji, które wyglądają naturalnie.

Animacje linearne

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. Przy ruchu liniowym obiekty wydają się być robotyczne i nienaturalne, co może być dla użytkowników nieprzyjemne. 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.

Wyświetlanie animacji liniowej

Aby uzyskać powyższy efekt za pomocą CSS, kod będzie wyglądał mniej więcej tak:

transition: transform 500ms linear;

Animacje wygaszania

Wygładzanie powoduje, że animacja zaczyna się szybciej niż w przypadku animacji liniowej, a na końcu zwalniania.

Wygaszanie jest zwykle najlepsze w przypadku interfejsu użytkownika, ponieważ szybki start sprawia, że animacje wydają się bardziej responsywne, a jednocześnie umożliwiają naturalne spowolnienie pod koniec.

Animacja wygładzająca

Efekt łagodnego wygaszania można uzyskać na wiele sposobów, ale najprostszym jest użycie w CSS słowa kluczowego ease-out:

transition: transform 500ms ease-out;

Animacje wolne

Animacje z wygładzaniem na wejściu rozpoczynają się powoli i kończą szybko, co jest przeciwieństwem animacji z wygładzaniem na wyjściu.

Ten rodzaj animacji przypomina ciężki kamień, który zaczyna spadać powoli, a na ziemi uderza z głośnym hukiem.

Z punktu widzenia interakcji łagodne przejścia mogą jednak wydawać się nieco nietypowe ze względu na ich nagłe zakończenie. Rzeczy, które poruszają się w rzeczywistym świecie, mają tendencję do zwalniania, a nie nagłego zatrzymywania się. W przypadku łatwych wstawień występuje też negatywny efekt odczuwania spowolnienia podczas uruchamiania, co negatywnie wpływa na postrzeganie szybkości działania witryny lub aplikacji.

Animacja wygładzająca

Aby użyć animacji łagodnego wejścia, podobnie jak w przypadku animacji łagodnego wyjścia i liniowych, możesz użyć słowa kluczowego:

transition: transform 500ms ease-in;

Animacje w ramach wstępowania i wyrównywania

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, ponieważ łagodne rozpoczęcie animacji może spowolnić działanie. Zwykle wystarczy wartość w zakresie 300–500 ms, ale dokładna liczba zależy głównie od charakteru projektu. Jednak ze względu na powolny początek, szybką część środkową i powolny koniec animacji kontrast w niej jest większy, co może być bardzo satysfakcjonujące dla użytkowników.

Animacja wygładzania

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

transition: transform 500ms ease-in-out;