애니메이션을 부드럽게 하고 가중치를 주는 방법을 알아보세요.
본질적으로 어떤 것도 한 지점에서 다른 지점으로 선형 이동하지 않습니다. 실제로는 물건이 이동할 때 가속하거나 감속하는 경향이 있습니다. 우리의 뇌는 이러한 종류의 움직임을 예상하므로 애니메이션을 만들 때 이를 유리하게 활용해야 합니다. 자연스러운 모션을 사용하면 사용자가 앱에 편안함을 느끼게 되어 전반적인 사용 환경이 개선됩니다.
요약
- 이징을 사용하면 애니메이션을 더 자연스럽게 만들 수 있습니다.
- UI 요소에 대해 ease-out 애니메이션을 선택합니다.
- 짧게 유지할 수 있는 경우가 아니라면 ease-in 또는 ease-in-out 애니메이션을 피하세요. 최종 사용자가 느리게 느껴지는 경향이 있습니다
클래식 애니메이션에서 천천히 시작해서 가속하는 모션을 가리켜 'slow in'이라고 합니다. 빠르게 시작하고 감속하는 모션의 경우에는 '속도가 느려집니다'라고 합니다 이와 관련하여 웹에서 가장 흔히 사용되는 용어는 각각 'ease in' 및 'ease out'입니다. 두 모션이 결합되어 'ease in out'이라고 하는 경우도 있습니다. 이징은 실제로 애니메이션을 덜 가볍거나 뚜렷하게 만드는 과정입니다.
이징 키워드
CSS 전환 및 애니메이션을 사용하여 애니메이션에 사용할 이징 유형을 선택할 수 있습니다. 해당 애니메이션의 이징 (또는 timing라고도 함)에 영향을 미치는 키워드를 사용할 수 있습니다. 또한 이징을 완전히 맞춤설정하여 앱의 개성을 훨씬 더 자유롭게 표현할 수 있습니다.
다음은 CSS에서 사용할 수 있는 몇 가지 키워드입니다.
linearease-inease-outease-in-out
출처: CSS 전환, W3C
steps 키워드를 사용하여 불연속 단계가 있는 전환을 만들 수도 있지만 위에 나열된 키워드는 자연스러운 느낌의 애니메이션을 만드는 데 가장 유용합니다.
선형 애니메이션
이징을 사용하지 않는 애니메이션을 선형이라고 합니다. 선형 전환의 그래프는 다음과 같습니다.
시간이 지나면서 값이 균일하게 증가합니다. 선형 모션을 사용하면 로봇과 같이 부자연스럽게 느껴지기도 하는데, 사용자가 불편하다고 느끼는 부분입니다. 일반적으로, 선형 모션을 피해야 합니다.
CSS 또는 JavaScript를 사용하여 애니메이션을 코딩하든 항상 선형 모션 옵션이 있습니다.
CSS로 위의 효과를 달성하려면 코드는 다음과 같습니다.
transition: transform 500ms linear;
Ease-out 애니메이션
Easing out을 사용하면 애니메이션이 선형 애니메이션보다 더 빨리 시작되며, 마지막에 감속합니다.
Easing out은 일반적으로 사용자 인터페이스 작업에 가장 적합합니다. 빠른 시작을 사용하면 애니메이션에 반응 느낌이 들게 하면서 마지막에 자연스러운 감속 효과를 계속 허용할 수 있기 때문입니다.
ease out 효과를 달성하는 방법에는 여러 가지가 있지만 가장 간단한 방법은 CSS의 ease-out 키워드입니다.
transition: transform 500ms ease-out;
Ease-in 애니메이션
Ease-in 애니메이션은 천천히 시작했다가 빠르게 끝납니다. 이는 ease-out 애니메이션과 반대입니다.
이러한 애니메이션은 무거운 돌이 떨어지는 것과 같아서 천천히 시작해서 갑자기 땅에 빠지는 듯한 떨림을 일으킵니다.
하지만 상호작용 관점에서 ease-in은 갑작스러운 종료로 인해 약간 특이하게 느껴질 수 있습니다. 실제로 움직이는 것들은 단순히 갑자기 멈추기보다는 감속하는 경향이 있습니다. 또한 이즈 인은 시작할 때 느리게 느껴지는 부정적인 영향을 미치므로 사이트나 앱에서 반응 인지에 부정적인 영향을 미칩니다.
ease-in 애니메이션을 사용하려면 ease-out 및 선형 애니메이션과 마찬가지로 해당 키워드를 사용할 수 있습니다.
transition: transform 500ms ease-in;
Ease-in-out 애니메이션
이징 인/아웃(Eas)은 차량을 가속 및 감속하는 것과 유사하며 신중하게 사용하면 이징 아웃보다 더 극적인 효과를 제공할 수 있습니다.
애니메이션의 ease-in 시작이 느려지므로 애니메이션 기간을 지나치게 길게 사용하지 마세요. 일반적으로 300~500ms 사이의 값이 적합하지만, 정확한 숫자는 프로젝트의 분위기에 따라 크게 달라집니다. 그렇지만 느린 시작, 빠른 중간, 느린 종료로 인해 애니메이션의 대비가 증가하여 사용자가 상당히 만족할 수 있습니다.
Ease-in-out 애니메이션을 가져오려면 ease-in-out CSS 키워드를 사용하면 됩니다.
transition: transform 500ms ease-in-out;