올바른 이징 선택

이징 인, 아웃 또는 둘 다인지 프로젝트에 적절한 이징을 선택합니다. 바운스를 사용해 재미를 더할 수도 있습니다.

폴 루이스

애니메이션에서 이징에 사용할 수 있는 다양한 옵션과 프로젝트에 어떤 종류를 사용해야 하며 애니메이션에 어떤 종류의 기간을 사용해야 하는지 알아보았습니다.

요약

  • UI 요소에 ease-out 애니메이션을 사용합니다. Quintic ease-out은 빠르지만 매우 멋진 ease입니다.
  • 애니메이션 기간을 사용해야 합니다. ease-out 및 ease-in은 200ms~500ms여야 하며, 바운스 및 elastic ease는 800ms~1200ms여야 합니다.
Quintic ease-out 애니메이션 곡선입니다.

일반적으로 ease-out은 적합한 호출이며 훌륭한 기본값입니다. 빠르게 시작할 수 있으므로 애니메이션에 반응성을 주는 것이 좋습니다. 이는 바람직하지만 마지막에는 감속합니다.

CSS에서 ease-out 키워드로 지정된 방정식 외에도 '공격성'의 범위를 나타내는 잘 알려진 ease-out 방정식 그룹이 있습니다. 빠른 ease-out 효과를 내려면 Quintic ease-out을 고려하세요.

Quintic ease-out 애니메이션 보기

다른 이징 방정식, 특히 바운스 또는 탄성 ease는 프로젝트에 적합한 경우에만 드물게 사용해야 합니다. 불편한 애니메이션처럼 사용자를 방해할 수 있는 요소는 거의 없습니다. 프로젝트가 재미를 위한 것이 아니라면 UI 주위에서 바운드되는 요소가 없어야 합니다. 반대로 가볍게 볼 수 있는 사이트를 만드는 경우라면 바운스를 사용하시기 바랍니다.

ease를 사용해 보고 어떤 ease가 프로젝트의 성격에 맞는지 확인한 다음 거기서부터 시작하세요. 이징 유형의 전체 목록과 데모는 easings.net을 참조하세요.

올바른 애니메이션 길이 선택

프로젝트에 추가된 애니메이션의 재생 시간이 정확해야 합니다. 너무 짧으면 애니메이션이 공격적이고 선명하게 느껴지고 너무 길면 방해가 되고 성가시게 됩니다.

  • ease-out: 약 200ms-500ms. 애니메이션을 눈으로 볼 수 있지만 방해가 되지 않습니다.
  • ease-in: 약 200ms-500ms. 마지막에 흔들리며 타이밍을 변경해도 그 영향이 완화된다는 점에 유의하세요.
  • 바운스 또는 탄성 효과: 약 800ms~1200ms. 탄성 또는 바운스 효과가 '완화'될 시간을 허용해야 합니다. 이 추가 시간이 없으면 애니메이션의 탄성 바운스 부분이 눈에 거슬리고 공격적인 느낌을 줍니다.

물론 이 내용은 가이드라인에 불과합니다. 나만의 ease를 시도해 보고 프로젝트에 적합한 것을 선택하세요.