3.애니메이션 기능

애니메이션 기능은 XLATFORM 화면을 구성하는 화면요소들에게 애니메이션 효과를 주는 기능을 의미합니다. 애니메이션 효과를 줄 수 있는 화면 요소로는 비주얼 컴포넌트들, 화면 Form, Frame, Widget등이 있습니다.

3.1애니메이션 기능의 개요

XPLATFORM에서 애니메이션 기능이란, 버튼이 회전 또는 이동하는 등 화면상에 보이는 UI요소들이 동적으로 변하는 것을 의미합니다.

애니메이션 종류는 크게 Transition Animation, Property Animation, Move Animation과 Composite Animation의 4가지가 있는데, Composition Animation은 Transition과 Property Animation을 조합한 것을 의미합니다.

3.1.1애니메이션 기능의 4가지 요소

애니메이션 기능 사용을 위하여 크게 4가지 요소가 필요합니다.

3.1.2간단한 애니메이션 기능 구현

애니메이션 기능은 4가지 요소가 조합되면 작동 한다고 보면 됩니다.

여기서는 간단히 이미지를 회전시키는 애니메이션 효과를 예로 들어 설명하겠습니다.

프로젝트 생성 및 form의 생성과정은 이미 완료했다는 가정하에 설명을 전개 합니다. 대부분의 예제 화면은 UX-Studio의 화면입니다.

1단계 (무엇을): 회전 대상을 선정합니다. 즉, Animation Target을 선정합니다.
여기서는 TOBESOFT CI를 보여주는 ImageViewer 컴포넌트를 대상으로 선정했습니다.

다음은 UX-Studio에서 Quick View로 실행한 화면입니다.

2단계 (어떻게): Animation Object를 생성하여 애니메이션 종류를 선정합니다.
여기서는 “TOBESOFT CI”를 회전시키는 효과를 선정했으므로 회전효과 기능이 있는 Transition Animation Object를 생성합니다.

3단계 (어떻게): Animation Object의 상세 값을 설정합니다.
여기서 애니메이션 대상과 효과를 연결합니다.

Animation Object의 설정 값을 개략적으로 설명하면 아래와 같습니다.

Property명

의미

direction

left

왼쪽에서 오른쪽으로 효과가 발생합니다.

duration

3000

애니메이션 효과를 3초간 보여줍니다.

정확히, 3초간 1바퀴 돕니다.

id

TransitionAnimation00

애니메이션 효과를 구분하는 id입니다.

starttime

0

트리거 이벤트 발생 이후 대기 시간입니다.

그러므로, 여기서는 곧바로 애니메이션 효과가 나타납니다.

targetcomp

ImageViewer0

ImageViewer00 컴포넌트를 대상으로 지정합니다.

type

flip3d

애니메이션 효과를 회전으로 지정합니다.

Direction property값이 left이므로 왼쪽에서 오른쪽으로 회전효과가 발생합니다.

4단계 (얼마나): 애니메이션 효과를 어떤 시간변화로 작동할지를 결정합니다.

interpolation값을 “Interpolation.circln”으로 지정한다. “circln”은 처음에는 천천히 움직이다가 점차 빨리 움직이는 효과를 나타냅니다.

UX-Studio의 Animation Editor를 이용하면 좀 더 편리하게 애니메이션 효과를 정의할 수 있습니다. Animation Object를 더블클릭하면 해당 Animation Object에 대한 Animation Editor가 나타납니다.

Animation Editor는 위의 화면처럼 interpolation의 효과를 그래프 형태로 볼 수 있습니다.

예제로 보여지는 그래프 는 시간이 지날수록 value 값이 급격이 커지는 효과를 보여줍니다. 즉, 처음에는 천천히 움직이다가 끝날 때쯤에 빠르게 움직이게 됩니다.

5단계 (언제): 애니메이션 트리거 을 지정합니다.
이제 애니메이션에 대한 모든 정보입력을 끝냈고, 작동 스위치만 만들면 됩니다. 여기서는 “회전시작”이라는 버튼을 클릭하면 작동하도록 하겠습니다.

“회전시작”버튼의 click event에 다음 스크립트를 추가합니다.

function Button00_onclick(obj:Button, e:ClickEventInfo)
{
    TransitionAnimation00.beginTransition();
    TransitionAnimation00.endTransition();
    TransitionAnimation00.run();
}

이렇게 스크립트 상에서 run()을 호출하여 애니메이션을 시작시키는 트리거를 수동 트리거라고 합니다.

다음은 UX-Studio에서 Quick View를 실행한 후, “회전시작”버튼을 클릭했을 때 “TOBESOFT” CI 이미지가 회전하는 모습입니다.

“회전시작”버튼으로 회전을 시키면 처음에는 천천히 움직이다가 끝날 때쯤에 빠르게 움직이는 것을 알 수 있을 것입니다.

