이징 인, 이징 아웃 또는 이징 아웃 중에 프로젝트에 적합한 이징을 선택합니다. 더 재미있는 경험을 위해 바운스를 사용할 수도 있습니다.
애니메이션에서 이징에 사용할 수 있는 다양한 옵션, 프로젝트에 어떤 종류를 사용해야 하며, 애니메이션에 어떤 종류의 기간을 사용해야 하는지 설명
요약
- UI 요소에 ease-out 애니메이션을 사용합니다. Quintic ease-out은 빠르고 간편합니다.
- 애니메이션 재생 시간을 사용해야 합니다. ease-out 및 ease-in은 200ms~500ms여야 하는 반면, 바운스 및 elastic ease는 800ms~1200ms의 더 긴 시간 동안 클록해야 합니다.
일반적으로 ease-out은 적합한 호출이며 훌륭한 기본값입니다. 빠른 시작으로 애니메이션에 바람직하지만 마지막에 감속하는 느낌을 줍니다.
CSS에서 ease-out 키워드로 지정된 방정식을 넘어, '공격성' 범위에 해당하는 잘 알려진 ease-out 방정식 그룹이 있습니다. 빠른 ease-out 효과를 내려면 Quintic ease-out을 고려하세요.
다른 이징 방정식(특히 바운스 또는 elastic ease)은 프로젝트에 적합한 경우에만 드물게 사용해야 합니다. 거슬리는 애니메이션처럼 사용자가 경험에서 벗어날 수 있는 것은 거의 없습니다. 프로젝트가 재미를 위한 것이 아니라면 요소가 UI 주위에서 이탈하지 않도록 하세요. 반대로, 경쾌한 사이트를 만드는 경우 반드시 바운스를 사용하세요!
ease를 시도해 보고 프로젝트의 개성에 맞는 ease를 확인하고 시작하세요. 이징 유형의 전체 목록과 데모는 easings.net을 참조하세요.
올바른 애니메이션 재생 시간 선택
프로젝트에 추가된 애니메이션의 재생 시간이 정확해야 합니다. 너무 짧으면 애니메이션이 공격적이고 선명하게 보입니다. 너무 길면 방해가 되고 짜증이 납니다.
- Ease-out: 약 200ms~500ms. 이렇게 하면 눈으로 애니메이션을 볼 수는 있지만 방해가 되지 않습니다.
- 이즈 인: 약 200ms~500ms. 마지막에 흔들리며, 타이밍을 조금만 변경해도 그 영향이 부드러워집니다.
- 바운스 또는 탄성 효과: 약 800ms~1200ms. 탄성 또는 바운스 효과가 '완화'될 시간을 허용해야 합니다. 이 추가 시간이 없으면 애니메이션의 탄성 바운스 부분이 눈에 거슬리고 공격적인 느낌을 줍니다.
물론 이는 가이드라인에 불과합니다. 다양한 ease를 시도해 보고 프로젝트에 적합한 것을 선택하세요.