팝업 UI 애니메이션(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
상황에 맞는 메뉴 및 플라이아웃을 포함하는 팝업 UI를 표시하고 숨기려면 팝업 애니메이션을 사용합니다. 팝업 요소는 앱 콘텐츠 위에 나타났다가 사용자가 팝업 요소 외부를 탭하거나 클릭할 때 해제되는 컨테이너입니다. 이러한 애니메이션은 주로 사용자 지정 컨트롤에 사용됩니다. Flyout 및 Menu 컨트롤에는 팝업 애니메이션이 포함되어 있습니다. 앱에 이러한 컨트롤을 사용하는 경우 해당 애니메이션을 직접 제공할 필요가 없습니다.
이 애니메이션 집합은 다음 API로 구성됩니다.
다음 동영상은 팝업 UI를 표시하거나 숨기는 애니메이션을 보여 줍니다.
showPopup 애니메이션에는 팝업 요소가 페이드 인되거나 페이드 아웃될 때 처음 위치에서 최종 위치로의 수직 이동에 해당하는 변환이 포함됩니다. 변환 거리와 방향은 앱이 지정합니다. 대부분의 경우 변환은 위쪽으로 50픽셀 이동됩니다. 그러나 팝업 요소가 팝업을 트리거한 UI 요소 아래에 표시되는 경우 변환은 아래쪽으로 50픽셀 이동됩니다. 예를 들어 이 아래쪽으로 변환은 탐색 모음이나 앱 헤더에서 트리거된 플라이아웃에 적용됩니다. 즉, 팝업 요소와 트리거 요소 간에 시각적 연결이 표시됩니다.
팝업 애니메이션을 사용하려는 경우 나타나거나 사라지는 개체, showPopup의 경우에는 개체가 나타나는 동안 이동되는 오프셋을 알아야 합니다.
다른 리소스
팝업 애니메이션 API 사용을 보여 주는 코드 예제는 HTML 애니메이션 라이브러리 샘플을 참조하세요.
이러한 애니메이션 사용의 디자인 모범 사례는 팝업 UI 애니메이션에 대한 지침 및 검사 목록을 참조하세요.