3.1.3애니메이션 적용 대상

애니메이션의 적용대상은 단순한 컴포넌트 뿐만 아니라 다양한 화면요소에 적용됩니다. 다음은 그 적용 대상들을 표로 나타낸 것입니다.

다음은 애니메이션 적용이 가능한 대상들입니다.

종류

적용 대상

컴포넌트

Button, Calendar, CheckBox, Combo, Div, Edit, graphicpath, Grid,

GroupBox, ImageViewer, ListBox, MaskEdit, Menu, Panel, progressbar

Radio, shape, Spin, Splitter, Static, Tab, TabPage, TextArea

화면 Frame

Form, WidgetForm, ChildFrame, FrameSet, HFrameSet,

TabFrame, TileFrameSet, VFrameSet

3.2애니메이션의 이해

앞에서 애니메이션 개요 및 사용법 간단하게 언급했습니다. 하지만, 실제 애니메이션 기능을 자유롭게 사용하려면 좀 더 많은 부분을 이해해야만 합니다. 여기서는 심도 있는 애니메이션 기능 구현을 위하여 사전에 알아야 할 지식을 설명합니다.

3.2.1애니메이션 용어정의

용어

설 명

StartTime

트리거 발생 시간을 기준으로 애니메이션이 시작되는 시점입니다.

EndTime

트리거 발생 시간을 기준으로 애니메이션이 종료되는 시점입니다.

Duration

애니메이션의 총 진행 시간입니다.

StartTime 이후 Duration에 지정한 시간이 지나면 애니메이션 종료됩니다.

EndTime – StartTime값이 Duration값이 됩니다.

FromValue

애니메이션 시작 시점의 시작 값입니다. 주어지지 않으면 현재 값을 사용합니다.

ToValue

애니메이션 종료 시점의 종료 값입니다.

ByValue

FromValue부터의 상대값입니다. 만일, FromValue를 10으로 하고 ByValue를 20으로 하면 ToValue값을 30으로 지정한 것과 같습니다.

만일, ToValue와 FromValue를 둘 다 지정하면 ByValue값은 무시됩니다.

RunMethod

애니메이션 트리거를 발생 시킵니다.

StopMethod

애니메이션의 실행을 종료시킵니다.

EndingMode

애니메이션이 종료된 후에 갖게 될 최종 값에 대한 선택입니다.

- “To”의 선택: 최종값이 ToValue값을 갖게 됩니다.

- “From”의 선택 : 최종값이 FromValue값을 갖게 됩니다.

- “Current”의 선택 : 최종값이 종료시점의 값을 갖게 됩니다. 즉, FromValue에 도달하기 전에 StopMethod로 애니메이션을 정지시키면 정지된 시점의 값이 최종값이 됩니다.

Time과 Value간의 관계를 예를 들어서 설명하겠습니다.

우선 아래와 같이 Time과 Value를 설정했다고 가정합니다.

StartTime=1000, Duration=5000, FromValue=20, ToValue=1

위와 같이 값을 설정하면 아래의 실행 결과를 예측할 수 있습니다.

3.2.2interpolation

interpolation은 애니메이션 효과의 진행 속도의 장단을 나타내는 계산식입니다. interpolation은 계산식이므로 개발자가 직접 등록할 수도 있지만, XPLATFORM이 제공하는 interpolation을 사용하는 것이 좋습니다. XPLATFORM은 약 30여 개의 interpolation을 제공합니다.

다음은 UX-Studio의 Animation Editor화면 입니다.

1

약 30여 개 interpolation을 제공합니다.

2

선택한 interpolation의 계산 결과값을 그래프로 나타낸 것입니다.

몇 개의 interpolation을 Graph로 설명 드리겠습니다. 이 설명을 보시면 나머지 interpolation들도 Graph만 보고도 바로 그 특징을 알 수 있을 것 입니다.

interpolation


linear

Time값이 증가하는 추세와 동일하게 Value값이 증가합니다.

그러므로, 가속이나 감속이 없이 동일한 속도를 Animation을 진행합니다.

circIn

Time값이 증가할수록 Value값의 증가 추세가 급격해 집니다. 그러므로, 시간이 지날수록 점차 가속하여 Animation을 진행합니다. 즉, 처음에는 천천히 움직이다가 마지막에는 빠르게 움직입니다.

circOut

Time값이 증가할수록 Value값의 증가 추세가 완만해 집니다. 그러므로, 시간이 지날수록 점차 감속하여 Animation을 진행합니다. 즉, 처음에는 빠르게 움직이다가 마지막에는 천천히 움직입니다.

bounceOut

Time값이 증가할수록 Value값의 bounce추세로 변합니다.

