애니메이션 정지와 큐 - jQuery stop() 메소드 & clearQueue()
Animation Stop & Queue
제이쿼리에서 애니메이션 사용시 이용되는 stop() 과 clearQueue() 에 대해 알아보도록 합니다.
먼저 애니메이션 큐부터 알아보도록 하겠습니다.
애니메이션 큐
큐는 특정한 엘리먼트에서 발생될 애니메이션의 목록입니다.
제이쿼리를 사용해 엘리먼트에서 애니메이션을 실행시킬 때마다 애니메이션은 큐에 저장됩니다.
엘리먼트는 큐의 모든 애니메이션이 완료될 때까지 큐에 저장된 애니메이션을 한번에 하나씩 실행시킵니다.
다시 말해, 애니메이션 효과의 명령은 큐(Queue)에 누적됩니다.
큐는 먼저 들어간 것이 먼저 나오는 공간을 말합니다.
jQuery의 효과 메서드를 사용하면 효과 명령이 차례차례 큐에 들어가게 되고, 들어간 순서대로 실행되게 됩니다.
아래의 코드를 실행하면서 살펴봅니다.(블랙 박스를 클릭하세요)
See the Pen 애니메이션 큐 by jaeheekim (@jaehee) on CodePen.
위의 코드를 실행하면 동시(한꺼번)에 애니메이션이 실행되는 것이 아니라 차례대로 실행됩니다.
각 애니메이션의 duration을 2000(2초)으로 설정했으므로 각 2초씩 동작하여 6초동안 애니메이션이 동작하게 됩니다.
애니메이션 큐에는 animate() 메서드의 내용이 하나하나 들어가고 하나하나 나오면서 실행되므로 애니메이션이 순서대로 동작하게 됩니다.
이를 그림으로 표현하면 다음과 같습니다.
위에 설명했듯이 먼저 들어간 명령을 차례대로 실행하게 되는 것입니다.
즉, 먼저 들어간 것이 먼저 나오게 되는 것이 큐란 공간입니다.
clearQueue() : 큐의 내용을 제거합니다.
clearQueue() 메소드는 큐에 있는 내용을 제거하고 싶을 경우에 사용할 수 있습니다.
다음은 clearQueue() 메소드를 사용하는 예제입니다.
애니메이션이 동작하고 나서 3초후에 clearQueue() 메서드를 사용하여 큐를 제거하는 코드입니다.(RERUN을 클릭하여 확인하세요)
See the Pen clearQueue() by jaeheekim (@jaehee) on CodePen.
위 애니메이션은 left 스타일 속성 애니메이션이 동작된 후에 width 스타일 속성 애니메이션이 동작하는 중간에 애니메이션이 나머지 애니메이션이 모두 종료되고, 큐를 비운 뒤에 hide() 메서드를 실행되는 것처럼 보일 것입니다.
다시 말새, 코드대로라면 2초간 left 애니메이션이 setTimeout이 3초로 clearQueue 를 시키고 있으므로 width 애니메이션이 동작하는 중간에 종료되고 큐를 비울 것으로 예상할 것입니다.
하지만 위의 hide() 메서드를 제거한 다음의 코드를 실행해 보시기 바랍니다.
See the Pen clearQueue() 테스트2 by jaeheekim (@jaehee) on CodePen.
hide() 메서드를 제거한 코드의 애니메이션을 다시 살펴보면 똑같이 3초시점에 clearQueue()를 하여 큐를 비우고 있지만 width 애니메이션은 모드 끝까지 동작할 것입니다.
hide() 메서드를 사용한 코드는 hide()로 인해 끝까지 동작하지 않는 것처럼 보인 것 뿐입니다.
clearQueue() 메소드는 큐가 비워진 시점에 애니메이션이 진행중인 것이 있다면 해당 애니메이션까지는 동작하고 그 이후에 애니메이션 큐를 비우게 되므로 이후에 추가되는 애니메이션 효과는 동작하지 않게 되는 것입니다.
그리고 이후에 추가하는 효과는 실행되지 않지만 실행되던 애니메이션을 정지하는 기능은 없다는 점에 유의하시기 바랍니다.
애니메이션 정지
위에서 clearQueue() 메서드를 살펴본 바 큐를 제거할 뿐 효과 중간에 애니메이션을 정지하는 기능은 포함하고 있지 않습니다.
애니메이션을 정지하려면 stop() 메서드를 사용해야 합니다.
stop()
$(selector).stop();
$(selector).stop(clearQueue);
$(selector).stop(clearQueue, goToEnd);매개변수 clearQueue와 goToEnd는 불리언 값인 true, false을 입력하며, 인자가 없다면 default로 false값을 입력한 것으로 간주합니다.
첫 번째 매개 변수인 clearQueue를 true로 설정하면 clearQueue() 메서드를 실행하는 것과 같은 효과를 냅니다.
두 번째 매개 변수인 goToEnd를 true로 설정하면 제자리에서 멈추는 것이 아니라 효과를 지정한 최종 형태에서 멈추게 됩니다.
다음의 예제를 통해 좀더 알아보도록 합니다.
See the Pen stop() 메소드 테스트 by jaeheekim (@jaehee) on CodePen.
위 효과는 setInterval로 인해 3초마다 애내메이션이 동작하도록 정의되어 있습니다.
1초간 우측으로 500px을 이동하고 1초간 left : 0 으로 인해 제자리로 돌아오는 효과입니다. 그리고 3초간의 인터벌로 인해 2초간의 애님메이션 효과가 끝난 후 1초간 애니메이션이 정지한 것과 같은 효과를 내고 있습니다.
위의 각 버튼을 클릭한 효과는 다음과 같이 나타납니다.
1. 첫 번재 버튼의 stop() 기본값이 false가 적용된 버튼을 클릭한 경우
첫 번째 버튼을 우측으로 500px 이동하는 중에 클릭했다면 오른쪽으로 이동하는 것을 멈추고 제자리에서 바로 왼쪽으로 되돌아 갈 것입니다.
stop() 메서드는 기본적으로 애니메이션을 정지하는 기능으로 우측 이동중에 stop() 버튼을 클릭했다면 첫 번재 애니메이트 메서드에 적용된 left: '500' 이 바로 정지하고 다음 애니메이트가 적용된 left: 0 의 효과가 나타나게 되어 제자리로 돌아오게 되지만 제자리로 돌아오는 도중에 stop() 버튼을 클릭했다면 바로 애니메이션이 정지하게 됩니다.
앞선 애니메이션인 우측으로 이동하는 효과는 완료된 상태이고 마지막 애니메이션이 실행하는 중에 stop() 클릭한 경우라면 제자리로 돌아오는 중에 멈추는 것이 당연합니다.
2. 두 번재 stop(true) 버튼을 클릭한 경우
clearQueue 가 적용된 버튼으로 우측으로 이동할 경우이든 좌측이로 이동할 경우이든 간에 이동하는 것을 멈추고 setInterval() 함수가 실행될 때까지 대기하게 됩니다.
다시 말해, 애니메이션을 정지하면서 큐를 제거합니다.
우측으로 이동시에 버튼을 눌렀다면 애니메이션이 효과가 정지하면서 두 번째 대기 중인 큐인 애니메이트 큐가 제거될 것이고, 제자리로 돌아오는 도중에 클릭했다면 애니메이션 효과가 정지하고 대기 중인 큐가 없으므로 setInterval() 함수가 실행될 때가지 대기하게 됩니다.
어떻든 간에 좌,우 이동중에 버튼 클릭해 효과를 동일하게 보이게 됩니다.
3. 세 번째 stop(false, true) 버튼을 클릭한 경우
두 번째 매개변수인 goToEnd를 true로 지정할 시 최종 상태에서 멈추게 된다고 언급했습니다.
우측으로 이동 중에 클릭했다면 left: 500 효과가 실행 중이었을 것이고 이 효과의 최종 상태에서 멈추게 됩니다. 그래서 우측으로 이동 중에 버튼을 누르면 빠르게 순간이동한 것처럼 이동 후 다음 애니메이트가 실행되게 됩니다.
그리고 좌측으로 되돌아오는 중에 버튼을 눌렀다면 left : 0 의 최종 상태로 빠르게 효과가 완성된 후 멈추게 됩니다.
다시 말해, goToEnd의 true 값은 해당 애니메이션 효과를 최종상태로 정지시키는 효과를 말합니다.
4. 네 번째 stop(true, true) 버튼을 클릭한 경우
네 번째 버튼은 큐를 제거하는 동시에 애니메이션 효과도 최종상태로 정지시키는 버튼입니다.
우측으로 이동하는 중에 버튼을 클릭했다면 순간 박스는 우측 이동중인 효과를 최종상태로 정지시키면서 대기 중인 큐가 있다면 큐를 제거합니다.
혹시 좌측으로 돌아오고 있기 때문에 큐가 제가 되지 않았을 거라 생각할 수도 있겠지만 이는 setInterval() 메서드 실행 후 다시 우측으로 이동한 후 좌측으로 돌아오기 때문에 그렇게 보이는 것입니다. 우측 끝으로 이동한 상태에서 정지되고 인터벌로 left: 500이 다시 실행되지만 이동할 곳이 없어서 되돌아오는 효과만 나타나게 되는 것입니다.
지금까지 대부분 이해가 되신다면 좌측으로 돌아오는 도중에 버튼을 누르는 경우는 이해하기 쉬울 것입니다.
Related Info
[출처] 모던웹을 위한 JavaScript(윤인성 지음)