살짝 밀기 애니메이션에 대한 지침

항목 선택을 위해 살짝 밀기 제스처를 구현할 때 살짝 밀기 애니메이션을 사용합니다.

권장 사항

  • 사용자가 선택 상태가 전환될 만큼 충분히 항목을 끌지 않은 상태에서 그냥 떼면 살짝 밀기 선택 애니메이션을 사용하여 선택 상태는 바꾸지 않으면서 항목을 정지 위치로 다시 이동합니다.
  • 살짝 밀기 애니메이션의 방향은 사용자의 살짝 밀기 제스처 방향과 일치해야 합니다.
    • 콘텐츠를 가로로 스크롤할 경우 살짝 밀기 애니메이션은 아래로 이동했다가 다시 위로 이동해야 하므로 살짝 밀기 방향은 세로입니다.
    • 콘텐츠를 세로로 스크롤할 경우 살짝 밀기 애니메이션 시퀀스가 앱의 읽기 순서에 따라 가로로 이동되어야 하므로 살짝 밀기 방향은 가로입니다.
      • 왼쪽에서 오른쪽 읽기 순서를 갖는 앱의 경우 애니메이션은 오른쪽으로 이동한 후 왼쪽으로 이동해야 합니다.
      • 오른쪽에서 왼쪽 읽기 순서를 갖는 앱의 경우 애니메이션은 왼쪽으로 이동한 후 오른쪽으로 이동해야 합니다.
  • 세로로 이동하는 경우 15픽셀, 가로로 이동하는 경우 23픽셀 등 살짝 밀기 애니메이션에 권장되는 거리로 항목을 이동합니다.

관련 항목

디자이너용

추가 및 삭제에 대한 지침

콘텐츠 전환 애니메이션에 대한 지침

끌기 애니메이션에 대한 지침

가장자리 기반 UI 애니메이션에 대한 지침

페이드 애니메이션에 대한 지침

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

포인터 클릭 애니메이션에 대한 지침

위치 변경 애니메이션에 대한 지침

팝업 UI 애니메이션에 대한 지침

개발자용(XAML)

UI 애니메이션

살짝 밀기 제스처 애니메이션

빠른 시작: 라이브러리 애니메이션을 사용하여 UI에 애니메이션 효과 주기

SwipeHintThemeAnimation class

SwipeBackThemeAnimation class

개발자용(HTML)

HTML 애니메이션 라이브러리 샘플

UI 애니메이션

살짝 밀기 제스처 애니메이션

WinJS.UI.Animation.swipeReveal function

WinJS.UI.Animation.swipeSelect function

WinJS.UI.Animation.swipeDeselect function