시간이 변화에 따라 Value값이 목표 값에 4번이 도달했습니다. 이러한 효과는 공을 바닥에 떨어뜨리는 효과로 Animation을 진행할 경우에 많이 사용됩니다.

이 밖에도 많은 interpolation을 제공합니다. 모든 interpolation이 graph를 제공하므로 graph를 보고 interpolation의 특정을 이해할 수 있습니다.

3.3Transition Animation

Transition Animation이란 이미지 전환 시에 사용하는 Animation효과를 의미합니다. TV에서 A장면에서 B장면으로 넘어가는 효과와 유사합니다. 즉, TV화면 전환할 때 장면을 회전시키거나 흐린 효과를 주면서 다른 장면으로 전환하는 효과를 의미합니다.

Transition Animation의 핵심단어는 “전환”이라고 할 수 있습니다. 그러므로 이 효과에서 가장 중요한 것이 “전환전의 이미지”와 “전환후의 이미지”입니다.

그림으로 표현하면 아래와 같습니다.

전환효과는 다음과 같은 것이 있습니다.

효과명

설명

fade

이미지가 흐려졌다가 밝아지면서 이미지가 전환됩니다.

slide

전환 후 이미지가 전환 전 이미지를 밀면서 전환됩니다.

wipe

전환 후 이미지가 전환 전 이미지를 덮어쓰면서 전환합니다.

flip3d

입체회전을 하면서 이미지가 전환됩니다.

cube3d

입체 Cube회전을 하면서 이미지가 전환됩니다.

3.3.1전환 전후 이미지들의 저장 및 실행

Transition Animation의 구현의 핵심은 전환전과 전환후의 2개의 이미지를 어떻게 저장하느냐를 알면 됩니다. 그 방법은 아주 간단합니다.

전환 전 이미지는 현재의 이미지입니다. 전환 후 이미지는 beginTransition()함수와 endTransition()함수 사이의 구현내용입니다.

이를 도식화하면 아래와 같습니다.

3.3.2Transition Animation의 예

여기서는 ImageViewer 컴포넌트를 사용하여 한 이미지에서 다른 이미지를 변환하는 화면을 예로 만들어 보겠습니다. 전환효과는 입체 Cube회전으로 하겠습니다.

1단계: Animation Target을 선정합니다.
ImageViewer에 이미지를 연결하고, 버튼을 하나 두어 Animation Trigger의 준비를 합니다.

2단계 (어떻게): Transition Animation Object를 생성합니다.
MenuBar에서 TransitionAnimation을 클릭한 후 Invisible Object영역에서 클릭하면 Transition Animation Object가 생성됩니다. 생성과 동시에 Property영역에도 Transition Animation의 속성을 정의할 수 있는 화면이 열립니다.

3단계 (어떻게): Animation Object의 상세 값을 설정합니다.
여기서 Animation Target과 Animation효과를 연결합니다.

Animation Object의 설정 값을 개략적으로 설명하면 아래와 같습니다.

Property명

의미

direction

top

위에서 아래로 회전을 합니다.

duration

1000

Animation효과를 1초간 보여줍니다.

정확히, 1초간 1바퀴 돕니다.

id

TransitionAnimation00

Animation효과를 구분하는 id입니다.

interpolation

Interpolation.backOut

Animation의 시간 경과에 따른 변환속도를 나타냅니다.

starttime

0

Animation Triggering 이후 대기 시간입니다. 그러므로, 여기서는 Animation Triggering이후 곧바로 Animation효과가 나타납니다.

targetcomp

ImageViewer0

Animation Target을 ImageViewer00 컴포넌트로 연결합니다.

type

cube3d

Animation효과를 3d cube회전으로 지정합니다.

4단계 (언제): Animation Trigger을 지정합니다.
이제 Animation에 대한 모든 정보입력을 끝냈고, 작동 스위치만 만들면 됩니다. 여기서는 “Animation시작”이라는 버튼을 클릭하면 작동하도록 하겠습니다.

“Animation시작”버튼의 click event에 다음의 coding을 추가합니다.

var imageFlag = 0;
function Button00_onclick(obj:Button, e:ClickEventInfo)
{
    TransitionAnimation00.beginTransition();
    if (imageFlag == 0)
    {
        ImageViewer00.image = "URL('Image3')";
        imageFlag = 1;
    }
    else
    {
        ImageViewer00.image = "URL('Image2')";
        imageFlag = 0;
    }
    TransitionAnimation00.endTransition();
    TransitionAnimation00.run();
}

이렇게 coding을 하면 버튼을 클릭할 때마다 imageFlag값이 0>1>0로 토글하면서 ImageViewer00.image값을 계속 바꿔주게 됩니다. 그러면, 클릭할 때마다 3d cube Animation 기능이 작동하면서 두 개의 이미지가 계속 바뀌게 됩니다.

