[TweenMax | GSAP] 트윈맥스 - 기초3 (Tween 컨트롤하기 [기본] )

트윈맥스 컨트롤하기 : greensock.com/docs/v3/GSAP/Tween

Tween 인스턴스를 제어하기 위해선 변수에 할당해야합니다.

가능한 제어는 여러가지가있습니다.

세팅

const test = document.querySelector('.test');

let tween = gsap.to(test, {duration: 4, rotation: 360});

---

1. play ( 실행 )

트윈맥스는 기본적으로 즉시 실행됩니다. 따라서, 단순 실행이 목적이라면 따로 인스턴스를 제어할 필요가 없습니다!

. play(from : Number , suppressEvents : Boolean ) : self   from : 재생 시작하는 시간 (1초부터 보여줘! 0초부터 보여줘!!!)   suppressEvents: 기본값 true

단순 정말 실행 느낌. 2번에 나올 pause(일시정지)를 시킨뒤, 다시 play()를 해주면 남은 애니메이션이 실행됩니다.

tween.play();

---

2. pause ( 일시정지 )

. pause(atTime : Number , suppressEvents : Boolean ) : self   atTime : 일시 정기하기위해 이동할 시간초!   ( 한마디로, atTime을 설정해줄 경우, 일시정지 버튼을눌러 제어할때 atTime에 설정해준 시간초로 이동해서 일시정지 된다는 의미)   suppressEvents : 기본값은 true ( paused 를 사용한다면 유용하게 사용될것같은데, 더 좋은방법이 있으므로 안알아보겠다.)

인스턴스를 일시 중지 시킵니다. 선택적으로 특정 시간으로 이동할 수 있습니다.

tween.pause();

---

3. resume( 재개 )

. resume() : self

방향을 바꾸지 않고 다시 재생합니다. ( forward or reversed)

tween.resume();

의문 : play와 resume는 그럼 무슨 차이지?
play는 매개변수를 설정해주면 특정 위치에서 실행시킬수도 있지만, resume는 그냥 실행의 느낌입니다.

---

4. reverse ( 역방향 )

. reverse (from : * , suppressEvents : Boolean ) : self   from : 정의하지 않는경우엔, 이벤트가 일어나는 그 시점부터 역방향으로 실행됩니다.           애니메이션이 끝난 시점으로 이동해서 시작하려면 0으로 세팅해주면 됩니다.   suppressEvents : 기본값 true

역방향으로 재생합니다. ( 설정해준 모든것이 반대로 가게됩니다 )

tween.reverse();

---

5. restart ( 재실행 )

. restart(includeDelay : Boolean , suppressEvents : Boolean ) : self   includeDelay: 기본값 false                          만약, 실행되는 tween에 delay가 설정되어있을경우 기본값(false)으로 두고 실행하면 설정해준 delay가 무시되면서                          바로 실행되지만, true 로 설정할경우, 기존에 세팅해준 delay가 적용되어 재실행 될것입니다.   suppressEvents: 기본값 ture

처음으로 돌아가 재실행 시켜줍니다.

tween.restart();