페이지 전환 애니메이션에 대한 지침

Applies to Windows and Windows Phone

새로 시작한 앱의 첫 번째 페이지를 표시하거나 앱 내에서 페이지 간을 전환하려면 페이지 전환 애니메이션을 사용합니다.

참고  화면 콘텐츠 일부만 바뀔 경우 페이지 전환 애니메이션이 아닌 콘텐츠 전환 애니메이션을 사용합니다.

권장 사항 및 금지 사항

  • 자연스러운 테두리 또는 경계를 따라 페이지를 두 개에서 다섯 개 사이의 영역 집합으로 분할합니다. 영역이 모두 한 번에 표시되지 않고 연속적으로 표시되도록 영역에 시차를 둔 타이밍을 적용하고 와이드 앱 레이아웃의 경우 영역을 100픽셀씩 오프셋합니다. 앱에 좁은 상태를 위한 특정 레이아웃이 있는 경우 더 작은 오프셋 값을 사용할 수 있습니다. 가장 일반적인 페이지 분할 및 페이지가 표시되는 순서는 추가 사용 지침을 참조하세요.
  • 나가는 페이지와 들어오는 페이지에 공통된 콘텐츠가 애니메이션이 적용되지 않고 그대로 유지되는지 확인합니다. 예를 들어 나가는 페이지와 들어오는 페이지 둘 다에 뒤로 단추가 있으면 이 단추는 전환 애니메이션에 포함되지 않습니다.
  • 나가는 페이지에 뒤로 단추가 없지만(예: 앱의 첫 번째 페이지) 들어오는 페이지에는 이 단추가 있는 경우, 뒤로 단추는 별도의 영역으로 지정되고 이 영역이 다른 영역보다 먼저 애니메이션으로 표시됩니다.
  • 나가는 페이지와 들어오는 페이지의 배경이 다른 경우 페이드 인 애니메이션을 사용하여 새 배경을 표시합니다. 페이지 전환 애니메이션과 동시에 페이드 인 애니메이션을 시작합니다.
  • 들어오는 페이지의 일부 콘텐츠가 표시할 준비가 되지 않았으면 페이지 전환 애니메이션을 사용하여 준비되는 콘텐츠만 표시합니다. 추가 콘텐츠를 준비하는 동안 필요에 따라 진행률 컨트롤을 표시합니다. 추가 콘텐츠를 표시할 준비가 되면 콘텐츠 영역을 기반으로 하는 위치에 애니메이션으로 표시됩니다. 콘텐츠 영역이 큰 경우에는 콘텐츠 전환 애니메이션을 사용합니다. 콘텐츠 영역이 작거나 콘텐츠가 연속하지 않을 경우에는 페이드 인 애니메이션을 사용합니다.
  • 일반 창의 흐름 또는 읽기 순서에 반하여 페이지를 보기에 밀어넣습니다. 예를 들어 들어오는 페이지의 콘텐츠가 왼쪽에서 오른쪽으로 이동할 경우 들어오는 페이지는 오른쪽에서 왼쪽으로 이동해야 합니다. 오른쪽에서 왼쪽으로 읽기 순서가 지정된 앱에서 들어오는 페이지는 왼쪽에서 오른쪽으로 미끄러지듯 들어옵니다. 마찬가지로 다음 그림에 설명된 대로 페이지를 섹션으로 분할하면 해당 섹션이 보기에 표시되는 순서는 읽기 순서와 반대입니다.
  • 사용자가 앱 창의 크기를 조정하면 페이지 전환 애니메이션을 실행하지 마세요. 페이지 전환 애니메이션은 특정 뷰 내에서 다른 페이지로 이동하는 데만 사용됩니다. 시스템은 뷰가 바뀔 때 이전 레이아웃에서 새 레이아웃으로 애니메이션을 조작합니다.

추가 사용법 지침

다음은 가장 일반적인 페이지 분할과 표시되는 순서입니다.

일반적인 페이지 분할

다음은 뒤로 단추를 사용한 가장 일반적인 페이지 분할입니다. 나가는 페이지에 뒤로 단추가 없지만(예: 앱의 첫 번째 페이지) 들어오는 페이지에는 이 단추가 있는 경우, 뒤로 단추는 별도의 영역으로 지정되고 이 영역이 다른 영역보다 먼저 애니메이션으로 표시됩니다.

일반적인 페이지 분할

다음은 좁은 너비 또는 세로 보기에 표시되는 앱에서 가장 일반적인 페이지 분할과 분할이 나타나는 순서입니다. 뒤로 단추가 나가는 페이지에 이미 있으면 애니메이션에 포함되지 않고 그대로 유지됩니다.

크기 조정된 보기 또는 세로 뷰의 일반적인 페이지 분할

관련 항목

디자이너용
추가 및 삭제에 대한 지침
콘텐츠 전환 애니메이션에 대한 지침
끌기 애니메이션에 대한 지침
가장자리 기반 UI 애니메이션에 대한 지침
페이드 애니메이션에 대한 지침
포인터 클릭 애니메이션에 대한 지침
위치 변경 애니메이션에 대한 지침
팝업 UI 애니메이션에 대한 지침
살짝 밀기 애니메이션에 대한 지침
개발자용(HTML)
HTML 애니메이션 라이브러리 샘플
UI 애니메이션
페이지 전환 애니메이트
WinJS.UI.Animation.enterPage function
WinJS.UI.Animation.exitPage function
개발자용(XAML)
UI 애니메이션
콘텐츠 및 시작 전환 애니메이션
빠른 시작: 라이브러리 애니메이션을 사용하여 UI에 애니메이션 효과 주기
EntranceThemeTransition class

 

 

표시:
© 2014 Microsoft