다음은 UX-Studio에서 Quick View를 실행한 후, “Animation시작”버튼을 클릭했을 때 이미지가 회전하는 모습입니다.

3.3.3Transition Animation의 Property

다음은 Transition Animation의 Property 리스트입니다. 상세한 내용은 XPLATFORM Reference Guide를 참조하세요.

Name

Description

direction

Transition Animation 이 동작하는 방향의 기준을 나타내는 Property 입니다.

duration

Animation 의 지속 시간을 지정하는 Property 입니다.

interpolation

Animation 의 진행에 따른 변화 값을 구하기 위한 interpolation 함수를 지정하는 Property 입니다. Interpolation Object 에 미리 지정되어있는 predefined interpolation 함수를 사용할 수도 있고 user 가 직접 정의한 script 함수를 설정할 수도 있습니다.

items

TransitionPropItem 정보를 담고 있는 Property 입니다. (TransitionPropItem 은 TransitionAnimation 실행 시에 변경되어야 할 Property List 를 가지고 있는 Object 입니다.)

name

서로 구분하기 위한 고유의 id를 지정하는 Property입니다.

starttime

Animation 의 시작 시간을 지정하는 Property 입니다. Animation 이 Run 된 경우에 설정한 시간만큼 지연된 후에 Animation 이 진행됩니다.

targetcomp

Animation 이 적용될 target component 를 지정하는 Property 입니다.

type

TransitionAnimation 의 타입을 지정하는 Property 입니다.

3.3.4Transition Animation의 Method

다음은 Transition Animation의 Method 리스트입니다. 상세한 내용은 XPLATFORM Reference Guide를 참조하세요.

Name

Description

beginTransition

TransitionAnimation 을 위해 변경전 상태 이미지를 만드는 method 입니다. 상태이미지를 만들 대상이 필요하므로 반드시 targetcomp property 가 설정되어 있어야만 합니다.

cancelTransition

TransitionAnimation 을 위한 변경 전, 후 이미지를 모두 삭제하는 method 입니다.

endTransition

TransitionAnimation 을 위해 변경 후 상태 이미지를 만드는 method 입니다. 상태이미지를 만들 대상이 필요하므로 반드시 targetcomp property 가 설정되어 있어야만 합니다.

run

Animation 을 시작하는 method 입니다.

stop

Animation 을 종료하는 method 입니다.

3.4Property Animation

Property Animation이란 Animation Target의 Property값을 순차적으로 변화 시키면서 Animation효과를 갖는 것을 의미합니다. 만일, Property값의 x, y좌표 Property값에 Property Animation을 적용하면 해당 Animation Target이 움직이는 효과를 갖게 됩니다.

여기서 주위 할 점은 Animation을 적용하는 Property값이 시작 값, 중간 값과 끝 값을 갖는 특성을 가져야만 합니다. 즉, Text나 Boolean Type 처럼 시작, 중간과 끝 값의 개념이 모호한 Property는 Property Animation의 대상이 될 수 없습니다.

3.4.1Transition Animation과 Property Animation의 차이점

Transition Animation은 두 이미지를 사진으로 보관한 상태에서 이 두 개의 이미지를 맞바꾸는 효과를 주는 것입니다.

Property Animation은 두 개의 이미지가 사용하지 않고 하나의 이미지만 사용합니다. Property Animation Target의 Property값을 변경하면서 화면에 실시간으로 반영하여 Animation 효과를 주는 것 입니다.

주의할 점은 Transition Animation과 Property Animation이 상반된 개념이 아니라는 점입니다. 두 개의 Animation은 서로 다른 관점에서 Animation효과를 제공합니다. 예를 들어, 어떤 이미지를 회전하고 싶을 때는 Transition Animation을 사용하고, 그 이미지를 이동시키고 싶을 때는 Property Animation을 사용합니다. 만일 이미지를 회전하면서 이동시키고 싶을 때는 두 개의 Animation을 조합한 Composite Animation을 사용합니다.

3.4.2Property Animation의 예

여기서는 button을 두 개, shape 한 개를 이용하여 Property Animation의 예제를 작성해 보겠습니다.

이 예제는 아래의 기능을 갖습니다.

이 예제를 작성하기 위해서는 아래의 사항을 고려해야 합니다.

1단계: Animation Target을 선정합니다.
button컴포넌트 2개, shape 컴포넌트 1개를 준비합니다.
그리고 설명박스에서처럼 컴포넌트들의 Property값을 설정했습니다.

2단계 (어떻게): Property Animation Object를 생성합니다.
Property Animation Object 두 개를 생성합니다. 총 3개중 두 개는 정적으로 만들고 나머지 한 개는 동적으로 생성합니다. 그리고 설명박스에서처럼 Animation Object의 Property값을 설정했습니다.

