트윈맥스를 쓰자! [ 01 ] - to, from, fromTo 의 활용법

안녕하세요. 언노운입니다.

우선 트윈맥스는 총 3가지의 트윈엔진을 가지고 있습니다. TweenMax, TweenLite, TweenNano 입니다. 기본적인 사용법은 모두 동일합니다만, 많은 기능이 지원되느냐 단순한 기능이 지원되느냐에 따라서 역할이 나뉘어 있습니다. TweenMax는 모든 기능이 총 망라 되어있는 풀 패키지 이고, TweenNano는 가장 단순한 트윈만을 담당하고 있습니다. 역할에 따라서 잘 선택해 사용하시면 됩니다. (각 클래스별 기능 차이는 트윈맥스 사이트(www.tweenmax.com)를 참고하시면 됩니다.)

1. to 메소드

가장 많이 사용되는 메소드입니다. 다음과 같이 사용됩니다.

import com.greensock.TweenMax;

TweenMax.to( obj, 0.5, { x:500 } );

끝입니다.
현재의 상태에서 우리가 지정한 상태까지 우리가 지정한 초 단위의 시간대로 움직입니다.
숫자 형태의 값은 뭐든 지정할 수 있습니다. x, y, scaleX, scaleY, rotation, alpha...
여러개의 속성을 지정할 때에는 다음과 같이 추가하시면 됩니다.

import com.greensock.TweenMax;

TweenMax.to( obj, 0.5, { x:500, y:400, rotation:90 } );

복잡해 보인다면 다음과 같이 정리해 볼 수도 있습니다.

import com.greensock.TweenMax;

var params:Object = new Object();
// Object 인스턴스를 생성
params.x = 500;
params.y = 400;
params.rotation = 90;
// 원하는 속성과 값을 추가
TweenMax.to( obj, 0.5, params );

길지 않다면 {} 를 사용하는게 좋고, 길어지게 될 경우 위와 같이 여러줄로 정리할 수 있습니다. 편하신대로 하시면 되죠.

2. from 메소드

투명한 상태에서 페이드 인이 되는 건 다음과 같은 코드로 구현할 수 있겠습니다.

import com.greensock.TweenMax;

obj.alpha = 0;
TweenMax.to( obj, 1, { alpha:1 } );

굳이 속성을 변경하고 트윈을 이용해 증가시키는게 번거롭다고 생각하신다면 from 메소드를 이용하시면 됩니다.

import com.greensock.TweenMax;

TweenMax.from( obj, 1, { alpha:0 } );

우리가 설정한 속성에서부터 현재 상태까지 변화를 줍니다. to 메소드와 정 반대의 형태로 동작한다고 볼 수 있겠죠.
다만 주의할 부분은, 트윈이 완료되지 않은 상태에서 반복적으로 사용될 경우를 염두에 두어야 합니다.
일례로, 0부터 1까지 알파가 트윈되다가 0.75 까지 진행된 상태에서 다시 같은 from 메소드가 호출되면 현재 상태가 0.75 이므로 다시 0에서부터 트윈은 되지만 종료는 0.75에서 끝나게 됩니다.

3. fromTo 메소드 ( TweenMax Only )

플래시 내장 Tween의 경우 시작값과 종료값을 직접 지정하도록 되어있는데, 트윈맥스에서는 fromTo 라는 메서드로 그런 방식의 트윈을 지원합니다.

무조건 100에서 시작해 300에서 끝나는 트윈을 지정해 봅시다. 다음과 같은 형태가 되겠죠.

import com.greensock.TweenMax;

TweeMax.fromTo( obj, 1, { x:100 }, { x:300 } );

다음번엔 ease, delay에 대해서 다뤄보겠습니다.