[jquery] 애니메이션 메서드

동작을 불어넣는 애니메이션 메서드

애니메이션 메서드를 사용하면 선택한 요소에 스타일을 적용한 움직임을 만들어 낼 수있다.
애니메이션을 적용하기 위해서는 .animate()메서드를 사용한다.

// 기본형
        $('요소').animate({css스타일 속성 : 값}, 효과 적용시간, 가속도, 콜백함수)

 - {css스타일 속성 : 값}
애니메이션으로 적용할 css 스타일을 넣는다.
객체로 넣어야 하며 속성명 : "속성값"의 형태로 작성한다.

- 효과 적용시간
동작에 반응하는데 소요되는 시간을 뜻한다.
적용 시간은 'fast', 'slow', 'normal'이나 밀리세컨즈(ms) 단위로 사용한다.

- 가속도
애니메이션의 가속도를 결정한다. 'swing'과 'linear'를 적용할 수 있다.
swing은 시작과 끝은 느리고 중간부분은 빠른 속도로 움직이는 것을 말하고, linear는 일정한 속도를 말한다.
생략할 경우 기본값인 swing으로 지정된다.

- 콜백함수
생략 가능하며, 애니메이션이 끝나면 실행할 함수가 들어간다.

사용 예시

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

---

애니메이션 효과 제어 메서드

애니메이션 효과 제어 메서드는 '효과' 또는 '애니메이션'이 적용된 요소의 동작을 제어하는 메서드이다.
이 메서드를 사용하려면 queue의 개념을 이해하고 있어야한다.

 

애니메이션 적용 원리와 jquery 애니메이션을 저장하는 공간 큐(Queue)의 개념
애니메이션 메서드는 함수가 적용된 순소대로 큐(queue)라는 저장소(memory)에 저장된다.
큐는 마치 줄을 기다리는 사람들 처럼 줄을 서서 대기하는 공간과 비슷하다.
큐에 저장된 애니메이션이나 효과는 큐(queue)에 순서대로 대기하고,
애니메이션이 순서대로 실행되고 끝나면 다음 애니메이션이 실행된다.
이렇게 먼저 들어간 데이터가 먼저 처리되는 형식을 FIFO(FIst In First Out)방식이라고 부른다.

애니메이션 효과 제어 메서드의 종류
stop()	현재 실행중인 효과를 모두 중지시킬 때 사용한다.
delay()	지정한 시간만큼 지연했다가 애니메이션을 진행한다.
queue()	큐에 사용자 정의 함수를 추가하거나 큐에 대기중인 함수를 배열에 담아 반환한다. 그리고 queue()메서드 이후의 애니메이션 효과 메서드는 모두 취소된다.
dequeue()	queue()메서드를 사용하면 대기하고 있던 애니메이션 메서드가 모두 취소되는데, dequeue()메서드를 사용하면 애니메이션 메서드가 제거되는 것을 막을 수 있다.
clearQueue()	큐에서 처음으로 진행하고 있는 애니메이션만 제외하고 대기중인 애니메이션은 모두 제거한다.
finish()	선택한 요소의 진행중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료한다.

1. stop() 

stop()메서드는 요소에 적용한 애니메이션을 중지시키는 메서드이다.

// 기본형(1)
        $('요소').stop();

기본형(1)에서 stop() 메서드는 진행중인 첫번째 애니메이션만 정지시킨다.
큐에 대기중인 애니메이션은 계속해서 실행된다.

// 기본형(2)
        $('요소').stop(clearQueue, finish);

stop()메서드의 인수에 clearQueue와 finish 값을 받을 수 있다.
기본값은 둘 다 false로 true나 false를 입력할 수 있다.

clearQueue에
false 값이 들어오면 큐에서 대기중인 애니메이션은 그대로 실행되고,
true값이 들어오면 큐에서 대기중인 애니메이션을 모두 삭제된다.

finish에
false 값이 들어오면 진행중이던 애니메이션이 취소되고,
true값이 들어오면 진행중인 애니메이션을 실행 완료 시점으로 강제로 이동시킨다.

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

예시로 아래와 같이 작성해보겠다.
txt1과 txt2에 opacity와 margin-left 가 변하는 애니메이션을 넣어놓고, stop() 메서드를 사용해 보았다.

