Windows 스토어 앱용 애니메이션 패턴
.png "페이지 전환을 보여 주는 Windows 스토어 앱 UI")
목적이 있는 애니메이션을 사용하여 환경을 시각적으로 연결하여 스토리를 구성하는 방법에 대해 알아봅니다. Windows 8의 시나리오별 애니메이션은 정보를 전달하고, 사용자가 기대하는 내용이 무엇인지를 알 수 있도록 돕고, 신뢰를 구축하도록 설계되었습니다. 자세한 지침 및 방법 항목은 UI 애니메이션 섹션을 참조하세요.
앱 시작
앱의 첫 페이지를 표시합니다.
JavaScript: enterPage 사용
XAML: EntranceThemeTransition 사용
애니메이션 라이브러리를 사용하여 전환에 애니메이션 효과 주기 참조
페이지 간 전환
앱의 한 페이지에서 다른 페이지로 전환합니다.
JavaScript: exitPage 및 enterPage 사용
XAML: EntranceThemeTransition 사용
애니메이션 라이브러리를 사용하여 전환에 애니메이션 효과 주기 참조
콘텐츠 간 전환
페이지 내에서 영역의 콘텐츠를 전환합니다.
JavaScript: exitContent 및 enterContent 사용
XAML: ContentThemeTransition 사용
애니메이션 라이브러리를 사용하여 전환에 애니메이션 효과 주기 참조
터치 및 클릭 피드백
사용자가 타일을 터치 또는 클릭했다는 시각적 피드백을 표시합니다.
JavaScript: pointerDown 및 pointerUp 사용
XAML: PointerDownThemeAnimation 및 PointerUpThemeAnimation 사용
애니메이션 라이브러리를 사용하여 포인터에 애니메이션 효과 주기 참조
임시 UI 또는 컨트롤 표시
임시 UI 또는 컨트롤을 표시하고 숨깁니다.
JavaScript: fadeIn 및 fadeOut 사용
XAML: FadeInThemeAnimation 및 FadeOutThemeAnimation 사용
애니메이션 라이브러리를 사용하여 UI 요소에 애니메이션 효과 주기 참조
새로 고침
콘텐츠를 새로 고치거나 기존 페이지의 레이아웃 변경에 애니메이션 효과를 줍니다.
JavaScript: crossFade 사용
XAML: FadeOutThemeAnimation 및 FadeInThemeAnimation 사용
애니메이션 라이브러리를 사용하여 UI 요소에 애니메이션 효과 주기 참조
인라인으로 추가 컨트롤 또는 콘텐츠 표시
기존 UI 내에 공간을 만들도록 추가 컨트롤이나 콘텐츠를 표시합니다.
JavaScript: createExpandAnimation 및 createCollapseAnimation 사용
XAML: N/A
목록에 항목 추가 또는 삭제
기존 목록에 하나 이상의 항목을 추가하거나 삭제합니다.
JavaScript: createAddToListAnimation 및 createDeleteFromListAnimation 사용
XAML: AddDeleteThemeTransition 사용
애니메이션 라이브러리를 사용하여 목록 및 목록 항목에 애니메이션 효과 주기 참조
검색 시 목록 필터링
검색 시 목록에 많은 항목을 빨리 추가하거나 삭제합니다.
JavaScript: createAddToSearchListAnimation 및 createDeleteFromSearchListAnimation 사용
XAML: N/A
애니메이션 라이브러리를 사용하여 목록 및 목록 항목에 애니메이션 효과 주기 참조
명령 또는 메시지 바 표시
화면 가장자리에 명령 또는 메시지 바를 표시하고 숨깁니다.
JavaScript: showEdgeUI 및 hideEdgeUI 사용
XAML: EdgeUIThemeTransition 사용
애니메이션 라이브러리를 사용하여 UI 화면에 애니메이션 효과 주기 참조
작업창 표시
화면 가장자리에 작업창 또는 다른 큰 UI 컨테이너를 표시하고 숨깁니다.
JavaScript: showPanel 및 hidePanel 사용
XAML: PaneThemeTransition 사용
애니메이션 라이브러리를 사용하여 UI 화면에 애니메이션 효과 주기 참조
팝업 UI 표시
플라이아웃 또는 상황에 맞는 메뉴와 같은 팝업 UI를 표시하고 숨깁니다.
JavaScript: showPopup 및 hidePopup 사용
XAML: PopInThemeAnimation 및 PopOutThemeAnimation 사용
애니메이션 라이브러리를 사용하여 UI 화면에 애니메이션 효과 주기 참조
끌기
항목을 끌어서 목록을 다시 정렬합니다.
JavaScript: dragSourceStart, dragSourceEnd, dragBetweenEnter 및 dragBetweenLeave 사용
XAML: DragItemThemeAnimation, DropTargetItemThemeAnimation 및 DragOverThemeAnimation 사용
애니메이션 라이브러리를 사용하여 목록 및 목록 항목에 애니메이션 효과 주기 참조
타일을 살짝 밀어 선택
사용자가 살짝 밀기 제스처를 수행한 후 타일에 애니메이션 효과를 주어 정지 위치로 되돌립니다.
JavaScript: swipeSelect 및 swipeDeselect 사용
XAML: SwipeBackThemeAnimation 사용
살짝 밀기 기능 알림
타일이 살짝 밀기 제스처를 지원함을 나타내는 애니메이션 효과를 줍니다.
JavaScript: swipeReveal 사용
XAML: SwipeHintThemeAnimation 사용
타일 업데이트
타일의 모든 콘텐츠를 업데이트하거나 피크(peek)를 통해 타일에 대한 추가 정보를 일시적으로 표시합니다.
JavaScript: createPeekAnimation 사용
XAML: N/A
배지 업데이트
숫자 배지를 새 값으로 업데이트합니다.
JavaScript: updateBadge 사용
XAML: N/A
위치 변경
UI 또는 콘텐츠의 위치를 변경합니다.
JavaScript: createRepositionAnimation 사용
XAML: RepositionThemeTransition 사용
애니메이션 라이브러리를 사용하여 UI 요소에 애니메이션 효과 주기 참조