끌어서 놓기 애니메이션에 대한 지침 및 검사 목록(Metro 스타일 앱)

dragSourceStart의 올바른 사용

  • 사용자가 직접 개체를 이동하기 시작할 때 dragSourceStart를 사용하세요.
  • 애니메이션에 해당 개체를 포함하는 것은 끌기 동작의 영향을 받는 다른 개체도 있는 경우에 한합니다.
  • 끌어서 놓기 시퀀스를 시작할 수 있도록 dragSourceStart 애니메이션을 트리거하기 전에 일부 개체의 이동을 허용하세요. 그러면 사용자가 탭하거나 선택해야 할 개체를 실수로 끌어오는 것을 방지할 수 있습니다. 권장 임계값은 20TIP(Touch Independent Pixel)입니다.
  • dragSourceStart로 시작하는 애니메이션 시퀀스를 보완하기 위해 dragSourceEnd를 사용하세요. 그러면 dragSourceStart에 의해 끌어오는 개체의 크기 변경이 역전됩니다.

dragSourceEnd의 올바른 사용

  • 사용자가 끌어온 개체를 놓을 때 dragSourceEnd를 사용하세요.
  • 목록의 순서를 바꾸기 위해 개체를 놓을 때, 종종 이 개체의 자리를 마련하기 위해 목록에 있는 기존 항목의 위치를 변경해야 합니다. dragSourceEnd 애니메이션 다음에 항목 추가 없이 addToList 애니메이션을 사용하세요. 추가되는 항목이 이미 있기 때문입니다. 그러면 모든 요소를 올바른 위치로 이동하는 애니메이션이 수행됩니다.
  • 놓은 다음 끌기 원본이 사라질 경우 fadeOut 애니메이션을 사용하세요. 예를 들어 파일을 폴더에 저장하기 위해 파일을 폴더 아이콘 위에 놓을 때 사용합니다.
  • dragSourceEnd 사용 시 해당 개체를 포함하는 것은 dragSourceStart 애니메이션을 사용하여 해당 개체를 포함한 경우에 한합니다.

dragSourceEnd의 잘못된 사용

  • 먼저 dragSourceStart를 사용하지 않은 경우 dragSourceEnd 애니메이션을 사용하지 마세요. 끌어서 놓기 시퀀스가 완료되면 모든 개체가 원래의 크기로 돌아갈 수 있도록 둘 다 사용해야 합니다.

dragBetweenEnter의 올바른 사용

  • 사용자가 개체를 다른 두 개체의 사이에 놓을 수 있는 영역으로 끌어올 경우, 개체가 끌어놓기 영역에 들어오면 dragBetweenEnter 애니메이션을 표시하세요.
  • 알맞은 드롭 대상 영역을 선택합니다. 이 영역은 사용자가 끌기 원본을 배치하기 힘들 정도로 작아서는 안 됩니다.

dragBetweenEnter의 잘못된 사용

  • 끌기 원본을 영역에 놓을 수 없는 경우 dragBetweenEnter 애니메이션을 사용하지 마세요. dragBetweenEnter 애니메이션은 사용자에게 끌어온 개체를 그 아래의 개체 사이에 놓을 수 있음을 알려줍니다.

dragBetweenLeave의 올바른 사용

  • 사용자가 개체를 다른 두 개체의 사이에 놓을 수 있는 영역에서 벗어나도록 끌어갈 경우 개체가 끌어놓기 영역을 떠나면 dragBetweenLeave를 표시하세요.

dragBetweenLeave의 잘못된 사용

검사 목록

일반적인 Windows 스토어 요구 사항에 대해서는 Windows 앱 인증 요구 사항을 참조하세요.

관련 항목

애니메이션 라이브러리 애니메이션 샘플 사용

애니메이션 라이브러리로 UI 요소 애니메이션하기

빠른 시작: 애니메이션

WinJS.UI.Animation 네임스페이스