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:
linearease-inease-outease-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;