Samochód nie rusza od razu z pełną prędkością i nie staje w miejscu jak wbity w ścianę. Winda zwalnia przed piętrem. Piłka spada coraz szybciej. Oko zna te ruchy, więc element, który na ekranie jedzie ze stałą prędkością i staje bez hamowania, od razu wygląda sztucznie.
Easing opisuje ten rozpęd i hamowanie. W programie do animacji ustawia się go na krzywej między dwiema klatkami kluczowymi, w kodzie strony zapisuje funkcją. Najczęstsze rodzaje:
- Ease-out: szybki start i łagodne hamowanie. Dla elementów, które wchodzą na ekran.
- Ease-in: powolny start i przyspieszanie. Dla elementów, które z ekranu wychodzą.
- Ease-in-out: rozpęd i hamowanie. Dla ruchu z miejsca na miejsce w obrębie ekranu.
- Sprężyna: element przelatuje cel i wraca. Dodaje lekkości, ale w poważnej marce szybko wygląda niepoważnie.
Easing a charakter marki
Ten sam ruch z innym easingiem mówi co innego. Dobrze widać to w animacji logo: ostre wejście z krótkim hamowaniem jest dynamiczne, długie i miękkie wygląda spokojnie. Dlatego krzywe trafiają do motion guidelines razem z czasami trwania, jako konkretne wartości. Animator ustawia je w swoim programie, programista wpisuje do kodu, a film, strona i mikrointerakcje w aplikacji ruszają się tak samo.