Dowiedz się, jak zmiękczać i odpowiednio określać wagę animacji.
Żadna natura nie porusza się liniowo z jednego punktu do drugiego. W rzeczywistości wszystko przyspiesza lub zwalnia wraz z ruchem. Nasze mózgi z wyprzedzeniem oczekują tego rodzaju ruchu, więc animuj to, postaraj się to wykorzystać. Naturalny ruch sprawia, że użytkownicy mogą wygodniej korzystać z aplikacji, co z kolei wpływa na wygodę użytkowników.
Podsumowanie
- Wygładzanie sprawia, że animacje wyglądają bardziej naturalnie.
- Wybierz wygładzone animacje dla elementów interfejsu.
- Unikaj animacji rozluźniających lub rozluźniających, chyba że jesteś w stanie być krótkie. W rzeczywistości są one raczej powolne dla użytkowników.
W klasycznej animacji termin na ruch, który rozpoczyna się powoli i przyspiesza, to „zwolniony”, a dla ruchu, który zaczyna się szybko i spowalniać, to „spowalniający”. Terminologia najczęściej używana w internecie to odpowiednio „łatwość” i „łagodzenie”. Czasami te dwa sposoby są ze sobą połączone, co nazywa się „łatwością wejścia”. Łagodzenie to w zasadzie proces obniżania bądź wymawiania animacji.
Łagodzenie słów kluczowych
Przejścia i animacje CSS pozwalają wybrać rodzaj wygładzania, którego chcesz użyć do animacji. Możesz używać słów kluczowych, które wpływają na wygładzanie danej animacji (czyli timing
, jak to czasami się nazywa). Możesz też zupełnie dostosować wygładzanie, co zapewnia znacznie większą swobodę wyrażania charakteru aplikacji.
Oto kilka słów kluczowych, których możesz używać w CSS:
linear
ease-in
ease-out
ease-in-out
Źródło: CSS Transitions, W3C
Możesz też użyć słowa kluczowego steps
, które pozwala tworzyć przejścia z wyraźnymi krokami, ale wymienione wyżej słowa kluczowe są najbardziej przydatne do tworzenia naturalnych animacji.
Animacje liniowe
Animacje bez wygładzania są nazywane liniowymi. Wykres przejścia liniowego wygląda tak:
W miarę upływu czasu wartość rośnie w równych ilościach. Ruch liniowy wydaje się być robotniczy i nienaturalny, co jest dla użytkowników irytujące. Zasadniczo nie należy korzystać z ruchu liniowego.
Niezależnie od tego, czy kodujesz animacje za pomocą CSS czy JavaScript, zawsze możesz skorzystać z ruchu liniowego.
Aby osiągnąć ten efekt za pomocą CSS, kod powinien wyglądać mniej więcej tak:
transition: transform 500ms linear;
Animacje zwalniające
Wygładzanie sprawia, że animacja rozpoczyna się szybciej niż w przypadku liniowych, a na końcu również następuje zwolnienie.
W przypadku interfejsu zazwyczaj najlepiej sprawdza się wygładzanie, ponieważ szybki start nadaje animacji elastyczności, jednocześnie pozwalając na naturalne spowolnienie działania pod koniec.
Zobacz animację z możliwością wygładzania
Istnieje wiele sposobów na uzyskanie wygładzania, ale najprostszym z nich jest słowo kluczowe ease-out
w CSS:
transition: transform 500ms ease-out;
Łagodne animacje
Animacje w wolnym tempie zaczynają się powoli i szybko się kończą, co jest przeciwieństwem animacji tego typu.
Animacja jest podobna do ciężkiego, spadającego kamienia. Zaczyna powoli, a potem szybko opada na ziemię, głośno i bezpiecznie.
Z punktu widzenia interakcji łagodzenia mogą jednak wydawać się nieco nietypowe z powodu nagłego zakończenia. Rzeczy w świecie rzeczywistym mają tendencję do zwalniania, a nie po prostu zatrzymywać się nagle. Łagodzenie responsywności ma też negatywny wpływ na uczucie osłabienia na początku, co negatywnie wpływa na szybkość reagowania witryny lub aplikacji.
Aby skorzystać z animacji wygładzania, podobnie jak w przypadku animacji wygładzania i liniowych, możesz użyć jej słowa kluczowego:
transition: transform 500ms ease-in;
Animacje z normalnym zakończeniem
Łagodzenie i wygładzanie można porównać do przyspieszania i spowalniania samochodu. Stosowane z rozwagą może przynieść bardziej efektywne efekty niż samo złagodzenie.
Nie używaj zbyt długiego czasu trwania animacji ze względu na powolne rozpoczęcie odtwarzania. Zazwyczaj wartość mieści się w przedziale 300–500 ms, ale dokładna liczba zależy w dużym stopniu od charakteru projektu. Jednak ze względu na powolny początek i szybki środek i wolny koniec, kontrast jest większy i bardziej satysfakcjonujący dla użytkowników.
Zobacz animację płynnego przejścia
Aby uzyskać animację wygładzania, możesz użyć słowa kluczowego CSS ease-in-out
:
transition: transform 500ms ease-in-out;