콘텐츠 및 시작 전환 애니메이션(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

콘텐츠 전환 애니메이션을 사용하여 컨테이너 또는 배경이 변경되지 않도록 하면서 화면 영역의 콘텐츠를 변경할 수 있습니다. 화면에 새로 들어오는 콘텐츠는 페이드 인하면서 오프셋에서 미끄러지듯 들어옵니다. 기존의 콘텐츠를 대체해야 하는 경우 기존 콘텐츠는 새 콘텐츠가 들어올 때 페이드 아웃합니다. 목록 보기 및 자세히 보기가 표시되는 분할된 화면 탐색에서 이 기능을 사용할 수 있습니다. 콘텐츠 전환 애니메이션은 앱이 페이지를 전환할 때 페이지의 나머지 부분 다음에 로드되는 보기에 콘텐츠를 표시하는 데도 사용됩니다.

이 애니메이션 집합은 다음 함수로 구성됩니다.

다음 동영상에서는 기존 콘텐츠를 제거하고 새 콘텐츠를 보기로 가져오는 이러한 애니메이션을 보여 줍니다.

원래의 콘텐츠와 대체 콘텐츠의 레이아웃이나 크기가 같을 필요는 없습니다.

콘텐츠 전환 API를 사용하려면 다음 사항을 알고 있어야 합니다.

  • 나가는 개체
  • 들어오는 개체
  • 들어오는 콘텐츠가 이동하는 거리 및 방향

다른 리소스

콘텐츠 전환 애니메이션 함수 사용을 보여 주는 코드 예제는 HTML 애니메이션 라이브러리 샘플을 참조하세요.

이러한 애니메이션 사용의 디자인 모범 사례는 콘텐츠 전환 애니메이션에 대한 지침 및 검사 목록을 참조하세요.

관련 항목

UI 애니메이션

페이지 전환 애니메이트

enterContent

exitContent