가장자리 기반 UI 애니메이션(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
가장자리 기반 UI 애니메이션은 화면의 가장자리에서 시작되는 UI를 표시하거나 숨길 때 사용합니다. 사용자 또는 앱에 의해 이 UI가 보기에 표시될 수 있습니다. 이러한 애니메이션은 주로 사용자 지정 컨트롤에서 사용됩니다. AppBar와 같은 기존 컨트롤에는 가장자리 UI에 대한 라이브러리 애니메이션이 기본 제공되므로 이러한 컨트롤을 UI에 포함하기만 하면 애니메이션 동작을 얻을 수 있습니다.
UI는 앱에 오버레이하거나 주 앱 표면의 일부가 될 수 있습니다. UI가 주 앱 표면에 속해 있으면 새 UI가 표시될 공간이 생기도록 앱의 나머지 부분 크기를 조정해야 할 수 있습니다.
.png "가장자리 기반 요소의 기본 다이어그램")
이 애니메이션 집합은 다음 API로 구성됩니다.
가장자리 기반 요소에는 각각 자체 애니메이션 API를 갖는 가장자리 UI와 패널 UI의 두 가지 유형이 있습니다.
다음 동영상은 가장자리 기반 UI를 표시하거나 숨기는 애니메이션을 보여 줍니다.
다음 동영상은 패널을 표시하거나 숨기는 애니메이션을 보여 줍니다.
- AppBar 등과 동작이 유사한 사용자 지정 컨트롤에 애니메이션 효과를 주려는 경우 더 작은 가장자리 기반 UI에 가장자리 UI 애니메이션을 사용합니다. 앱 동작에서 발생하는 오류 및 경고를 표시할 UI 화면/영역을 정의할 수도 있습니다. 해당 시나리오를 해결하려는 경우 플라이아웃에 대한 지침을 검토해야 합니다. 가장자리 기반 UI는 이 시나리오에 적합하지 않을 수 있습니다.
- 패널 UI 애니메이션은 일반적으로 더 큰 가장자리 기반 UI를 포함하고 앱 창을 더 많이 차지하며 가상 키보드 등에 사용합니다.
.png "가장자리 UI와 패널 UI 간 크기 차이를 보여 주는 그림")
중요 Windows에서 제공하는 앱 바 컨트롤에는 가장자리 UI 애니메이션이 포함되어 있습니다. 이러한 컨트롤을 사용할 경우 해당 애니메이션 자체를 제공할 필요가 없습니다.
이러한 애니메이션을 사용하려면 다음 사항을 알고 있어야 합니다.
밀어넣거나 밀어낼 개체.
개체가 이동하는 거리(오프셋). 이 거리는 UI 내부 가장자리에서 화면 가장자리 사이의 최종 거리입니다.
.png "오프셋이라고 부르는 측정치의 그림")
기본 Windows 런타임 컨트롤 동작의 가장자리 기반 애니메이션
AppBar를 추가하여 가장자리 UI를 포함하는 것이 좋습니다. 그러면 모든 적합한 전환 및 조작 동작이 자동으로 적용됩니다. 자세한 내용은 앱 바 추가를 참조하세요.
플라이아웃 개체(Flyout, Menu 도는 SettingsFlyout)에도 기본 제공 애니메이션이 있지만 진정한 가장자리 기반 UI는 아닙니다. 플라이아웃은 앱 창의 가장자리가 아니라 플라이아웃이 표시되게 한 컨텍스트와 연결됩니다. AppBar에서 호출된 UI에 플라이아웃을 사용할 수 있지만 진정한 가장자리 UI는 아닙니다. 자세한 내용은 플라이아웃 추가 및 팝업 UI 애니메이션을 참조하세요.
다른 리소스
가장자리 기반 UI 애니메이션 API 사용을 보여 주는 코드 예제는 HTML 애니메이션 라이브러리 샘플을 참조하세요.
이러한 애니메이션 사용의 디자인 모범 사례는 가장자리 기반 UI 애니메이션에 대한 지침 및 검사 목록을 참조하세요.