[트윈맥스(TweenMax)] 사용법3

Tween을 변수로 만들어 사용할 수 있습니다.

var myTween = new TweenLite(photo, 1.5, {width:100, height:200});

다시 재실행 시키려면 브라우저를 새로고침 할 필요 없이 저 jsFiddle 에서 다른 탭을 선택했다가 Result 를 다시 클릭해주면 됩니다.

객체 지향 접근 방식을 선호하거나, 변수에 Tween에 대한 참조를 저장하는 경우 이런식으로 js를 작성한다고 하네요.

우선 봐야할건, 이렇게 변수에 할당만 했을 뿐인데 애니메이션이 실행이 되었습니다.

애니메이션을 제어하려면 옵션을 작성해 줘야 합니다. 예를들면, 멈춤, 재생, 반전, 재시작 등을 하려면요.

한가지 옵션을 더 넣어주면 됩니다. 아래 jsFiddle 를 보시면 버튼이 총 4개 입니다.

먼저 트윈의 애니메이션을 모두 일시 중지 시켜야 합니다.

var myTween = TweenLite.to(photo, 1.5, {width:100, paused:true});

여기서 잘 보시면 [뭘?어떻게?] 부분에 paused:true 라는게 보입니다.

paused 는 번역기 돌리면 중지 또는 멈춤 이라고 나올꺼예요.

시작, 멈춤, 되돌리기, 재시작 이런 행동들을 할 수 없는 상태라면 정말 아무것도 안하고 멈춰있습니다.

또 이렇게 변수로 할당된 트윈을 다음과 같이 제어할 수 있습니다.

변수명.resume();    : 시작

변수명.pause();    : 멈춤

변수명.reverse();    : 되돌리기

변수명.restart();    : 재시작

위의 jsFiddle 의 Javascript 탭을 클릭해 보시면 어떻게 사용했는지 나옵니다.

Special properties (특별한 속성)

트윈맥스는 특별한 속성을 지원합니다. 그중 하나는 "delay(지연)" 입니다.

jQuery 에서도 이런 메소드가 있습니다. 트윈맥스에서 사용하는 방법하고는 조금 차이가 있으나 개념은 똑같은거 같습니다.

아래 jsFiddle 를 보시면 이해가 빠릅니다. 이 애니메이션은 버튼을 누르면 2초 후에 애니메이션이 시작됩니다.

TweenLite.to(photo, 1.5, {width:100, delay:2});

jsFiddle 의 Javascript 탭을 보시면 [뭘?어떻게?] 부분에 delay 라는 키가 있습니다. 이 옵션의 속성값으로 초 단위의 숫자를 넣어주면 그 시간 이후에 동작을 합니다.

두번째 특별한 속성은 onComplete 입니다.

onComplete 는 애니메이션이 완료 될 때 함수를 호출 합니다. (통칭 "콜백")

jQuery 를 예로 들어서 아래 코드를 보시면

$("Selector").animate({
    left: 100
}, function(){
    $(this).css("color", "#00ff00");
})

animate 메서드의 구문이 끝날 때, function 이 들어가는게 보일꺼예요.

바로 이 function 이 콜백함수 입니다.

트윈맥스 에서는 아래 처럼 onComplete 를 사용합니다.

TweenLite.to(photo, 1.5, {width:100, delay:0.5, onComplete:myFunction});
function myFunction() {
    console.log("tween finished");
}

버튼을 누르면 애니메이션이 실행되고 애니메이션이 끝나면 span 태그에 Good!! 라는 문자가 출력됩니다.

또 Easing 기능을 사용할 수 있습니다. 

Easing 는 애니메이션에 변화율을 줘서 좀더 유동적인 동작들을 수행하는데요.

jQuery 에서는 jQuery UI 인가.. 뭔가... 하는 플러그인 하나를 더 추가시켜 줘서 사용해야 하는거로 기억하고 있습니다.

하지만 트윈맥스는 이 Easing 기능을 이미 가지고 있어서 따로 해당 스크립트를 가져올 필요는 없습니다.

ease 옵션으로 여러가지 Easing 옵션을 다음과 같이 사용하면 됩니다.

TweenLite.to(graph, 2.5, { ease: Back.easeInOut.config(1.7), y: -500 });

Easing 에는 많은 애니메이션 스타일이 있습니다.

직접 눈으로 확인해 봐가면서 체크해 보시면 어떤 움직임들이 있는지 알 수 있습니다.

https://greensock.com/get-started-js 이 주소로 들어가셔서 컨트롤 + F 로 Easing 를 찾으면 그래프 같은게 보입니다.

그 그래프에는 움직임들을 선택할 수 있는데 그래프 아래에 ease 옵션의 키값이 나와서 원하시는 움직임이 있다면 해당 부분을 긁어서 사용하시면 될꺼같습니다.