언어: HTML | XAML

팝업 UI 애니메이션(XAML)

Applies to Windows and Windows Phone

상황에 맞는 메뉴 및 플라이아웃을 포함하는 팝업 UI를 표시하고 숨기려면 팝업 애니메이션을 사용합니다. 팝업 요소는 앱 콘텐츠 위에 나타났다가 사용자가 팝업 요소 외부를 탭하거나 클릭할 때 해제되는 컨테이너입니다. 이러한 애니메이션은 주로 사용자 지정 컨트롤에서 사용됩니다. XAML에서 Popup, Flyout, MenuFlyout 요소를 사용하는 경우 이미 기본 제공 라이브러리 애니메이션이 있으므로 여기에 동작을 추가할 필요가 없습니다.

팝업 동작과 관련된 애니메이션은 PopInThemeAnimation, PopOutThemeAnimation, PopupThemeTransition입니다.

팝업 애니메이션에는 팝업 요소가 페이드 인되거나 페이드 아웃될 때 처음 위치에서 최종 위치로의 수직 이동에 해당하는 변환이 포함됩니다. 변환 거리와 방향은 앱이 지정합니다. 대부분의 경우 변환은 위쪽으로 50픽셀 이동됩니다. 그러나 팝업 요소가 팝업을 트리거한 UI 요소 아래에 표시되는 경우 변환은 아래쪽으로 50픽셀 이동됩니다. 예를 들어 이 아래쪽으로 변환은 탐색 모음이나 앱 헤더에서 트리거된 플라이아웃에서 사용됩니다. 즉, 팝업 요소와 트리거 요소 간에 시각적 연결이 표시됩니다.

기본 Windows 런타임 컨트롤 동작의 팝업 애니메이션

Popup, Flyout, MenuFlyout에 대한 기본 코드에서는 애니메이션을 사용하지 않으며, 이러한 유형에는 템플릿 및 스타일 외부에 있는 고유한 기본 제공 애니메이션이 있습니다. Popup에는 null로 시작하는 ChildTransitions 속성이 있으며, 원하는 경우 PopupThemeTransition을 추가할 수 있습니다. 이렇게 추가하는 이유는 FromHorizontalOffset 또는 FromVerticalOffset을 조정하기 위한 것입니다.

다른 리소스

XAML 개성 애니메이션 샘플에서는 Storyboard에서 정의되고 명시적으로 호출되는 PopInThemeAnimationPopOutThemeAnimation을 사용하는 방법을 보여 줍니다. 샘플의 시나리오 1이 여기에 해당합니다.

이러한 애니메이션 사용의 디자인 모범 사례에 대해서는 팝업 UI 애니메이션의 지침 및 검사 목록을 참조하세요.

관련 항목

UI 애니메이션
가장자리 기반 UI 애니메이션
빠른 시작: 라이브러리 애니메이션을 사용하여 UI에 애니메이션 효과 주기
XAML 개성 애니메이션 샘플
PopInThemeAnimation
PopOutThemeAnimation
PopupThemeTransition

 

 

표시:
© 2014 Microsoft