3단계 (언제/어떻게) : 두 개의 버튼에 대한 Event를 코딩 합니다.
여기서는 두 개의 버튼 위에 마우스가 올라왔을 때, 버튼의 길이가 늘어나도록 효과를 구현합니다. 두 개의 button 컴포넌트를 동시 drag로 group지은 후에 onmouseenter와 onmouseleave event를 등록합니다.

위와 같이 컴포넌트를 같이 선택한 후 event를 등록하면, 선택된 컴포넌트에서 발생한 event들을 한 event function에서 처리할 수 있습니다.

event function의 coding은 아래와 같이 등록합니다.

// *******************************************************************
// 마우스가 해당 컴포넌트 위로 올라왔을 때, Property Animation을 이용하여 
// 해당 컴포넌트의 width를 늘려줍니다.
// *******************************************************************
function Button_onmouseenter(obj:Button, e:MouseEventInfo)
{
    PropertyAnimation00.targetcomp = obj.name
    PropertyAnimation00.tovalue = 150;
    PropertyAnimation00.run();
}

// *******************************************************************
// 마우스가 해당 컴포넌트를 벗어 났을 때, Property Animation을 이용하여 
// 해당 컴포넌트의 width를 줄여줍니다.
// *******************************************************************
function Button_onmouseleave(obj:Button, e:MouseEventInfo)
{
    PropertyAnimation00.targetcomp = obj.name;
    PropertyAnimation00.tovalue = 100;
    PropertyAnimation00.run();
}
4단계 (언제): 버튼을 클릭했을 때 공이 떨어지는 효과를 연결합니다.
Button00(공을 떨어뜨리는 버튼)의 Event trigger Property인 clickeffect Property에 PropertyAnimation01을 연결하여 Button00을 클릭할 경우, PropertyAnimation01이 작동하도록 합니다.

Button01(공을 제자리로 위치시키는 버튼)도 Event trigger Property를 이용할 수 있지만 여기서는 좀 더 다양한 사용 예를 보여주기 위하여 일반 event처리 합니다. 상세한 예는 5단계를 참조하세요.

5단계 (언제/어떻게): 버튼을 클릭했을 때 공을 제자리로 위치시키도록 Animation을 연결하고 실행하는 코딩을 합니다.
Button01(공을 제자리로 위치시키는 버튼)도 Event trigger Property를 이용할 수 있지만 여기서는 좀 더 다양한 사용 예를 보여주기 위하여 일반 event처리 합니다.

우선, Button01의 onclick event를 event function에 연결합니다.

event function의 coding은 아래와 같이 등록합니다.

// *******************************************************************
// Button01을 클릭했을 때, 동적으로 Property Animation Object를 생성하고
// 해당 Animation Object에 상세한 설정을 한 후 작동시킵니다.
// PropertyAnimation01에 의하여 다른 위치로 옮겨진 공을
// 다시 제자리로 되돌아 가도록 코딩 합니다.
// *******************************************************************
function Button01_onclick(obj:Button, e:ClickEventInfo)
{
    PropertyAnimation02 = new PropertyAnimation();// Property Animation의 생성
    PropertyAnimation02.duration = 500; // 0.5동안 작동.
    PropertyAnimation02.interpolation = Interpolation.linear; // linear효과.
    PropertyAnimation02.targetcomp = Shape00; // Animation Target을 공모양의 shape로 함
    PropertyAnimation02.targetprop = "position.y"; // y축의 이동
    PropertyAnimation02.endingmode = "to";
    PropertyAnimation02.starttime = 0;
    PropertyAnimation02.tovalue = 30; // y축의 값이 30이면 원래 있던 위치임.
    PropertyAnimation02.run(); // Animation 실행.
}

다음은 UX-Studio에서 Quick View를 실행한 후의 화면입니다.

여기서 Mouse를 버튼 위에 올려 놓으면 버튼의 길이가 길어지고, 버튼 위에서 벗어나면 버튼의 길이가 원래 크기로 돌아갑니다.

실행 화면은 아래와 같습니다.

여기서 “떨어져라”버튼을 클릭하면 오른쪽의 빨간색 공이 아래로 떨어집니다.

실행화면은 아래와 같습니다.

그 다음으로 “제자리” 버튼을 클릭하면 오른쪽의 빨간색 공이 제자리로 돌아갑니다.

실행화면은 아래와 같습니다.

3.4.3Property Animation의 Property

다음은 Property Animation의 Property 리스트입니다. 상세한 내용은 XPLATFORM Reference Guide를 참조하세요

Name

Description

byvalue

PropertyAnimation의 offset 값을 설정하는 property 입니다.

duration

Animation 의 지속 시간을 지정하는 Property 입니다.

endingmode

PropetyAnimation이 종료된 이후에 Property 값에 어떤 값을 적용할지 지정하는 property 입니다.

