Windows 앱
콘텐츠의 테이블 축소
콘텐츠의 테이블 확장

Windows 스토어 앱용 애니메이션 패턴

페이지 전환을 보여 주는 Windows 스토어 앱 UI

목적이 있는 애니메이션을 사용하여 환경을 시각적으로 연결하여 스토리를 구성하는 방법에 대해 알아봅니다. Windows 8의 시나리오별 애니메이션은 정보를 전달하고, 사용자가 기대하는 내용이 무엇인지를 알 수 있도록 돕고, 신뢰를 구축하도록 설계되었습니다. 자세한 지침 및 방법 항목은 UI 애니메이션 섹션을 참조하세요.

앱 시작

앱의 첫 페이지를 표시합니다.

|

JavaScript: enterPage 사용

XAML: EntranceThemeTransition 사용

애니메이션 라이브러리를 사용하여 전환에 애니메이션 효과 주기 참조

페이지 간 전환

앱의 한 페이지에서 다른 페이지로 전환합니다.

|

JavaScript: exitPageenterPage 사용

XAML: EntranceThemeTransition 사용

애니메이션 라이브러리를 사용하여 전환에 애니메이션 효과 주기 참조

콘텐츠 간 전환

페이지 내에서 영역의 콘텐츠를 전환합니다.

|

JavaScript: exitContententerContent 사용

XAML: ContentThemeTransition 사용

애니메이션 라이브러리를 사용하여 전환에 애니메이션 효과 주기 참조

터치 및 클릭 피드백

사용자가 타일을 터치 또는 클릭했다는 시각적 피드백을 표시합니다.

|

JavaScript: pointerDownpointerUp 사용

XAML: PointerDownThemeAnimationPointerUpThemeAnimation 사용

애니메이션 라이브러리를 사용하여 포인터에 애니메이션 효과 주기 참조

임시 UI 또는 컨트롤 표시

임시 UI 또는 컨트롤을 표시하고 숨깁니다.

|

JavaScript: fadeInfadeOut 사용

XAML: FadeInThemeAnimationFadeOutThemeAnimation 사용

애니메이션 라이브러리를 사용하여 UI 요소에 애니메이션 효과 주기 참조

새로 고침

콘텐츠를 새로 고치거나 기존 페이지의 레이아웃 변경에 애니메이션 효과를 줍니다.

|

JavaScript: crossFade 사용

XAML: FadeOutThemeAnimationFadeInThemeAnimation 사용

애니메이션 라이브러리를 사용하여 UI 요소에 애니메이션 효과 주기 참조

인라인으로 추가 컨트롤 또는 콘텐츠 표시

기존 UI 내에 공간을 만들도록 추가 컨트롤이나 콘텐츠를 표시합니다.

|

JavaScript: createExpandAnimationcreateCollapseAnimation 사용

XAML: N/A

목록에 항목 추가 또는 삭제

기존 목록에 하나 이상의 항목을 추가하거나 삭제합니다.

|

JavaScript: createAddToListAnimationcreateDeleteFromListAnimation 사용

XAML: AddDeleteThemeTransition 사용

애니메이션 라이브러리를 사용하여 목록 및 목록 항목에 애니메이션 효과 주기 참조

검색 시 목록 필터링

검색 시 목록에 많은 항목을 빨리 추가하거나 삭제합니다.

|

JavaScript: createAddToSearchListAnimationcreateDeleteFromSearchListAnimation 사용

XAML: N/A

애니메이션 라이브러리를 사용하여 목록 및 목록 항목에 애니메이션 효과 주기 참조

명령 또는 메시지 바 표시

화면 가장자리에 명령 또는 메시지 바를 표시하고 숨깁니다.

|

JavaScript: showEdgeUIhideEdgeUI 사용

XAML: EdgeUIThemeTransition 사용

애니메이션 라이브러리를 사용하여 UI 화면에 애니메이션 효과 주기 참조

작업창 표시

화면 가장자리에 작업창 또는 다른 큰 UI 컨테이너를 표시하고 숨깁니다.

|

JavaScript: showPanelhidePanel 사용

XAML: PaneThemeTransition 사용

애니메이션 라이브러리를 사용하여 UI 화면에 애니메이션 효과 주기 참조

팝업 UI 표시

플라이아웃 또는 상황에 맞는 메뉴와 같은 팝업 UI를 표시하고 숨깁니다.

|

JavaScript: showPopuphidePopup 사용

XAML: PopInThemeAnimationPopOutThemeAnimation 사용

애니메이션 라이브러리를 사용하여 UI 화면에 애니메이션 효과 주기 참조

끌기

항목을 끌어서 목록을 다시 정렬합니다.

|

JavaScript: dragSourceStart, dragSourceEnd, dragBetweenEnterdragBetweenLeave 사용

XAML: DragItemThemeAnimation, DropTargetItemThemeAnimationDragOverThemeAnimation 사용

애니메이션 라이브러리를 사용하여 목록 및 목록 항목에 애니메이션 효과 주기 참조

타일을 살짝 밀어 선택

사용자가 살짝 밀기 제스처를 수행한 후 타일에 애니메이션 효과를 주어 정지 위치로 되돌립니다.

|

JavaScript: swipeSelectswipeDeselect 사용

XAML: SwipeBackThemeAnimation 사용

살짝 밀기 기능 알림

타일이 살짝 밀기 제스처를 지원함을 나타내는 애니메이션 효과를 줍니다.

|

JavaScript: swipeReveal 사용

XAML: SwipeHintThemeAnimation 사용

타일 업데이트

타일의 모든 콘텐츠를 업데이트하거나 피크(peek)를 통해 타일에 대한 추가 정보를 일시적으로 표시합니다.

|

JavaScript: createPeekAnimation 사용

XAML: N/A

배지 업데이트

숫자 배지를 새 값으로 업데이트합니다.

|

JavaScript: updateBadge 사용

XAML: N/A

위치 변경

UI 또는 콘텐츠의 위치를 변경합니다.

|

JavaScript: createRepositionAnimation 사용

XAML: RepositionThemeTransition 사용

애니메이션 라이브러리를 사용하여 UI 요소에 애니메이션 효과 주기 참조

관련 항목

Windows 스토어 앱용 UX 지침
UI 애니메이션

 

 

표시:
© 2017 Microsoft