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

지난 장에서 트윈맥스 사용법을 간단하게 알아봤습니다.

[어떤걸?] [몇초동안?] [뭘?어떻게?]

이 세개만 기억하고 있다면 간단하게 활용할 수 있습니다.

또, [뭘?어떻게?] 부분은 제이쿼리 animate 쓸때 처럼 옵션을 여러가지 붙힐 수 있습니다.

아래 예제는 width, height, backgroundColor 값 3가지를 3초동안 변환시켜 줍니다.

또 선택자의 종류는 제이쿼리를 사용해도 되고 제이쿼리를 사용 안해도 됩니다.

트윈맥스가 jQuery의 엔진을 의존하지 않기 때문에 유연하게 선택자를 써도 됩니다.

TweenLite.to('.box', 3, {width:100});
TweenLite.to($(".box"), 3, {width:100});
// 이 둘은 동일하게 사용이 가능합니다.

.from()

아까서부터 .to만 사용해 봤는데 이제 다른걸 사용해 보겠습니다.

.from() 은 애니메이션이 시작할 위치값을 [뭘?어떻게?] 에다가 넣어줍니다.

뭔가 말이 이상하죠? 보통 jQuery 의 animate 를 사용할 때엔 최종적으로 보여줬으면 하는 값들을 넣어주었어요.

예를 들면 크기가 50x50 인 대상을 100x100 으로 보여지게 하기 위해 jQuery 코딩은

$([selector]).animate({
    width: 100,
    height: 100
})

이렇게 했을 것이고, 이렇게 되기 위해서 CSS는

selector{width: 50px;height: 50px;}

이렇게 CSS를 작성했을 꺼예요.

근데.. 트윈맥스의 .from() 메소드는 저 두가지를 반대로 작성하면 됩니다.

CSS 는 최종적으로 보여지게 될 부분으로, 트윈맥스는 어떤 값으로 대상의 애니메이션이 시작할지.

TweenLite.from(photo, 1.5, {scaleX:0, scaleY:0});

.fromTo()

.fromTo는 애니메이션의 시작지점과 종료지점을 지정할 수 있습니다.

TweenLite.fromTo(photo, 1.5, {width:0, height:0}, {width:100, height:200});