fromvalue

PropertyAnimation 의 시작값을 설정하는 property 입니다.

interpolation

Animation의 진행에 따른 변화값을 구하기 위한 interpolation 함수를 지정하는 Property 입니다. Interpolation Object 에 미리 지정되어있는 predefined interpolation 함수를 사용할 수도 있고 user 가 직접 정의한 script 함수를 설정할 수도 있습니다.

id

서로 구분하기 위한 고유의 id 지정하는 Property입니다.

starttime

Animation의 시작 시간을 지정하는 Property 입니다. Animation 이 Run 된 경우에 설정한 시간만큼 지연된 후에 Animation 이 진행됩니다.

targetcomp

Animation이 적용될 target component 를 지정하는 Property 입니다.

targetprop

PropertyAnimation이 적용될 target property 를 지정하는 Property 입니다.

tovalue

PropertyAnimation의 끝값을 설정하는 property 입니다

3.4.4Property Animation의 Method

다음은 Property Animation의 Method 리스트입니다. 상세한 내용은 XPLATFORM Reference Guide를 참조하세요.

Name

Description

run

Animation 을 시작하는 method 입니다.

stop

Animation 을 종료하는 method 입니다.

3.5Composite Animation

Composite Animation이란 Property Animation들과 Transition Animation들의 조합된 형태입니다. 그러므로, Property Animation과 Transition Animation들을 별도로 실행해도 유사한 효과를 얻을 수 있습니다. 그러나, 별도로 실행할 경우는 동시에 Trigger를 걸어줄 수 없으므로 미세하게 조금씩 시작시간의 차이가 나게 되어, 복합된 Animation효과를 동기화 시키지 못합니다.

아래의 그림은 4개의 Animation들을 1개의 Composite Animation에 등록한 것을 도식화한 것입니다.

위 그림의 Composite Animation을 실행할 경우, 4개의 Animation이 작동하고 다음의 사항을 예측할 수 있습니다.

3.5.1Composite Animation의 예

여기서는 대포를 쏘아서 목표물에 떨어지면 폭발하는 Composite Animation을 예제로 작성해 보겠습니다.

이 예제는 아래의 기능을 갖습니다.

1단계: Animation Target을 선정합니다.
button컴포넌트 1개, shape 컴포넌트들로 대포와 포탄을 그려줍니다.
GraphicPath 컴포넌트로 바닥과 폭발모양을 그려줍니다.

위의 그림에서 빨간색 설명박스로 표시한 컴포넌트들이 Animation과 연관 있는 컴포넌트 입니다. 여기서는 이미지가 아닌 GraphicPath나 Shape 컴포넌트로 모든 화면 요소를 구성했으나, 필요에 따라서 이미지 처리해도 무방합니다.

2단계 (어떻게): Composite Animation Object를 생성합니다.
Composite Animation Object 한 개를 생성합니다.

Composite Animation은 Animation Editor없이는 편집이 어렵습니다. 그러므로 Composite Animation을 생성한 이후에 Animation Editor를 open하세요.

3단계 (어떻게): Composite Animation Object에 여러 개의 Animation들을 등록합니다.
여기서는 5개의 Animation들을 등록했습니다.

“+”버튼으로 등록할 때, “Transition Animation”과 “Property Animation”중 하나를 선택해야만 합니다. 여기서는 두 개의 Transition Animation과 세 개의 Property Animation을 등록합니다.

4단계 (어떻게): 등록한 5개의 Animation들의 상세 정보를 입력합니다.
여기서는 5개의 Animation들을 등록했습니다.
아래의 그림은 Animation Editor의 화면입니다.

1

Composite Animation을 편집하는 영역입니다.

2

Composite Animation에 등록된 Animation들을 편집하는 영역입니다.

여기서는 TransitionAnimation00의 Edit 화면을 보여주고 있습니다.

즉, 등록된 5개의 Animation을 편집하기 위해서 이런 화면을 5번 편집해야 합니다.

Composite Animation은 id외에 어떤 값도 설정하지 않습니다. 왜냐하면, Composite Animation의 Property값은 Animation효과에 영향을 미치지 않고, 등록된 Animation들의 Property값을 설정하지 않았을 때에 사용하는 Default값이기 때문입니다. 그러므로, 여기서는 Composite Animation Property값을 설정할 필요가 없습니다.

