본질적으로 어떤 것도 한 지점에서 다른 지점으로 선형 이동하지 않는다. 실제로, 물건이 이동할 때 가속하거나 감속하는 경향이 있다. 우리의 뇌는 이러한 종류의 모션을 예상하므로 애니메이션을 만들 때 이러한 모션을 활용해야 한다. 자연스러운 모션은 앱 사용자에게 편안한 느낌을 주고 전반적인 사용 환경을 개선해 준다. – Paul Lewis(Paul is a Design and Perf Advocate)
- easing은 애니메이션을 자연스럽게 만든다.
- UI 요소에 대해 ease-out 애니메이션을 선택한다.
- 짧게 유지할 수 있는 경우를 제외하고 ease-in 또는 ease-in-out 애니메이션을 피한는 것이 좋다. 최종 사용자에게 굼뜬 느낌을 줄 수 있기 때문이다.
전통적인 애니메이션에서 느린 시작 후 가속하는 모션을 ‘slow in’이라고 하고 빠른 시작 후 감속하는 모션을 ‘slow out’이라고 한다. 웹에서는 각 모션에 대해 ‘ease in’ 및 ‘ease out’이라는 용어를 주로 사용한다. 두 모션이 조합된 경우는 ‘ease in out’이라고 한다. easing은 실제로 애니메이션을 더욱 부드럽고 편안한 느낌이 들게 만드는 프로세스이다.
1. 선형(linear) 애니메이션
easing을 사용하지 않은 애니메이션을 선형이라고 한다.
시간 경과에 따라, 값이 균일하게 증가하며, 선형 모션을 사용할 경우, 로봇처럼 부자연스러운 느낌을 주므로 사용자가 불편함을 느낄 수 있다. 일반적으로, 선형 모션을 피하는 것이 좋다.
2. Ease-in 애니메이션
Ease-in 애니메이션은 ease-out 애니메이션과 반대로 느리게 시작했다가 빠르게 끝난다.
이러한 종류의 애니메이션은 무거운 돌이 떨어지는 것처럼 느리게 시작하고 낮은 쿵 소리와 함께 빠르게 지면을 때린다.
하지만 상호작용 관점에서 ease-in은 갑작스럽게 끝나기 때문에 약간 부자연스러운 느낌이 들 수 있다. 실제 세상에서 움직임은 단순히 갑자기 멈추는 것이 아니라 감속하는 경향이 있기 때문이다. 또한 ease-in은 시작 시 굼뜨게 움직이는 듯한 잘못된 효과로 인해 사이트나 앱에서 반응 인지에 부정적 영향을 미칠 수 있다.
3. Ease-out 애니메이션
Easing out은 선형보다 더 빠르게 애니메이션을 시작하며 마지막에 감속한다.
Easing out은 빠른 시작으로 애니메이션에 반응 효과를 주면서도 마지막에 자연스러운 감속 효과를 나타내기 때문에, 일반적으로 사용자 인터페이스 작업에 가장 적합하다.
4. Ease-in-out 애니메이션
Easing in 및 easing out은 차량의 가속 및 감속과 유사하며, 적절히 조합하여 사용하면 easing out만 사용하는 것보다 더욱 드라마틱한 효과를 제공할 수 있다.
ease-in은 애니메이션을 더디게 시작하기 때문에 애니메이션 기간을 지나치게 오래 설정하지 않는 것이 효과적이다. 일반적으로 300-500ms 사이의 임의 값이 적합하지만, 정확한 값은 프로젝트의 느낌에 따라 상당히 달라진다. 그러나 느린 시작, 빠른 중간, 느린 종료로 인해 애니메이션의 대비가 증가하여 사용자에게 만족감을 줄 수 있다.
5. Ease In Back 애니메이션
Ease In Back 은 애니메이션이 초기 키프레임 값을 지난 다음 끝에 도달함에 따라 가속되는 경우이다. 이것은 애니메이션에 바운스를 만들어 관객을 준비시키고 주요 액션을 강화하는 예측 액션 역할을 한다. 천천히 Ease In과 매우 유사 하게 Ease In Back는 개체를 보기에서 부드럽게 전환하는 데 적합하다.
6. Ease Out Back 애니메이션
Ease In Back 의 반대이다 . 애니메이션은 빠르게 시작한 다음 느려지고 종료 키프레임의 값을 지나간다. 이렇게 하면 기본 동작에 대한 부드러운 종료 전환을 만드는 정착 역할을 하는 애니메이션에 바운스가 생성된다. Ease Out 과 유사하게 Ease Out Back 은 개체를 보기로 이동하는 데 적합하다.
7. Ease In And Out Back 애니메이션
애니메이션이 초기 키프레임 값을 초과할 때 천천히 시작한 다음, 속도가 느려지고 끝 키프레임 값을 초과하기 전에 빠르게 가속된다. 이것은 최종 상태 이전에 리바운드 모션과 함께 시작, 빠른 모션에서 예상되는 바운스를 만든다.