stop(false, false)	대기중인 애니메이션을 실행하고, 진행중인 애니메이션을 취소한다.
stop(false, true)	대기중인 애니메이션을 실행하고, 진행중인 애니메이션을 실행 완료 시점으로 이동시킨다.
stop( true , false)	대기중인 애니메이션을 삭제하고, 진행중인 애니메이션을 취소한다.
stop( true , true )	대기중인 애니메이션을 삭제하고, 진행중인 애니메이션을 실행 완료 시점으로 이동시킨다.

stop() 메서드에 값을 입력할 경우 위처럼 실행된다.

2. delay() 

delay()는 지연 시킨 후에 애니메이션을 진행한다.
소괄호 안에는 지연하고 싶은 시간을 밀리세컨드(ms)단위로 입력한다.

// 기본형
        $('요소').delay(딜레이 시간);

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

delay() 메서드의 경우 그 시간만큼의 시간을 갖는다는 것과 같기 때문에 애니메이션을 지연시키고 싶다면,
애니메이션 코드 앞에 작성해 주어야한다.

3.queue() / dequeue() / clearQueue()

queue()메서드는 큐에 적용된 애니메이션 함수를 반환하거나 큐에 지정한 함수를 추가한다.

queue()메서드를 실행하면 실행 이후의 모든 애니메이션이 취소된다.
queue()메서드에 함수를 추가할 경우 함수가 실행된 뒤 모든 애니메이션이 취소된다.

dequeue()메서드는 작업 목록에서 다음 작업을 실행시킨다.
queue()메서드 실행 이후에 적용된 애니메이션이 취소되지 않게 연결해주는 역할을 한다.

clearQueue()메서드는 진행중인 첫번째 애니메이션을 제외하고 큐에서 대기하는 모든 애니메이션 함수를 제거한다.

// 기본형(1) : 큐의 함수를 반환시킬 때
        $('요소').queue();

// 기본형(2) : 큐에 함수를 추가
        $('요소').queue(function(){ 코드... });

// 기본형(3) : dequeue() 메서드
        $('요소').dequeue();
        
// 기본형(4) : clearQueue() 메서드
        $('요소').clearQueue();

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

queue()는 실행 이후의 애니메이션이 취소되는 것이기 때문에, stop(true,true)와 모양은 비슷하지만 다르다.
stop은 finish가 적용되어 강제 종료 시점으로 이동하는 것 때문에 끊겨 보이지만 queue 이전 애니메이션은 정상 작동된다.
queue()는 위치에 따라 이후에 취소되는 애니메이션이 결정되지만 clearQueue()는 첫번째 애니메이션을 제외한 모든 애니메이션을 삭제하는 것이기 때문에 가장 마지막에 작성하여도 같은 효과를 볼 수 있다.

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

queue() 메서드는 함수를 넣을 수 있다.
함수가 실행된 이후에 queue 속성에 의해 이후 모든 애니메이션이 취소되기 때문에 dequeue 메서드를 사용해 취소되지 않도록 하였다.

만약, 이때 dequeue 메서드를 queue 메서드의 함수 안에 작성하는 것이 아니라 txt1에 직접 적용하면 어떻게 될까? dequeue()를 바로 뒤에 적으면 queue()로 추가된 함수가 실행되기 전에 dequeue()를 먼저 호출한다. dequeue()메서드는 작업 목록에서 다음 작업을 실행시키는 메서드이기 때문에 바로 다음에 있는 queue() 메서드를 실행시킨다. queue()메서드는 실행시켜야 하지만 이전의 메서드들이 삭제되는 것이 아니기 때문에  완료되지 않은 애니메이션이 동시에 실행된다. 위의 예시에서는 marginLeft : 50px과 marginTop :50px 이 동시에 실행되어 대각선으로 이동하게 된다.

txt2와 txt3에서는 우측으로 점진적으로 움직이도록 메서드를 넣었다.
clearQueue() 메서드가 적용된 txt3은 첫번째 애니메이션만 실행되는 것을 볼 수 있다.

---

활용 예시

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

 

+) 참고 사이트

https://developsd.tistory.com/88#google_vignette

jQuery 애니메이션 큐 (이벤트 누적 제어)

https://blog.naver.com/toplms78/70184626121

효과 - 애니메이션 큐, 애니메이션 정지, 애니메이션 지연