5개의 등록된 Animation들의 Property값들은 아래와 같습니다.

  1. TransitionAnimation00의 설정 값 (포탄 회전)

    포탄이 날아가면서 1회전 하는 효과를 줍니다.

  1. PropertyAnimation00의 설정 값 (포탄 x축 이동)

    포탄을 x축 값을 400 pixel만큼 이동합니다. 이로 인해 포탄이 왼쪽에서 오른쪽으로 3초 동안 이동합니다.

  1. PropertyAnimation01의 설정 값 (포탄 y축 이동-위로 올라감)

    포탄을 y축 값을 -150 pixel만큼 이동합니다. 이로 인해 포탄이 1.5초 동안 최고점까지 올라갑니다.

  1. PropertyAnimation02의 설정 값 (포탄 y축 이동-아래로 떨어짐)

    포탄을 y축 값을 150 pixel만큼 이동합니다. 이로 인해 포탄이 1.5초 동안 최고점에서 최저점으로 떨어집니다.

  1. TransitionAnimation01의 설정 값 (폭발하는 모양을 보여줌)

    폭발하는 모양인 GraphicPath01 컴포넌트를 visible=false에서 visible=true로 상태를 바꾸어 fade효과로 보여줍니다.

5단계 (언제): 발사 버튼을 클릭하면 대포를 발사하도록 합니다.
발사 버튼의 onclick event function에 아래와 같이 입력합니다.
function Button00_onclick(obj:Button, e:ClickEventInfo)
{
    Shape00.position.x = 59; // 포탄을 발사 위치로 옮기기
    Shape00.position.y = 196; // 포탄을 발사 위치로 옮기기
    Shape00.visible = true; // 포탄을 보이게 함
    CompositeAnimation00.run(); // 포탄 발사
}

다음은 UX-Studio에서 Quick View를 실행한 후의 화면입니다.

3.5.2Composite Animation의 Property

다음은 Composite Animation의 Property 리스트입니다. 상세한 내용은 XPLATFORM Reference Guide를 참조하세요.

Name

Description

duration

Animation의 지속 시간을 지정하는 Property 입니다.

interpolation

Animation의 진행에 따른 변화 값을 구하기 위한 interpolation 함수를 지정하는 Property 입니다. Interpolation Object에 미리 지정되어있는 predefined interpolation 함수를 사용할 수도 있고 user 가 직접 정의한 script 함수를 설정할 수도 있습니다.

items

CompositeAnimation의 Item 정보를 담고 있는 Property 입니다. CompositeAnimation의 item 은 PropertyAnimation, TransitionAnimation으로 구성됩니다.

id

서로 구분하기 위한 고유의 id를 지정하는 Property입니다.

starttime

Animation의 시작 시간을 지정하는 Property입니다. Animation 이 Run 된 경우에 설정한 시간만큼 지연된 후에 Animation 이 진행됩니다.

targetcomp

Animation이 적용될 target component를 지정하는 Property 입니다.

3.5.3Composite Animation의 Method

다음은 Composite Animation의 Method 리스트입니다. 상세한 내용은 XPLATFORM Reference Guide를 참조하세요.

Name

Description

run

Animation 을 시작하는 method 입니다.

stop

Animation 을 종료하는 method 입니다.

3.6향상된 Animation 기능의 사용

Animation 기능은 그 응용방법에 따라서 다양하게 복잡하게 사용할 수 있습니다. 여기서는 몇 가지 추가적인 사용방법을 설명합니다.

3.6.1자동 Trigger사용하기

script에서 run()을 호출하여 수동으로 Animation을 시작한 것을 수동 Trigger라고 합니다. 자동 Trigger는 이러한 script coding을 하지 않고, 자동으로 Animation을 시작하게 하는 Trigger입니다.

다음은 자동 Trigger들의 리스트입니다.

Trigger종류

정의

대응 Trigger Property

MouseEnter

마우스 포인터가 진입할 때

MouseEnterEffect

MouseLeave

마우스 포인터가 빠져 나갈 때

MouseLeaveEffect

Click

마우스 Click 발생시

ClickEffect

Show

Visible 상태가 될 때

ShowEffect

Hide

Invisible 상태가 될 때

HideEffect

UrlChange

Url이 바뀔 때

UrlChangeEffect

TapChange

Tab index가 바뀔 때

TabIndexChangeEffect

여기서는 Trigger들 중에서 MouseEnter를 예로 설명하겠습니다. MouseEnter Trigger는 Mouse가 특정 컴포넌트의 영역 안으로 들어왔을 때 발생하는 Trigger입니다.

1단계 (어떻게): Animation Object를 생성하여 Animation종류를 선정합니다.
Animation종류를 선택하는 방법은 Transition Animation의 예의 2단계와 동일합니다. 수동 Trigger는 Animation Target을 먼저 생성하지만, 자동 Trigger는 Animation Object를 먼저 생성합니다.

아래의 그림을 보면, 수동 Trigger와 다르게 자동 Trigger는 Animation Target이 Animation Object 정보를 가져야 하기 때문에 Animation Object를 먼저 생성해야만 합니다.

자세한 설명을 단계적으로 설명하겠습니다.

다음은 생성하는 예입니다.

