살짝 밀기 제스처 애니메이션(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
항목 선택을 위해 Windows 8 터치 선택 모델(살짝 밀기)을 구현할 때 살짝 밀기 애니메이션을 사용합니다.
이 애니메이션 집합은 다음 API로 구성됩니다. 이러한 세 애니메이션은 모두 살짝 밀기 상호 작용을 구현할 때 사용되어야 합니다.
다음 동영상은 살짝 밀기 표시 애니메이션을 보여 줍니다.
다음 동영상은 살짝 밀기 선택 및 선택 취소 애니메이션을 보여 줍니다.
참고 ListView 컨트롤에는 터치 선택 및 살짝 밀기 애니메이션이 포함되어 있으므로 해당 컨트롤을 사용할 때는 이러한 애니메이션을 구현할 필요가 없습니다.
살짝 밀기 선택 애니메이션은 사용자가 살짝 밀기 선택을 지원하는 항목을 끌 때 사용됩니다. 사용자는 항목을 충분히 멀리 끌어 선택한 다음 놓아야 합니다. 살짝 밀기 선택 애니메이션은 "선택됨" 상태임을 표시하는 선택 표시(종종 확인 표시)를 항목에 추가하고 항목을 남은 위치로 다시 이동합니다.
.png "살짝 밀기 선택 애니메이션의 단계(이동 및 선택)를 보여 주는 그림")
이 애니메이션을 사용하려면 표시될 선택 표시와 애니메이션의 방향과 거리를 알아야 합니다.
살짝 밀기 선택 취소 애니메이션은 사용자가 현재 선택한 항목을 선택 취소하기 위해 멀리 끈 다음 항목을 놓을 때 사용됩니다. 살짝 밀기 선택 취소 애니메이션은 항목에서 선택 표시를 제거하고 항목을 다시 남은 위치로 이동합니다.
.png "살짝 밀기 선택 취소 애니메이션의 단계(이동 및 선택 취소)를 보여 주는 그림")
이 애니메이션을 사용하려면 숨겨질 선택 표시와 애니메이션의 방향과 거리를 알아야 합니다.
살짝 밀기 표시 애니메이션은 항목이 살짝 밀기 상호 작용을 지원함을 사용자에게 나타내는 데 사용됩니다. 사용자가 살짝 밀기 상호 작용을 지원하는 항목을 길게 누르면 이 애니메이션은 항목이 살짝 밀기 상호 작용을 지원함을 알려주기 위해 항목을 아래로 이동했다가 다시 위로 이동합니다.
.png "살짝 밀기 표시 애니메이션의 단계(이동 및 선택 취소)를 보여 주는 그림")
이 애니메이션을 사용하려면 애니메이션의 방향과 거리를 알아야 합니다. 이 애니메이션은 먼저 지정된 방향으로 항목을 이동하기 위해 재생된 다음 항목을 남은 위치로 다시 이동하기 위해 다시 재생되어 순차적으로 두 번 재생되어야 합니다.
살짝 밀기 애니메이션 API 사용을 보여 주는 코드 예제는 HTML 애니메이션 라이브러리 샘플을 참조하세요.