웹 UX를 구성할 때 애니메이션 효과는 어떻게 사용하는 것이 좋은가?

요소의 움직임을 구성할 때 액티브되는 요소가 기존 요소들의 아래로 이동되는 것보다 사용자의 시선을 분산시키지 않도록 가장 상위로 구성하고 자연스러운 움직임으로 따라갈수 있도록 유도해야 한다.

 

요소의 움직이는 애니메이션 거리에 비례하는 시간은 제한사항이 분명히 있어야하고 멀어질 수록 빠르게 움직여야 한다.

사용자의 기다리는 시간은 최대한 짧도록, 그리고 크기와 거리의 비례에 따라서 동작하도록 구성한다.

 

하단 요소가 움직이는 것이 시선에 따라서 보이도록 약간의 딜레이를 주어서 사용자가 아래에서 컨텐츠가 올라오는 것을 볼 수 있도록 한다.

 

리스트를 뿌릴 때 사용자의 시선이 끊기도록 뿌리지 않고 자연스럽게 모든 컨텐츠를 눈의 속도로 이어지게 볼 수 있도록 구성한다.

 

리스트에서 하나의 포커스로 면이 확대될 때는 위와같은 사용자의 시선이 자연스럽게 중앙으로 이어져서 확대되는 애니메이션으로 구성한다.

 

easing을 구성할 때 인공위성과 같이 같은 시간으로 비례하는 컨텐츠는 linear로 구성한다.

 

easing을 구성할 때 시계추와 같이 반복되며 다시 중력에 따라 돌아올 수 있는 컨텐츠는 ease-in-out으로 구성한다.

 

easing을 구성할 때 위와 같이 끝을 다다를 수록 사용자의 시선과 가까워지는 컨텐츠는 위와 같은 베지어 곡선으로 구성한다.

 

easing을 구성할 때 위와 같이 끝을 다다를 수록 닿는 사용자의 시선과 멀어지는 컨텐츠는 점점 빨리 사라지도록 위와 같은 베지어 곡선으로 구성한다.

easing을 구성할 때 위와 같이 차량이 점점 가속도를 붙이면서 출발하는 동작에는 컨텐츠가 점점 빨라지도록 위와 같은 베지어 곡선으로 구성한다.