Wybierz odpowiednie wygładzanie do swojego projektu – wygładzanie do wejścia, wygładzanie lub jedno i drugie. Możesz nawet wykorzystać „odbijanie” do dodatkowej zabawy!
Omówiliśmy różne opcje wygładzania animacji. Którego z nich należy użyć w swoich projektach i jakiej długości powinny mieć animacje?
Podsumowanie
- używać animacji wygładzania w elementach interfejsu; to bardzo ładna, choć szybka i łatwa.
- Pamiętaj, aby użyć czasu trwania animacji. Tarcze i stabilizatory powinny trwać dłużej od 800 do 1200 ms.
Ogólnie rzecz biorąc, odpowiednią opcją będzie ease-out, a z pewnością dobre ustawienie domyślne. Początek jest szybki, więc animacje mają wrażenie responsywności, co jest obiecujące, ale pod koniec widać też spokojny ruch.
Istnieje grupa dobrze znanych równań łagodzenia, które różnią się od tych określonych za pomocą słowa kluczowego ease-out w CSS. Te równania różnią się swoją „agresywnością”. Aby szybko zwolnić, rozważ zastosowanie Quintic ease-out.
Zobacz krótką animację gładkiego przesunięcia
Innych równań wygładzania, zwłaszcza takich jak odbicia i elastyczność, należy stosować z umiarem i tylko wtedy, gdy ma to sens w kontekście Twojego projektu. Niewiele rzeczy może zniechęcać użytkownika do oglądania, np. dziwaczna animacja. Jeśli Twój projekt nie jest dla rozrywki, elementy interfejsu nie powinny się odbijać. Jeśli natomiast tworzysz witrynę, która powinna być zabawna, zdecydowanie stosuj odrzuceń.
Eksperymentuj z łatwością, sprawdzaj, które z nich pasują do charakteru Twojego projektu, i przejdź dalej. Pełną listę typów wygładzania wraz z prezentacjami 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ę ona bardziej wyrazista i wyraźna. będzie za długie, bo będzie uciążliwe i irytujące.
- Stopnie wolne: około 200–500 ms Dzięki temu oko może zobaczyć animację, ale nie będzie to przeszkodzić.
- Płynne intensywność: około 200–500 ms. Pamiętaj, że pod koniec filmu wstrząśniesz i żadna zmiana czasu nie złagodzi tego efektu.
- Efekty podskoku lub elastycznego: około 800–1200 ms. Musisz poczekać, aż efekt sprężystości lub odbijania się „ustabilizuje”. Bez tego dodatkowego czasu ta odbijająca się część animacji będzie agresywna i nieprzyjemna dla oka.
Oczywiście są to tylko wskazówki. Eksperymentuj z własnymi ułatwieniami i wybierz to, co sprawdzi się w Twoich projektach.