Podstawy wygładzania

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

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ą przyzwyczajone do tego rodzaju ruchu, więc podczas tworzenia animacji warto to wykorzystać. Naturalne animacje sprawiają, że użytkownicy czują się w Twojej aplikacji bardziej komfortowo, co przekłada się na lepsze wrażenia.

Podsumowanie

• Dzięki łagodzeniu 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 działać wolno.

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”. W internecie najczęściej używa się terminów „łagodne wejście” i „łagodne wyjście”. Czasami oba te efekty są łączone, co nazywa się „łagodnym przejściem”. Wygładzanie to proces, który powoduje, że animacja jest mniej wyraźna.

Zmiękczanie 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 (czasami nazywane timing) danej animacji. Możesz też całkowicie dostosować wygładzanie, co daje Ci znacznie większą swobodę w wyrażaniu 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: Przejścia CSS, W3C

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

Animacje linearne

Animacje bez żadnego wygładzania nazywamy liniowymi. Wykres przejścia liniowego wygląda tak:

Z upływem czasu wartość rośnie o równe kwoty. 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 JavaScript, zawsze możesz użyć 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 pozwala na naturalne spowolnienie pod koniec.

Animacja wygładzająca

Efekt łagodnego zanikania 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 w przyspieszeniu

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

Ten rodzaj animacji przypomina ciężki kamień, który spada, zaczynając wolno, 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 łagodnych wprowadzeń użytkownik może mieć wrażenie, że aplikacja lub witryna uruchamia się wolno, co negatywnie wpływa na postrzeganie jej responsywności.

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 opóźnieniu

Złagodnienie wejścia i wyjścia jest podobne do przyspieszania i zwalniania samochodu. Jeśli użyjesz tego mądrze, możesz uzyskać bardziej spektakularny efekt niż tylko łagodne wyjście.

Nie używaj zbyt długiego czasu trwania animacji, ponieważ łagodne rozpoczęcie animacji może spowolnić działanie. Zwykle wystarczająca jest wartość w zakresie 300–500 ms, ale dokładna liczba zależy w dużej mierze od charakteru projektu. Jednak ze względu na powolny początek, szybką część środkową i powolny koniec animacja ma większy kontrast, co może być bardzo satysfakcjonujące dla użytkowników.

Animacja wygładzania

Aby uzyskać animację łagodnego wejścia i wyjścia, możesz użyć słowa kluczowego ease-in-out w CSS:

transition: transform 500ms ease-in-out;