끌어서 놓기 시퀀스 애니메이션(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
끌어서 놓기 애니메이션은 사용자가 손가락이나 입력 장치(마우스 또는 스타일러스 등)로 개체를 이동할 때 사용할 수 있습니다. 대표적인 끌어서 놓기 동작에는 목록 내에서 단일 항목의 위치를 변경하거나 한 항목을 다른 항목의 위에 놓는 경우가 포함됩니다.
참고 사용자가 개체를 이동하는 경우에만 끌어서 놓기 애니메이션을 사용하세요. 다른 방식으로 개체를 이동하려면 위치 변경 애니메이션을 사용하세요.
이 애니메이션 집합은 다음 함수로 구성됩니다.
- dragSourceStart: 사용자가 개체 끌기를 시작할 때 사용합니다.
- dragBetweenEnter: 사용자가 개체를 다른 두 개체의 사이에 놓을 수 있는 지점으로 끌어갈 때 사용합니다.
- dragBetweenLeave: 사용자가 개체를 잠재적 놓기 위치에서 멀리 끌어갈 때 사용합니다.
- dragSourceEnd: 사용자가 끌어간 개체를 놓을 때 사용됩니다.
기본 끌기 지원은 JavaScript용 ListView 및 GridLayout에서 사용할 수 있습니다. 끌어서 놓기 애니메이션은 UI에 이러한 컨트롤을 사용할 경우 기본 제공됩니다. 그러나 이 항목에서 설명하는 애니메이션은 끌어서 놓기 기능을 다른 컨트롤, 특히 고유한 사용자 지정 컨트롤로 확장하는 경우에 유용합니다.
다음 동영상은 끌어서 놓기 작업과 관련된 애니메이션을 보여 줍니다.
끌기 시작
모든 끌어서 놓기 애니메이션 시퀀스는 사용자가 개체 끌기를 시작할 때 표시되는 끌기 시작(dragSourceStart)으로 시작됩니다.
이 애니메이션은 끌기 원본(끌어오는 개체)과 영향을 받는 개체 하나 이상의 모양을 모두 수정합니다. 영향을 받는 개체는 끌어서 놓기 시퀀스에 대한 응답으로 위치가 변경될 수 있는 개체입니다. 예를 들어, 목록의 순서를 변경할 때 끌기 원본을 제외하고 목록의 모든 항목이 영향을 받는 개체가 됩니다. 목록상 위치가 바뀔 수 있기 때문입니다. 영향을 받는 항목에는 현재 작업에 따라 해당 항목의 위치가 변경되는 방식을 보여 주기 위해 애니메이션 효과가 적용됩니다. 끌기 원본의 영향을 받는 개체가 없는 경우도 있습니다.
dragSourceStart 함수를 사용하려면 사용자가 끌고 있는 개체와 영향을 받는 개체를 알고 있어야 합니다.
다음 이미지는 끌기 시작 애니메이션의 영향을 받는 개체와 끌기 원본 간의 관계를 보여줍니다. 첫 번째 이미지는 사용자가 개체 끌기를 시작하기 전에 끌기 개체와 인접 항목을 보여 줍니다.
.png "크기가 같은 네 개의 개체(개체 중 하나가 끌기 원본으로 표시)")
사용자가 개체를 선택하고 끌기 시작하면 끈 개체가 더 커지고 영향을 받는 개체는 더 작아집니다.
.png "네 개의 개체(끌기 원본의 크기는 커지고 영향을 받는 나머지 세 개의 개체는 크기가 작아짐)")
다음 이미지는 인접 개체가 영향을 받지 않는 경우를 보여 줍니다.
.png "네 개의 개체(끌기 원본의 크기는 커지고 나머지 세 개의 개체는 크기가 변경되지 않음)")
끌기 끝
모든 끌어서 놓기 애니메이션 시퀀스는 사용자가 끈 개체를 놓을 때 표시되는 끌기 끝 애니메이션(dragSourceEnd)으로 끝납니다. 끌기 끝 애니메이션은 끌기 시작 애니메이션이 먼저 사용된 경우에만 사용됩니다.
끌기 끝 애니메이션은 끌기 원본(끌려는 개체)을 최종 위치에 배치합니다. 동시에 끌기 시작 애니메이션에 의해 적용된 끌기 원본 및 영향을 받는 항목의 시각적 변경 사항을 제거합니다. dragSourceEnd 호출에서 영향을 받은 개체는 항상 dragSourceStart 호출에 사용되는 것과 동일한 개체입니다.
dragSourceEnd 함수를 사용하려면 사용자가 놓고 있는 개체, 놓은 개체의 최종 위치 및 영향을 받은 개체(dragSourceStart 함수에 포함된 경우)를 알고 있어야 합니다.
다음 이미지는 끌기 끝 애니메이션의 영향을 받는 개체와 끌기 원본 간의 관계를 보여줍니다. 첫 번째 이미지는 사용자가 영향을 받는 개체 집합에 놓기 전 개체의 상태를 보여 줍니다. 끌기 원본은 목록에서 정상 크기보다 크고 목록에서 떨어져 표시됩니다. 영향을 받는 개체는 정상 크기보다 더 작게 표시됩니다.
.png "네 개의 개체(끌기 원본의 크기는 커지고 크기가 작아진 영향을 받는 나머지 세 개의 개체 평면에서 떨어져 있음)")
다음 이미지는 놓은 개체가 다른 개체에 영향을 주지 않는 경우를 보여 줍니다. 끌기 원본은 다시 커지고 나머지 개체에서 떨어져 있지만 다른 개체는 정상 크기로 표시됩니다.
.png "네 개의 개체(끌기 원본의 크기는 커지고 크기가 변경되지 않는 나머지 세 개의 개체에서 떨어져 있음)")
사용자가 끌기 원본을 놓으면 모든 개체는 정상 크기로 돌아가며 필요에 따라 크기가 조정됩니다.
들어가기 사이 끌기
사용자가 개체(끌기 원본)를 다른 두 개체의 사이에 놓을 수 있는 지점으로 끌어갈 때 들어가기 사이 끌기 애니메이션(dragBetweenEnter)을 사용합니다. 이 애니메이션은 사용자가 해당 위치에 원본을 끌어서 놓도록 선택할 경우 그 자리를 마련하기 위해 간격을 떨어뜨려 놓을 영향을 받는 개체를 보여 줍니다.
dragBetweenEnter 함수를 사용하려면 영향을 받은 개체와 이러한 개체가 애니메이션의 일부로 이동되는 방향 및 거리를 알고 있어야 합니다.
다음 이미지는 끌기 원본의 이동에 따른 영향을 받는 개체의 움직임을 보여 줍니다. 첫 번째 이미지는 끌기 원본이 들어가기 사이 끌기 애니메이션을 트리거하기 전에 영향을 받는 개체를 보여 줍니다.
.png "원래 위치에 표시되는 영향을 받는 두 개체 위에 겹쳐지는 끌기 원본 개체")
다음 이미지에서 들어가기 사이 끌기 애니메이션은 끌기 원본의 양쪽에 있는 두 개체가 서로 떨어지도록 합니다.
.png "분리되어 놓기 위치를 보여 주는 영향을 받는 두 개체 위에 겹쳐지는 끌기 원본 개체")
나가기 사이 끌기
사용자가 두 개체 간의 합법적 놓기 영역에서 멀리 원본을 끌어서 놓을 때 나가기 사이 끌기 애니메이션(dragBetweenLeave)을 사용합니다. 이 애니메이션은 끌기 원본이 해당 두 개체 사이에 더 이상 위치하지 않음을 사용자에게 보여 줍니다. 나가기 사이 끌기 애니메이션은 들어가기 사이 끌기 애니메이션 이후에만 사용됩니다.
나가기 사이 끌기 애니메이션의 동작은 들어가기 사이 끌기 애니메이션과 반대입니다. 나가기 사이 끌기 애니메이션은 영향을 받는 개체를 다시 원래 위치로 이동합니다.
dragBetweenLeave 기능을 사용하려면 영향을 받는 개체를 알고 있어야 합니다.
다음 이미지는 끌기 원본의 이동에 따른 영향을 받는 개체의 움직임을 보여 줍니다. 첫 번째 이미지는 끌기 원본 위치에 따라 영향을 받는 개체가 끌기 원본 들어가기 애니메이션에서 분리된 모습을 보여 줍니다
다음 이미지에서는 영향을 받은 개체를 다시 처음 위치로 되돌리기 위해 나가기 사이 끌기 애니메이션이 호출되었습니다.
다른 리소스
끌어서 놓기 애니메이션 함수 사용을 보여 주는 코드 예제는 HTML 애니메이션 라이브러리 샘플을 참조하세요.
이러한 애니메이션 사용의 디자인 모범 사례는 끌어서 놓기 애니메이션에 대한 지침 및 검사 목록을 참조하세요.
관련 항목
dragSourceStart