애니메이션을 부드럽게 하고 가중치를 주는 방법을 알아봅니다.
본질적으로 어떤 것도 한 지점에서 다른 지점으로 선형 이동하지 않습니다. 실제로 물건이 움직일 때 가속하거나 감속하는 경향이 있습니다. 우리의 뇌는 이러한 종류의 모션을 예상하므로 애니메이션을 만들 때 이를 유리하게 사용해야 합니다. 자연스러운 모션을 사용하면 사용자가 앱에 편안함을 느끼게 되어 전반적인 사용 환경이 개선됩니다.
요약
- 이징을 사용하면 애니메이션이 더 자연스럽게 느껴집니다.
- UI 요소에 대해 ease-out 애니메이션을 선택합니다.
- 짧게 유지할 수 있는 경우를 제외하고 ease-in 또는 ease-in-out 애니메이션을 피하세요. 최종 사용자가 느리다고 느끼는 경향이 있습니다.
클래식 애니메이션에서는 천천히 시작했다가 가속하는 모션을 'slow in'이라고 하고, 빠르게 시작했다가 감속하는 모션을 'slow out'이라고 합니다. 웹에서 가장 많이 사용되는 용어는 각각 '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-in 애니메이션을 사용하려면 ease-out 및 선형 애니메이션과 유사하게 다음 키워드를 사용할 수 있습니다.
transition: transform 500ms ease-in;
ease-in-out 애니메이션
이징 인과 아웃은 자동차의 가속 및 감속과 유사하며, 적절히 사용하면 단순히 이징 아웃보다 더욱 극적인 효과를 제공할 수 있습니다.
ease-in은 애니메이션을 느리게 시작하므로 애니메이션 기간을 너무 길게 사용하지 마세요. 일반적으로 300~500ms 사이의 값이 적합하지만, 정확한 수치는 프로젝트의 분위기에 따라 크게 달라집니다. 하지만 느린 시작, 빠른 중간, 느린 종료로 인해 애니메이션의 대비가 증가하여 사용자에게 만족감을 줄 수 있습니다.
ease-in-out 애니메이션을 구현하려면 다음과 같이 ease-in-out CSS 키워드를 사용하면 됩니다.
transition: transform 500ms ease-in-out;