페이드 애니메이션(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
항목을 보기로 가져오거나 보기 외부로 이동하려면 페이드 애니메이션을 사용합니다. 페이드 애니메이션에는 페이드 인, 페이드 아웃 및 크로스페이드의 세 가지 유형이 있습니다. 각 애니메이션은 다른 시나리오용으로 디자인되었습니다.
이 애니메이션 집합은 다음 함수로 구성됩니다.
다음 동영상은 보기의 콘텐츠를 페이드 인/아웃하는 애니메이션을 보여 줍니다. 스크롤 막대가 화면 아래쪽에서 페이드 인/아웃됩니다.
다음 동영상은 크로스페이드 애니메이션을 보여 줍니다.
페이드 인
하나의 항목 또는 항목 집합을 특정 위치로 가져오려면 페이드 인 애니메이션을 사용합니다. 페이드 인 애니메이션의 예는 새 컨트롤이 사용자 상호 작용의 결과로 나타날 수 있는 앱 모음에서 확인될 수 있습니다. 또한 페이드 인 애니메이션을 사용하여 콘텐츠가 동적으로 로드될 때 자리 표시자 항목에서 실제 항목으로 전환하거나 사용자 지정 도구 설명이나 대화 상자 컨트롤을 표시할 수 있습니다.
Windows 도구 설명 및 대화 상자 컨트롤에는 페이드 인 및 페이드 아웃 애니메이션이 포함되어 있습니다.
페이드 아웃
하나의 항목 또는 항목 집합을 보기에서 제거하려면 페이드 아웃 애니메이션을 사용합니다. 페이드 아웃 애니메이션의 예는 스크롤 막대나 이동 표시줄 같은 일시적 컨트롤에서 볼 수 있습니다. 이러한 애니메이션은 특정 기간 동안 사용자 입력이 감지되지 않은 후에 페이드 아웃됩니다.
크로스페이드
들어오는 항목으로 기존 항목을 바로 바꾸려면 크로스페이드 애니메이션을 사용합니다. 이 애니메이션에서는 기존 항목이 사라지면서 대체 항목이 같은 공간에 표시됩니다.
다른 리소스
페이드 애니메이션 함수 사용을 보여 주는 코드 예제는 HTML 애니메이션 라이브러리 샘플을 참조하세요.
이러한 애니메이션 사용의 디자인 모범 사례는 페이드 애니메이션에 대한 지침 및 검사 목록을 참조하세요.