1단계 (어떻게/얼마나): Animation Object을 생성하고 상세 값을 설정합니다.

targetcomp값을 설정하지 않는 이유는 Animation효과를 적용 받을 Animation Target이 아직 결정되지 않았기 때문입니다.

2단계 (무엇을): 회전 대상이 선정하고, 어떤 경우에 회전할지를 결정합니다.
“TOBESOFT” 로고를 보여주는 ImageViewer00 컴포넌트의 영역 안에 Mouse가 들어왔을 때 회전하도록 Animation Object를 연결합니다.

위의 그림을 보면, Animation Target인 ImageViewer00의 mouseentereffect property값에 TransitionAnimation00을 연결하는 것을 알 수 있습니다.

3.6.2User Interpolation만들기

XPLATFORM이 제공하는 interpolation외에 개발자는 직접 interpolation을 개발할 수 있습니다. interpolation함수를 작성하고 Animation의 interpolation Property에 등록하기만 하면 됩니다.

다음은 interpolation함수의 형태입니다.

function useInterpolation(info)
{
    var d = info.duration;
    var t = info.progresstime;
    info.progressvalue = t/d;
}

속성

설명

info.duration

Animation 총 수행시간 (readonly)

info.progresstime

Animation의 실행경과 시간 (readonly)

info.progressvalue

0~1 사이의 값으로, interpolation의 결과값으로 이 property에 값을 할당합니다.

개발자가 직접 개발한 User Interpolation은 해당 Animation의 Interpolation에 등록하면 됩니다. 다음은 Animation Property창에서 User Interpolation을 입력한 화면입니다.

이제 Interpolation을 사용하여 Animation효과를 바꾸어 보겠습니다.

아래의 화면은 버튼을 클릭했을 때 버튼이 왼쪽에서 오른쪽으로 이동하게 하는 Animation을 설정한 화면입니다. 여기서는 Animation Trigger에 대해서는 언급하지 않겠습니다.

Property Animation Object의 주요 설정 값은 아래와 같습니다.

Property명

의미

byvalue

200

200 pixel만큼 버튼을 이동

duration

4000

4초간 이동

endingmode

current

마지막 값이 최종값임

interpolation

Interpolation.linear

가속 없이 일정속도로 이동

targetcomp

Button00

“이동”버튼에 Animation효과를 줌

id

PropertyAnimation00

Animation효과를 구분하는 id입니다.

targetprop

position.x

“이동”버튼의 x좌표 값에 Animation효과를 줌

이 예제를 실행시키면 버튼을 클릭할 때, 버튼이 왼쪽에서 오른쪽으로 한 번만 이동합니다. 이 것을 두 번 왕복이동을 하여 최종에는 제자리에 오도록 하겠습니다.

이 경우, 2번 왕복을 위한 interpolation은 XPLATFORM이 제공하지 않습니다. 아래와 같이 interpolation 함수를 정의합니다.

function useInterpolation(info)
{
    var d = info.duration;
    var t = info.progresstime;
    var kk = 4*t/d;
    if (kk<1)
        info.progressvalue = kk; // 0~1초 사이에 0에서 1로 증가 시킵니다. 
    else if (kk<2)
        info.progressvalue = 2-kk; // 1~2초 사이에 1에서 0으로 감소 시킵니다.
    else if (kk<3)
        info.progressvalue = kk-2; // 2~3초 사이에 0에서 1로 증가 시킵니다.
    else
        info.progressvalue = 4-kk; // 3~4초 사이에 1에서 0으로 감소 시킵니다.
}

이 함수는 “0>1>0>1>0”으로 info.progressvalue값을 변화시킵니다. 이 함수를 위의 Property Animation의 interpolation property에 적용시키면 버튼이 4초간 2번 왕복이동을 하게 됩니다.

3.6.3그 밖에 Animation적용

그 밖에도 Frame, Form, Widget에 Animation을 적용할 수 있습니다.

여기서는 간단하게 Animation적용 방법만 설명하겠습니다.

단계

설명

Animation생성

GlobalVariable의 Objects에 Animation을 등록합니다.

Frame에 Animation적용

원하는 Frame을 등록한 후, Frame의 openstatuseffect Property에 등록한 Animation명을 설정합니다.

실행

Frame을 Minimize/Maximize할 때 해당 효과가 나타납니다.

단계

설명

Animation생성

해당 Form의 Animation을 사용하므로, 컴포넌트에 Animation을 적용할 때와 동일한 방법으로 Animation을 등록합니다.

Form에 Animation적용

Form에 Animation을 적용하려면 Property창에서 등록할 수 없고, script로만 등록할 수 있습니다.

“AnimationName.targetcomp=this;”라고 script 입력하면 됩니다.

실행

Form Animation Trigger는 컴포넌트의 Animation Trigger와 동일하게 작동합니다.