/ 3 그래픽스 / Timebased Animation Interface어제 파워플 3차 모임에선 광호군이 트윈맥스에 대해 발표를 했습니다. 트윈맥스를 위시하여 트위너라 불리는 녀석들은 시간 기반의 애니메이션을 코딩할 수 있게 해줍니다. 따라서 이러한 라이브러리에서 가장 중요한 것은 시간의 통제입니다. 어떻게 시간을 기술할 것이냐에 따라 편리성이 달라지는 셈입니다.
1. Timeline스타일
거의 모든 모션관련 프로그램은 Timeline스타일을 좋아합니다. Timeline이란 절대적인 시간 축이 무조건 흐르고 있는 상태에서 특정한 모션이 시작되는 순간과 끝나는 순간을 절대시간 축을 이용하여 기술하는 방식입니다.
프로그래밍적인 인터페이스로 표현하면 아마도 다음과 같을 겁니다.
setAnimation( bitmap, startTime, endTime, {x:100} );
장점
절대적인 시간 축을 기준으로 애니메이션의 시간을 기술하기 때문에 언제 무슨 일이 생길 건지 알 기 쉽습니다. 즉 아래와 같은 경우 정확히 3초 시점에 몇 개가 애니메이션 되고 있을지 이해하기 편합니다.
setAnimation( bitmap1, 0, 5, {x:100} );
setAnimation( bitmap2, 1, 2, {x:100} );
setAnimation( bitmap3, 2, 5, {x:100} );
척 봐도 bitmap1과 bitmap3만 3초 시점에 애니메이션 중이겠죠.
단점
절대적인 시간 축을 사용하려면 시간이 절대적으로 흐르고 있는 경우만 가능합니다. 만약 클릭 등의 인터렉션으로 다른 시간 축에서 이벤트가 발생하게 된다면 이는 미리 정의할 수 없습니다.
setAnimation( bitmap1, 0, 5, {x:100} );
function click( $e:MouseEvent ):void{
setAnimation( bitmap2, 0, 5, {x:100} );
}
이 경우 click안에 기술된 0~5초는 메인에서 흐르고 있는 절대 시간 축과 다른 시간 축입니다. 이벤트 발생 시점을 0으로 보고 새롭게 흐르는 시간이죠. 따라서 3초 시점에 무슨 일이 일어나고 있는 알 수 없는 건 당연하고, bitmap1의 애니메이션이 끝나는 시점에 무엇을 하려고 할 때 bitmap2의 상황을 예측할 수 없습니다.
따라서 이런 경우는 bitmap1의 애니메이션이 끝나는 시점에 분기를 도입하여 bitmap2가 애니메이션 중이라면 중지 라는 로직을 추가해야 합니다.
2. duration 스타일
트윈맥스 등 트위너 들이 흔히 사용하는 스타일입니다. 시작하는 시점은 언제나 코드가 실행되는 시점이므로 상대적으로 0초부터 시작됩니다. 따라서 기술할 부분은 지속될 시간의 길이죠. 인터페이스로 표현하면 다음과 같습니다.
setAnimation( bitmap, duration, delay );
보통 delay가 도입되어 있는데 상대적인 0초로부터 얼마나 쉬었다가 시작할까를 나타내는 거죠. 따라서 1번 스타일을 2번 스타일로 옮기면 아래와 같이 기술됩니다.
//timeline 스타일 - 시작, 끝
setAnimation( bitmap1, 0, 5, {x:100} );
setAnimation( bitmap2, 1, 2, {x:100} );
setAnimation( bitmap3, 2, 5, {x:100} );
//duration 스타일 - 지속시간, 딜레이
setAnimation( bitmap1, 5, 0, {x:100} );
setAnimation( bitmap2, 1, 1, {x:100} );
setAnimation( bitmap3, 3, 2, {x:100} );
장점
애니메이션의 본질에 대해 더 이해하기 쉽게 만듭니다. 예를 들어 타임라인스타일의 다음 코드를 보죠.
setAnimation( bitmap3, 2.7, 12.3, {x:100} );
이 애니메이션을 보고 수정 요청이 좀 더 빠르게 해달라고 왔다고 하죠. 그럼 단순히 12.3을 11로 줄이는 것이 답이 되지 않습니다.
보통 애니메이션을 이해하기 위해 먼저 12.3 – 2.7 = 9.6 초를 뺄셈합니다. 그 뒤에 9.6초가 느리다니 그럼 7초 정도로 해주면 되나 하면서 2.7 + 7 = 7.7 로 endTime을 조정합니다.
즉 타임라인 기반의 애니메이션 기술은 전체 애니메이션을 이해하기 쉽게 만들지만 반대로 개별 애니메이션의 본질을 이해하기는 어렵게 만드는 인터페이스입니다.
이에 반해 duration스타일은 처음부터 지속시간이 기술되어 있습니다. 위의 샘플을 duration스타일로 표현해보죠.
setAnimation( bitmap3, 9.6, 2.7, {x:100} );
이렇게 된 상태에서는 처음부터 사고의 흐름이 9.6초가 느려? 그럼 7초로 해줄께 하고 수정도 9.6만 7로 바꾸면 됩니다. 개별 애니메이션에 대한 기민한 대응이 가능하죠.
또한 인터렉션 등으로 발생하는 이벤트처리에서 애니메이션 기술도 자연스럽습니다. 왜냐면 모든 애니메이션이 상대적으로 기술되고 있는 상황이라 프로그램 어디에도 절대 시간 축을 기반으로 하고 있는 부분이 없을 것이기 때문에 아예 위에서 언급했던 메인 타임라인이 5초가 되면 이란 식으로 전개되지 않습니다(아마 개별 애니메이션을 실행시키되 끝나거나 연결되는 경우는 전체 프로그램 수준에서 통제 로직을 짤 수 밖에 없겠죠 ^^)
단점
timeline스타일의 장점이 그대로 단점이 됩니다. 즉 3초 시점에 무슨 일이 일어나는 건지 이해하려면 열심히 덧셈을 해봐야 합니다.
3. frame스타일
frame스타일은 시간을 frame으로 추상화 시키는 방식입니다. 플래시IDE가 사용하는 방식이죠.
이 방식에서는 모든 애니메이션은 상대적입니다. 따라서 애니메이션을 비율로 기술하죠. 즉 아래와 같습니다.
setFramePerTime( 0.1 ); // 0.1초가 1프레임에 해당된다.
setAnimation( bitmap, 0, 50, {x:100} ); // 0~50프레임 즉 0~5초간 애니메이션이 작동한다.
장점
프레임레이트만 바꿔주면 전체 애니메이션의 실행시간이 비례적으로 바뀝니다. 한번 기술한 애니메이션으로 빨리 돌리기, 천천히 돌리기 등이 가능합니다.
단점
타임크리티컬한 애니메이션을 기술하면 이후 프레임레이트를 바꿀 때 문제가 생깁니다(당연하죠 =,=)
결론
frame스타일의 본질은 시간대신 frame을 쓴다는 점이지 타임라인이나 지속시간스타일과는 무관합니다. 플래시 IDE는 타임라인스타일에 프레임스타일을 합체한 모양으로 인터페이스가 제공되는 것이죠. 따라서 frame기반으로도 duration모델을 얼마든지 기술할 수 있습니다.
하지만 이게 결론은 아니고 결론은 타임라인 모델과 지속시간 모델은 상호 번역이 가능하다는 점입니다.
따라서 해당 애니메이션을 기술할 때 위에 언급한 세 가지를 섞어서 사용하는 편이 각각의 상황에 유지보수에 유리합니다.
트윈맥스의 경우도 기본 인터페이스는 duration스타일이지만 별도 객체를 이용하면 timeline스타일도 사용할 수 있습니다. 또한 속성을 주면 frameRate기반으로도 작동시킬 수 있습니다.
애니메이션의 인터페이스는 해당 애니메이션이 어떠한 목적과 속성을 갖고 있냐에 따라 다르게 기술하는 편이 유지와 수정에 용이하므로 이 점을 잘 활용해야 합니다.
나눠주기 :
