가장자리 기반 UI 애니메이션(C#/VB/C++ 및 XAML을 사용하는 Windows 스토어 앱)

가장자리 기반 UI 애니메이션은 화면의 가장자리에서 시작되는 UI를 표시하거나 숨길 때 사용합니다. 사용자 또는 앱에 의해 이 UI가 보기에 표시될 수 있습니다. EdgeUIThemeTransition은 앱 바나 명령 모음과 같은 더 작은 가장자리 UI에 사용하고, PaneThemeTransition은 미끄러지듯 들어오는 창이나 패널과 같이 더 큰 UI에 사용합니다. 이러한 애니메이션은 주로 사용자 지정 컨트롤에서 사용됩니다. AppBarCommandBar와 같은 기존 컨트롤에는 가장자리 UI에 대한 라이브러리 애니메이션이 기본 제공되므로 이러한 컨트롤을 UI에 포함하기만 하면 애니메이션 동작을 얻을 수 있습니다.

UI는 앱에 오버레이하거나 주 앱 표면의 일부가 될 수 있습니다. UI가 주 앱 표면에 속해 있으면 새 UI가 표시될 공간이 생기도록 앱의 나머지 부분 크기를 조정해야 할 수 있습니다.

가장자리 기반 요소의 기본 다이어그램

가장자리 기반 요소에는 각각 자체 애니메이션 API를 갖는 가장자리 UI와 창 UI의 두 가지 유형이 있습니다.

  • AppBar, CommandBar 등과 동작이 유사한 사용자 지정 컨트롤을 애니메이션하려는 경우 더 작은 가장자리 기반 UI에 가장자리 UI 애니메이션을 사용합니다. 앱의 동작에서 발생되는 오류 및 경고에 대해 UI 화면/영역을 정의할 수도 있습니다. 해당 시나리오를 해결하려는 경우 플라이아웃에 대한 지침을 검토해야 합니다. 가장자리 기반 UI는 이 시나리오에 적합하지 않을 수 있습니다.
  • 창 UI 애니메이션은 앱 창이 더 많은 부분을 사용하는 더 큰 가장자리 기반 UI에 사용됩니다. 여기서 검토할 창 크기의 예로는 가상 키보드가 있습니다.

가장자리 UI와 패널 UI 간 크기 차이를 보여 주는 그림

기본 Windows 런타임 컨트롤 동작의 가장자리 기반 애니메이션

XAML 컨트롤은 컨트롤 템플릿에서 가장자리 기반 애니메이션을 명시적으로 사용하지 않습니다. 그러나 애니메이션 동작이 기본 제공됩니다. Page.BottomAppBarPage.TopAppBar 속성을 통해 AppBar(또는 CommandBar)를 추가하여 가장자리 UI를 포함하는 것이 좋습니다. 그러면 모든 적합한 전환 및 조작 동작이 자동으로 적용됩니다. 자세한 내용은 앱 바 추가를 참조하세요.

플라이아웃(Flyout, MenuFlyout, SettingsFlyout)을 사용하는 경우에도 기본 제공 애니메이션이 있습니다. 그러나 이러한 플라이아웃은 앱 창 가장자리가 아니라 해당 플라이아웃이 표시되는 컨텍스트와 관련되므로 실제로 가장자리 기반 UI가 아닙니다. AppBar에서 호출되는 UI에 플라이아웃을 사용할 수 있지만 순수한 가장자리 UI와는 상황이 다릅니다. 자세한 내용은 플라이아웃 및 메뉴 추가팝업 UI 애니메이션을 참조하세요.

다른 리소스

팝업 샘플에서는 Popup.ChildTransitionsPaneThemeTransition 사용을 보여 줍니다.

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

관련 항목

UI 애니메이션
빠른 시작: 라이브러리 애니메이션을 사용하여 UI 애니메이션
앱 바 추가
EdgeUIThemeTransition
PaneThemeTransition
Popup

 

 

표시:
© 2014 Microsoft. All rights reserved.