트윈맥스를 쓰자! [ 02 ] - ease, delay

제가 내용을 길게 쓰질 못하는 이유는... 우선 제가 집중력이 그렇게 길게 가지 않기 때문이고 (...) 필요할 때 한파트씩 찾아보기 편하려는 이유도 있습니다.

1. ease

플래시에서 모션 트윈을 줄 때에 ease 라는 설정이 있습니다. 이 부분은 대부분의 트윈 API에도 존재하는데, 트윈맥스에도 물론 존재합니다. ease값은 애니메이션의 속도감을 조절할 수 있게 해 주는데, 다음 샘플을 보시면 이해하기가 쉬우실 것 같네요.

위의 애니메이션은 모두 3초간 움직이는 애니메이션입니다. 맨 마지막에 도착하는 시간은 동일하게 3초죠. 약간 특이한 움직임을 보이는 Back, Bounce, Elastic 같은 easing을 제외하고는 모두 직선이동에 약간의 속도감 차이만 있는 상태입니다. Linear 는 완전히 등속으로 움직이는 easing입니다. 그리고 Expo가 가장 격한 속도감을 냅니다. Circ는 약간 특이한 속도 증가를 보이는데 저건 뭐라고 표현해야 할 지 모르겠네요.

ease의 사용법은 간단합니다. 이전에 목표값을 넣었던 object 부분에 ease라는 속성을 추가해서 넣어주면 됩니다. Expo.easeOut을 예로 들면 다음과 같은 코드가 되겠죠.

import com.greensock.TweenMax;
import com.greensock.easing.Expo;
// 사용할 효과를 import

TweenMax.to( obj, 1, { ease:Expo.easeOut, x:500 } );

저번과 같이 object를 만들어서 넣으시는 방법으론 다음 같은 코드가 되겠죠.

import com.greensock.TweenMax;
import com.greensock.easing.*;
// easing 전체를 import 하기도 합니다

var params:Object = new Object();
params.ease = Expo.easeOut;
params.x = 500;
TweenMax.to( obj, 1, params );

easeOut 이라는 이름에서 눈치 채셨을 지도 모르지만, easeIn 이라는 효과도 있습니다. 효과를 트윈 시간의 뒷부분에 주느냐 앞부분에 주느냐의 차이가 있죠. 그리고 easeInOut 이라는 것도 있습니다. 일부 트윈은 easeOutIn이라는 것도 제공합니다. 트윈맥스에는 easeOutIn은 없지만요. 모든 효과에는 이 세가지가 모두 포함되어 있습니다. 아, 위에서 Linear에 easeNone이 있었던 걸 기억하신 분이 계신가요? 그건 Linear에만 있습니다.

ease의 방향에 따라서 어떤 차이가 있는지... Sine을 예로 보면 다음과 같습니다.

모두 균일하게 2초간 진행되는 애니메이션이지만 ease에 따라서 다른 느낌이 나는걸 알 수 있습니다. 다음과 같은 코드로 만들어졌습니다.

import com.greensock.TweenMax;
import com.greensock.easing.Sine;

TweenMax.to( rect0, 2, { ease:Sine.easeOut, x:500 } );
TweenMax.to( rect1, 2, { ease:Sine.easeIn, x:500 } );
TweenMax.to( rect2, 2, { ease:Sine.easeInOut, x:500 } );

2. delay

위에서 다루었던 ease를 Special Property 라고 합니다. 트윈맥스에는 이 외에도 많은 Specital Properties를 가지고 있습니다. 그 중 많이 쓰이는 것이 delay 입니다. delay에서 설정한 시간 이후에 tween이 진행되게 됩니다. 다음과 같은 효과를 낼 때 유용하죠.

import com.greensock.TweenMax;
import com.greensock.easing.Back;

var text:Array = [ text0, text1, text2, text3, text4, text5, text6  ];

for( var i:int = 0; i < text.length; ++i )
{
	text[ i ].alpha = 0;
	TweenMax.to( text[ i ], 1, { ease:Back.easeOut, y:110, alpha:1, delay:0.1 * i } );
}

그 외에도 많은 Special Properties가 있는데, 하나씩 일일히 소개할 수는 없고... TweenMax Documentation( http://www.greensock.com/as/docs/tween/ )을 참고하세요.