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

애니메이션 기능의 개요

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

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

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

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

• 무엇을 : 어떤 화면요소에게 애니메이션 효과를 줄 것인가를 결정합니다.

• 어떻게 : 어떤 애니메이션 효과를 줄 것인가를 결정합니다.

• 얼마나 : 결정된 애니메이션 효과를 얼마나 오랫동안 어떤 빠르기로 실행할 것인가를 결정합니다. interpolation은 애니메이션에서 시간변화의 장단을 나타내는 계산식을 의미합니다. 그러므로 “얼마나” 보다는 “어떻게”에 가깝다고도 할 수 있지만, 시간 개념이 들어가므로 “얼마나”로 분류했습니다.

• 언제 : 애니메이션 효과를 언제 시작할 지를 결정합니다.

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

애니메이션 기능은 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의 설정 값을 개략적으로 설명하면 아래와 같습니다.

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 이미지가 회전하는 모습입니다.

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

애니메이션 적용 대상

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

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

애니메이션의 이해

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

애니메이션 용어정의

• 트리거(Trigger)

  애니메이션의 시작을 일으키는 사건을 의미합니다. 애니메이션 트리거에는 수동 트리거와 자동 트리거가 있습니다.

  수동 트리거는 스크립트에서 직접 트리거를 걸어주는 것을 의미합니다. “5.1.2.장”에서 사용한 run() 호출이 여기에 속합니다.

  자동 트리거는 화면 실행 중에 자동으로 발생하는 트리거를 의미합니다. 자동 트리거의 사용방법은 “5.4.1장”에서 상세하게 다룹니다.

• Interpolation

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

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

• 애니메이션의 시간과 값

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

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

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

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

• 트리거 발생시점으로부터 1초(1000ms)후에 애니메이션이 실행됩니다. 트리거는 자동 트리거를 사용할 수도 있고, run() 메소드를 사용한 수동 트리거를 사용할 수도 있습니다.

• 애니메이션 실행의 시작 시점의 Value는 20입니다.

• 애니메이션 실행 후, 5초 경과 후에 애니메이션이 종료됩니다.

• 애니메이션 종료후의 Value는 1입니다. 만일, EndingMode를 From으로 했다면 Value는 애니메이션 종료 후 20으로 되돌아 갑니다.

• 애니메이션을 실행하는 5초 동안 Value값은 20에서 1로 변경됩니다. 값은 보통 1초에 4씩 감소하게 됩니다. 만일, EndingMode값을 From으로 설정하면, Value값이 1이 되어도 애니메이션 실행이 종료된 이후의 Value값은 20으로 돌아가게 됩니다.

interpolation

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

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

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

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

Transition Animation

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

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

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

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

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

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

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

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

Transition 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의 설정 값을 개략적으로 설명하면 아래와 같습니다.

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시작”버튼을 클릭했을 때 이미지가 회전하는 모습입니다.

Transition Animation의 Property

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

Transition Animation의 Method

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

Property Animation

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

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

Transition 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을 사용합니다.

Property Animation의 예

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

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

• 버튼들 위에 마우스를 올려 놓으면 버튼의 길이가 늘어난다.

• 버튼들 위의 마우스가 다른 곳으로 이동하면 버튼의 길이가 원상태가 됩니다.

• 위의 버튼을 클릭하면 오른 쪽의 구형태의 모양이 떨어지는 효과를 발생한다.

• 아래의 버튼을 클릭하면 오른 쪽의 구형태의 모양이 제자리로 돌아간다.

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

• Animation Target이 3개입니다.

  button 컴포넌트 2개, shape 컴포넌트 1개로 총 3개 입니다.

• 총 6개의 Property Animation Object가 필요합니다.

  2개의 button 컴포넌트의 길이가 늘어나는 효과에 대한 Animation 2개.

  2개의 button 컴포넌트의 길이가 줄어드는 효과에 대한 Animation 2개.

  shape의 떨어지는 이동효과에 대한 Animation 1개.

  shape의 제자리로 돌아가는 이동효과에 대한 Animation 1개.

• 그러나, 실제 Animation Object는 3개만 사용합니다.

  button 컴포넌트의 길이가 늘어나고 줄어드는 효과에 대한 Animation 1개.

  shape의 떨어지는 이동효과에 대한 Animation 1개.

  shape의 제자리로 돌아가는 이동효과에 대한 Animation 1개.

  즉, 하나의 Animation Object를 여러 개의 Animation Target에 사용할 수 있습니다.

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

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

• PropertyAnimation00는 Button의 길이를 조절하는데 사용합니다.

• PropertyAnimation01는 공모양의 Shape를 공처럼 떨어뜨리는데 사용합니다.

• PropertyAnimation02는 공모양의 Shape를 제자리로 위치시키는 데 사용하며, 5단계에서 동적으로 생성합니다.

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를 버튼 위에 올려 놓으면 버튼의 길이가 길어지고, 버튼 위에서 벗어나면 버튼의 길이가 원래 크기로 돌아갑니다.

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

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

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

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

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

Property Animation의 Property

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

Property Animation의 Method

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

Composite Animation

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

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

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

• Transition Animation1이 종료된 후에 Transition Animation 2가 시작됩니다.

• Property Animation1, Property Animation2와 Transition Animation 1은 동시에 시작합니다.

• Property Animation1이 종료된 이후에도 Property Animation2는 1초간 계속 실행합니다.

• Composite Animation은 시작 후 2초간 작동합니다.

Composite Animation의 예

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

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

• 발사버튼을 클릭하면 대포가 포탄을 발사합니다.

• 포탄은 3초간의 탄도 곡선으로 날아가서 목표에 떨어집니다.

• 포탄이 목표에 떨어지면 폭발합니다.

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의 화면입니다.

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

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

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

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

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

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

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

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

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

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

5. 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를 실행한 후의 화면입니다.

Composite Animation의 Property

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

Composite Animation의 Method

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

향상된 Animation 기능의 사용

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

자동 Trigger사용하기

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

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

여기서는 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을 연결하는 것을 알 수 있습니다.

User Interpolation만들기

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

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

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

• 함수명은 자유롭게 입력합니다.

• 함수의 argument인 info object는 3개의 property를 갖습니다.

• 계산된 결과 값은 info.progressvalue에 할당합니다.

  참고로, 여기서 사용한 식은 "Interpolation.linear"과 같은 효과를 갖습니다.

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

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

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

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

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

이 경우, 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번 왕복이동을 하게 됩니다.

그 밖에 Animation적용

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

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

• Frame Animation 적용 방법

• Form Animation 적용 방법