Wybieranie odpowiedniego wygładzania

Wybierz odpowiednie wygładzanie dla swojego projektu, niezależnie od tego, czy to wygładzanie, odsuwanie czy jedno i drugie. A może nawet użyj skoków dla zabawy.

Po zapoznaniu się z różnymi opcjami wygładzania animacji, jakiego rodzaju należy użyć w projektach i jakiego czasu trwania powinny mieć animacje?

Podsumowanie

  • W elementach interfejsu stosuj proste animacje. Są one bardzo przyjemne, choć krótkie i łatwe.
  • Pamiętaj, by stosować czas trwania animacji: łagodzenie i łagodzenie 200–500 ms powinny być z kolei dłuższe 800–1200 ms.
Krzywa animacji płynnego wygładzania.

Ogólnie rzecz biorąc, wywołanie ease-out będzie dobrym rozwiązaniem i przydatnym ustawieniem domyślnym. Rozpoczęcie zaczyna się szybko i sprawia, że Twoje animacje mają poczucie responsywności, co jest pożądane, ale z pewnym spowolnieniem na końcu.

Istnieje grupa dobrze znanych równań wygładzania poza tym określonym za pomocą słowa kluczowego ease-out w CSS, które mieszczą się w „agresywności”. Aby uzyskać efekt szybkiego wygładzania, rozważ użycie końcowego wygładzania.

Zobacz animację płynnego przejścia

Innych równań wygładzania, a zwłaszcza odbić i wygładzania sprężystych, należy używać z umiarem i tylko wtedy, gdy pasuje do danego projektu. Istnieje kilka elementów, które mogą negatywnie wpłynąć na wrażenia użytkownika, na przykład irytująca animacja. Jeśli Twój projekt nie ma być zabawny, nie umieszczaj elementów, które się poruszają w interfejsie. I na odwrót: jeśli tworzysz witrynę, która powinna być lekka, pamiętaj, by użyć odrzuceń.

Wypróbuj z łatwością te opcje, sprawdź, które z nich pasują do charakteru Twojego projektu, i kontynuuj. Pełną listę typów wygładzania wraz z wersjami demonstracyjnymi znajdziesz na stronie easings.net.

Wybierz odpowiedni czas trwania animacji

Ważne jest, aby każda animacja dodana do projektu miała prawidłowy czas trwania. Zbyt krótka animacja sprawia, że wydaje się agresywna i ostra, a przez to zbyt długa może być uciążliwa i irytująca.

  • Normalnie-wolno: około 200–500 ms. Dzięki temu widz może zobaczyć animację, ale nie jest ona przeszkadzająca.
  • Wznowienie: około 200 ms–500 ms. Pamiętaj, że pod koniec będzie to wstrząs, i żadne zmiany czasu nie złagodzą tego wpływu.
  • Efekty sprężystości lub odbicia: około 800–1200 ms Poczekaj, aż efekt elastyczny lub odbicia się ustabilizuje. Bez tego dodatkowego czasu sprężysta, odbijająca się część animacji będzie agresywna i nieprzyjemna dla oka.

Oczywiście są to jedynie wskazówki. Eksperymentuj z własnymi elementami i wybierz ten, który najlepiej sprawdzi się w Twoich projektach.