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

Applies to Windows and Windows Phone

끌어서 놓기 애니메이션은 목록 내에서 항목 이동, 다른 항목 위에 항목 놓기 등 사용자가 개체를 이동할 때 사용합니다.

권장 사항 및 금지 사항

끌기 시작 애니메이션

  • 끌기 시작 애니메이션은 사용자가 개체를 이동하기 시작할 때 사용합니다.
  • 애니메이션에 해당 개체를 포함하는 것은 끌어서 놓기 작업의 영향을 받는 다른 개체도 있는 경우에 한합니다.
  • 사용자는 끌기 시작 애니메이션을 트리거하기 전에 개체를 이동할 수 있습니다. 그러면 사용자가 탭하거나 선택해야 할 개체를 실수로 끌어오는 것을 방지할 수 있습니다. 권장 임계값은 20TIP(Touch Independent Pixel)입니다.
  • 끌기 시작 애니메이션으로 시작되는 모든 애니메이션 시퀀스를 완료하려면 끌기 끝 애니메이션을 사용합니다. 그러면 끌기 시작 애니메이션에 의해 끌어오는 개체의 크기가 반대로 변경됩니다.

끌기 끝 애니메이션

  • 끌기 끝 애니메이션은 사용자가 끌어온 항목을 놓을 때 사용합니다.
  • 목록의 순서를 바꾸기 위해 개체를 놓을 때, 종종 항목을 놓을 자리를 마련하기 위해 목록에 있는 다른 항목의 위치를 변경해야 합니다. 이렇게 하려면 끌기 끝 애니메이션이 완료된 후 추가된 항목 없이 목록 애니메이션을 항목 추가에 사용합니다. 추가되는 항목이 이미 있습니다. 이렇게 하면 모든 요소가 적절한 위치에 놓이면서 애니메이션 효과가 적용됩니다.
  • 놓은 후에 끌기 원본이 사라지는 경우(예를 들어 사용자가 폴더에 파일을 저장하기 위해 폴더에 파일을 놓을 때) 끌기 원본에 페이드 아웃 애니메이션을 사용합니다.
  • 영향을 받는 개체를 끌기 시작 애니메이션에 포함한 경우에만 해당 개체를 끌기 끝 애니메이션에 포함합니다.
  • 끌기 끝 애니메이션은 끌기 시작 애니메이션을 먼저 사용한 경우에만 사용합니다. 끌기 시퀀스가 완료되면 모든 개체가 원래의 크기로 돌아갈 수 있도록 두 애니메이션을 모두 사용해야 합니다.

들어가기 사이 끌기 애니메이션

  • 두 개의 다른 개체 사이에 놓을 수 있는 놓기 영역에 끌기 원본을 끌어올 경우 들어가기 사이 끌기 애니메이션을 사용합니다.
  • 알맞은 놓기 대상 영역을 선택합니다. 이 영역은 사용자가 놓으려는 끌기 원본을 배치하기 힘들 정도로 작아서는 안 됩니다.
  • 놓기 영역을 표시하기 위해 영향을 받는 개체를 이동해야 하는 권장 거리는 40픽셀입니다.
  • 끌어놓기 영역을 표시하기 위해 영향을 받는 개체를 이동해야 하는 권장 방향은 서로 떨어진 방향입니다. 세로로 이동하는지 가로로 이동하는지 여부는 서로에 대해 영향을 받는 개체의 방향에 따라 다릅니다.
  • 끌기 원본을 영역에 놓을 수 없는 경우 들어가기 사이 끌기 애니메이션을 사용하지 마세요. 들어가기 사이 끌기 애니메이션은 사용자에게 끌기 원본을 영향을 받는 개체 사이에 놓을 수 있음을 알려줍니다.

나가기 사이 끌기 애니메이션

  • 두 개의 다른 개체 사이에 놓을 수 있는 영역에서 멀리 개체를 끌어갈 경우 나가기 사이 끌기 애니메이션을 사용합니다.
  • 나가기 사이 끌기 애니메이션은 들어가기 사이 끌기 애니메이션을 먼저 사용한 경우에만 사용합니다.

관련 항목

디자이너용
추가 및 삭제에 대한 지침
콘텐츠 전환 애니메이션에 대한 지침
가장자리 기반 UI 애니메이션에 대한 지침
페이드 애니메이션에 대한 지침
페이지 전환 애니메이션에 대한 지침
포인터 클릭 애니메이션에 대한 지침
위치 변경 애니메이션에 대한 지침
팝업 UI 애니메이션에 대한 지침
살짝 밀기 애니메이션에 대한 지침
개발자용(HTML)
HTML 애니메이션 라이브러리 샘플
UI에 애니메이션 효과 주기
끌어서 놓기 시퀀스 애니메이션
dragSourceEnd
dragSourceStart
dragBetweenLeave
dragBetweenEnter
개발자용(XAML)
UI에 애니메이션 효과 주기
끌어서 놓기 시퀀스 애니메이션
빠른 시작: 라이브러리 애니메이션을 사용하여 UI에 애니메이션 효과 주기
DragItemThemeAnimation
DropTargetItemThemeAnimation
DragOverThemeAnimation

 

 

표시:
© 2014 Microsoft