페이드 애니메이션에 대한 지침

Applies to Windows and Windows Phone

항목을 보기로 가져오거나 보기 외부로 이동하려면 페이드 애니메이션을 사용합니다. 페이드 애니메이션에는 페이드 인, 페이드 아웃 및 크로스페이드의 세 가지 유형이 있습니다.

권장 사항 및 금지 사항

  • 앱이 관련이 없거나 텍스트가 많은 요소 간을 전환할 때는 크로스페이드를 사용하지 말고 페이드 아웃을 사용한 다음 페이드 인을 사용합니다. 이렇게 하면 들어오는 개체가 보이기 전에 나가는 개체가 완전히 사라집니다. 특히 많은 텍스트를 크로스페이드하는 것은 권장되지 않습니다.
  • 크기가 다른 요소 간을 전환하거나 큰 영역을 새로 고칠 때는 크로스페이드 애니메이션을 사용합니다. 애니메이션 중간에 들어오는 요소와 나가는 요소가 반 정도 투명해지고 배경이 보입니다. XAML(Extensible Application Markup Language)에 사용되는 프로그래밍 언어에는 전용 크로스페이드 애니메이션이 들어 있지 않습니다. 이러한 언어에서는 겹치는 시간이 있는 페이드 인 및 페이드 아웃 애니메이션을 사용하여 이러한 효과를 얻을 수 있습니다.
  • 요소 크기가 일정하게 유지되고 같은 항목을 보는 것처럼 느껴지게 하려면 나가는 요소 위에 들어오는 요소를 페이드 인합니다. 들어오는 항목을 나가는 항목 위에 페이드 인할 수 있습니다. 그런 다음 페이드 인이 완료되면 나가는 항목을 제거하면 됩니다. 물론 이렇게 해야만 들어오는 항목이 나가는 항목을 완전히 덮을 수 있습니다. 또한 이 방법을 사용하면 전환 중에 배경이 보이지 않습니다.
  • 목록에서 항목을 추가하거나 삭제하려는 경우에는 페이드 애니메이션을 사용하지 마세요. 해당 용도에 맞게 특수하게 만들어진 목록 애니메이션을 사용합니다.
  • 페이지의 전체 콘텐츠를 변경하려면 페이드 애니메이션을 사용하지 마세요. 해당 용도에 맞게 특수하게 만들어진 페이지 전환 애니메이션을 사용합니다.

관련 항목

디자이너용
추가 및 삭제에 대한 지침
콘텐츠 전환 애니메이션에 대한 지침
끌기 애니메이션에 대한 지침
가장자리 기반 UI 애니메이션에 대한 지침
페이지 전환 애니메이션에 대한 지침
포인터 클릭 애니메이션에 대한 지침
위치 변경 애니메이션에 대한 지침
팝업 UI 애니메이션에 대한 지침
살짝 밀기 애니메이션에 대한 지침
개발자용(HTML)
HTML 애니메이션 라이브러리 샘플
UI에 애니메이션 효과 주기
페이드 애니메이션
fadeIn
fadeOut
crossFade
개발자용(XAML)
UI에 애니메이션 효과 주기
페이드 애니메이션
빠른 시작: 라이브러리 애니메이션을 사용하여 UI에 애니메이션 효과 주기
FadeInThemeAnimation
FadeOutThemeAnimation

 

 

표시:
© 2014 Microsoft