Animation 소개

애니메이션 기능은 데이터를 돋보이게 하거나 특정 기능을 강조하기 위해 사용합니다. 예를 들어 Edit 컴포넌트에 잘못된 값을 입력했을때 살짝 흔드는 효과를 추가하거나 데이터가 업데이트되는 것을 강조할 수 있습니다.

사용 예

화면에 표시되는 데이터를 강조하기 위해 카운터 효과를 내는 것도 애니메이션 기능을 활용하는 것입니다.

Animation 만들기

Animation 오브젝트는 넥사크로 스튜디오 툴바에 표시되지 않습니다. 스크립트에서 새로운 오브젝트를 생성해주어야 합니다. form 오브젝트의 onload 이벤트 함수 내에서 Animation 오브젝트를 추가한다면 다음과 같이 이벤트 함수를 작성합니다.

this.form_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var aniObj = new nexacro.Animation("Ani00", this);
	this.addChild("Ani00", aniObj);
	this.Ani00.set_loop(true);
}

화면에 보여지는 것이 아니기때문에 addChild 메소드 호출 후 show 메소드를 호출하지 않습니다.

어떤 형식으로 애니메이션 효과를 처리할지 지정할 수 있는 속성이 있습니다. Animation 오브젝트를 생성한 이후 원하는 속성을 지정할 수 있습니다.

this.Ani00.set_loop(true);
this.Ani00.set_direction("alternate");

애니메이션 효과를 적용할 대상을 지정해주어야 합니다. addTarget 메소드를 사용해 애니메이션 효과를 적용할 컴포넌트와 해당 컴포넌트의 어떤 속성을 변경할지 지정해줍니다. 예를 들어 Button 컴포넌트의 left 속성값을 변경해 컴포넌트를 오른쪽으로 이동시키면서 width 속성값을 변경해 크기를 변경시킬 수 있습니다.

this.Ani00.addTarget("AniItem00", this.Button00, "width:200, left:300");

addTarget 메소드가 정상적으로 실행되면 AnimationItem 오브젝트가 Animation 오브젝트 아래 추가됩니다.

원하는 애니메이션 효과의 형태와 대상을 지정한 다음에는 애니메이션 효과를 실행합니다. play 메소드를 사용해 애니메이션 효과를 실행합니다. loop 설정을 한 경우에는 애니메이션 효과를 멈추기 위해 stop 메소드나 pause 메소드를 사용할 수 있습니다.

this.Ani00.play();

크기와 위치 변경하기

addTarget 메소드 실행 시 props 파라미터로 입력할 수 있는 항목은 대상 컴포넌트에서 사용할 수 있는 모든 속성값입니다. 예제에서는 크기와 위치만 변경해봅니다.

예제

Button00, Button01 컴포넌트를 대상으로 애니메이션 효과를 적용합니다. [play] 버튼 클릭 시 애니메이션 효과가 실행되고 [pause] 버튼을 클릭하면 애니메이션 효과가 잠시 멈춥니다. [stop] 버튼을 클릭하면 초기 상태로 돌아갑니다.

sample_animation_01.xfdl

예제에서 사용한 핵심 기능

loop

애니메이션 효과의 반복 실행 여부를 지정합니다. 위치를 변경하도록 지정한 경우에는 direction 속성값을 "alternate"으로 지정해야 반복되는 효과를 볼 수 있습니다.

예제 구현 방법

Button 컴포넌트를 화면에 배치합니다. 상단에 배치하는 Button 컴포넌트의 text 속성값은 "play", "pause", "stop"으로 지정합니다.

Form 오브젝트의 onload 이벤트 함수 내에서 Animation 오브젝트를 생성하고 addTarget 메소드를 실행해 애니메이션 효과를 적용할 대상 컴포넌트를 지정합니다.

this.sample_animation_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var aniObj = new nexacro.Animation("Ani00", this);
	this.addChild("Ani00", aniObj);
	
	this.Ani00.set_loop(true);
	this.Ani00.set_direction("alternate");
	
	this.Ani00.addTarget("AniItem00", this.Button00, "width:200, left:300");
	this.Ani00.addTarget("AniItem01", this.Button01, "width:50, left:200");	
};

상단 버튼 클릭 시 애니메이션 효과를 제어하는 기능을 처리하도록 이벤트 함수를 작성합니다.

this.btnPlay_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Ani00.play();
};

this.btnPause__onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Ani00.pause();
};

this.btnStop__onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Ani00.stop();
};

QuickView(Ctrl + F6)로 실행한 후 상단 버튼을 클릭해 애니메이션 효과가 적용되는 것을 확인합니다.

숫자 카운터 효과 만들기

Animation 오브젝트 사용 예에서 설명한 숫자 카운터 효과를 만들어봅니다.

예제

[play] 버튼 클릭 시 카운터가 동작하고 [init] 버튼을 클릭하면 초기 상태로 돌아갑니다. Edit 컴포넌트에 카운터 최대값을 지정할 수 있습니다.

sample_animation_02.xfdl

예제에서 사용한 핵심 기능

easing

애니메이션 효과 처리 시 적용되는 Interpolation(선형보간법) 속성을 지정합니다. 예를 들어 1부터 100까지 속성값이 변경되는데 같은 속도로 카운터가 올라가는 것이 아니라 빠르기를 조정할 수 있습니다. default 값은 "easeoutelastic"인데 예제에서는 같은 속도로 처리될 수 있도록 "linear"로 지정했습니다.

duration

애니메이션 효과를 처리하는 시간을 지정합니다. dafault 값은 1000(1초)입니다. duration 속성값을 너무 짧게 지정하면 애니메이션 효과를 사용자가 느끼지 못할 수 있습니다.

onrun

애니메이션 효과를 처리하면서 발생하는 이벤트입니다. 일반적으로는 1초에 60번 발생하지만, 실행되는 환경에 따라 다를 수 있습니다. onupdate 이벤트와 비슷한데, onupdate 이벤트는 delay 속성값으로 지정된 시간에도 발생하지만 onrun 이벤트는 실제 애니메이션 효과가 동작하는 동안에만 발생합니다.

예제 구현 방법

Edit 컴포넌트와 Button 컴포넌트를 화면에 배치합니다. 상단에 배치하는 Button 컴포넌트의 text 속성값은 "play", "init"로 지정합니다. Static 컴포넌트를 배치하고 배경색(background)과 글자크기(font), 글자색(color) 속성을 지정합니다. 예제에서는 배경색은 "indigo", 글자색은 "white", 글자크기는 40으로 지정했습니다.

Form 오브젝트의 onload 이벤트 함수 내에서 Animation 오브젝트를 생성하고 addTarget 메소드를 실행해 애니메이션 효과를 적용할 대상 컴포넌트를 지정합니다. Animation 오브젝트의 easing 속성과 duration 속성값을 수정합니다. onrun 이벤트는 화면에 표시되는 숫자를 조정하기 위해 추가합니다.

this.sample_animation_02_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
    var aniObj = new nexacro.Animation("Ani00", this);
    this.addChild("Ani00", aniObj);
    
    this.Ani00.set_easing("linear");
	this.Ani00.set_duration("5000");
	
    this.Ani00.addTarget("AniItem00", this.Static00, "text:100");
	this.Ani00.setEventHandler("onrun", this.Ani00_onrun, this);
};

onrun 이벤트는 애니메이션 효과가 동작하는 동안 발생합니다. 숫자 관련 속성을 변경할때 발생하는 값이 정수가 아니기 때문에 onrun 이벤트 함수 내에서 값을 정수로 바꾸어주는 기능을 추가합니다.

this.Ani00_onrun = function(obj,e)
{
	this.Static00.set_text(nexacro.round(this.Static00.text));
};

버튼 클릭 시 애니메이션 효과를 시작하고 초기값으로 바꾸어주는 이벤트 함수를 작성합니다. Edit 컴포넌트에 입력된 값이 있는 경우에는 AnimationItem 오브젝트에 설정된 props 값을 다시 설정하고 play 메소드를 실행합니다.

this.btnPlay_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(this.Edit00.value > 0)
	{
		this.Ani00.items.AniItem00.props = "text:"+this.Edit00.value;
	}
    this.Ani00.play();
};

this.btnInit_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Static00.set_text(0);
};

QuickView(Ctrl + F6)로 실행한 후 상단 버튼을 클릭해 애니메이션 효과가 적용되는 것을 확인합니다.

easing 효과 만들기

컴포넌트가 움직이는 효과를 만들때 easing 속성값을 "linear"으로 지정하면 처음부터 끝까지 같은 속도로 애니메이션 효과를 처리합니다. 하지만 상황에 따라 같은 속도가 유지되는 것은 자연스럽지 못할 수 있습니다. 예를 들어 자동차가 움직이는 효과를 만든다고 할때 실제 자동차는 천천히 출발해서 속도를 올려서 일정 속도에 도달한 후 다시 멈추기 위해 속도를 줄입니다. 사용자에게 자연스럽게 전달하려면 이런 속도의 변화를 애니메이션 효과에 담을 수 있어야 합니다.

예제

Button00, Button01, Button02, Button03 컴포넌트를 대상으로 애니메이션 효과를 적용합니다. [play] 버튼 클릭 시 애니메이션 효과가 실행되고 [pause] 버튼을 클릭하면 애니메이션 효과가 잠시 멈춥니다. [stop] 버튼을 클릭하면 초기 상태로 돌아갑니다. 하단의 Radio 버튼을 선택하면 easing 속성값과 Button 컴포넌트의 텍스트를 변경합니다.

sample_animation_03.xfdl

예제에서 사용한 핵심 기능

easing

애니메이션 효과가 처리되는 속도를 지정합니다. easing 속성값을 지정하는 값은 "linear"을 제외하고 3가지로 구분할 수 있습니다. 가장 앞 부분에는 "ease"라는 문자열이 붙습니다. 그 다음에는 "In", "Out", "InOut" 3가지 중 하나의 문자열이 붙습니다. 두 개의 문자열을 합치면 "ease in"이라는 문자열이 되는데, 이 표현은 전통적인 애니메이션 업계에서 사용하는 용어입니다. 물체의 움직임이 서서히 시작해서 점점 빨라지는 것을 의미합니다. "ease out"은 반대로 빠르게 시작해서 점점 속도를 줄이는 것이지요. "slow in", "slow out"이라고 표현하기도 합니다. "ease in out"은 마치 자동차처럼 점점 속도를 올려서 중간 지점에서 가장 빠른 속도를 내고 중간 지점을 지나면서 점점 느려집니다. 마지막에 붙는 문자열은 속도의 세세한 변화 시점을 정하는 것입니다.

예제 구현 방법

Button 컴포넌트를 화면에 배치합니다. 상단에 배치하는 Button 컴포넌트의 text 속성값은 "play", "pause", "stop"으로 지정합니다. Button 컴포넌트의 애니메이션 효과가 시작하는 지점과 끝나는 지점에 Static 컴포넌트를 길게 배치하고 background 속성으로 배경색을 지정합니다. "easeInBack"이나 "easeInElastic"으로 easing 속성값을 지정하는 경우에는 해당 경계를 벗어나는 것을 확인할 수 있습니다.

화면 하단에 radion 컴포넌트를 배치하고 innerdataset을 아래와 같이 지정합니다.

주의할 점은 codecolumn 항목에 들어가는 문자열은 구분자(,)와 각 속성값 사이에 공백문자가 들어가지 않도록 합니다. 아이템 변경 시 value값을 배열로 바꾸어 사용하는데 공백문자가 있으면 공백문자까지 배열값으로 인식되어질 수 있습니다.

linear,easeInSine,easeOutSine,easeInoutSine
easeInOutSine,easeInOutQuad,easeInOutCubic,easeInOutQuart
easeInOutSine,easeInOutQuint,easeInOutExpo,easeInOutCirc
easeInOutSine,easeInOutBack,easeInOutElastic,easeInOutBounce

4개의 easing 속성값을 비교해야 하기 때문에 Animation 오브젝트를 4개 생성해서 사용합니다.

this.sample_animation_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	this.initAnimation("Ani00", "linear", this.Button00);
	this.initAnimation("Ani01", "easeInSine", this.Button01);
	this.initAnimation("Ani02", "easeOutSine", this.Button02);
	this.initAnimation("Ani03", "easeInOutSine", this.Button03);
};

Animation 오브젝트 id값과 easing 속성값, 버튼 오브젝트를 받아서 Animation 오브젝트의 상태를 지정합니다. 최초 실행 시에는 Animation 오브젝트를 생성하고 이후에는 easing 속성값과 Button 컴포넌트의 text 속성만 변경합니다.

this.initAnimation = function(sId, sEasing, objButton)
{
    if(!this.all[sId])
	{
		var aniObj = new nexacro.Animation(sId, this);
		this.addChild(sId, aniObj);
		this.all[sId].addTarget("AniItem00", objButton, "left:300");		
		this.all[sId].set_direction("alternate");		
		this.all[sId].set_duration(3000);
		this.all[sId].set_direction("alternate");
		this.all[sId].set_loop(true);	
	}
	this.all[sId].set_easing(sEasing);
	objButton.set_text(sEasing);
}

상단 버튼 클릭 시 애니메이션 효과를 제어하는 기능을 처리하도록 이벤트 함수를 작성합니다.

this.btnPlay_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Ani00.play();
};

this.btnPause__onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Ani00.pause();
};

this.btnStop__onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Ani00.stop();
};

아이템을 변경했을때 변경된 상태를 Animation 오브젝트에 전달합니다. 선택된 아이템의 value값을 split 메소드를 사용해 배열로 변경하고 생성된 값을 initAnimation 함수에 전달합니다.

this.Radio00_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	var arr = e.postvalue.toString().split(",");
	this.initAnimation("Ani00", arr[0], this.Button00);
	this.initAnimation("Ani01", arr[1], this.Button01);
	this.initAnimation("Ani02", arr[2], this.Button02);
	this.initAnimation("Ani03", arr[3], this.Button03);
};

QuickView(Ctrl + F6)로 실행한 후 상단 버튼을 클릭해 애니메이션 효과가 적용되는 것을 확인합니다.

순서대로 애니메이션 처리하기

oncomplete 이벤트를 사용하면 애니메이션이 종료되는 시점을 체크할 수 있습니다. 두 가지 Animation 오브젝트를 생성하고 순서대로 처리하는 빙식을 살펴봅니다.

예제

Button00, Button01 컴포넌트를 대상으로 애니메이션 효과를 적용합니다. [play] 버튼 클릭 시 Button00 컴포넌트에 적용된 애니메이션 효과가 실행되고 애니메이션 효과가 끝나면 Button01 컴포넌트에 적용된 애니메이션 효과가 실행됩니다.

sample_animation_04.xfdl

예제에서 사용한 핵심 기능

oncomplete

duration 속성값으로 지정된 시간이 지나면 발생하는 이벤트입니다. loop 속성값이 true인 경우에 loopcount 속성값을 지정하지 않으면 애니메이션이 멈추지 않기 때문에 oncomplete 이벤트가 발생하지 않습니다. 예제에서는 loopcount 속성값을 2로 지정해서 첫번째 애니메이션 효과가 두 번 동작하고 다음 애니메이션 효과가 동작합니다.

예제 구현 방법

Button 컴포넌트를 화면에 배치합니다. 상단에 배치하는 Button 컴포넌트의 text 속성값은 "play", "init"로 지정합니다.

Form 오브젝트의 onload 이벤트 함수 내에서 Animation 오브젝트를 생성하고 addTarget 메소드를 실행해 애니메이션 효과를 적용할 대상 컴포넌트를 지정합니다. 첫번째 Animation 오브젝트는 loop, loopcount 속성값을 지정하고 oncomplete 이벤트를 추가합니다.

this.sample_animation_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
    var aniObj00 = new nexacro.Animation("Ani00", this);
    this.addChild("Ani00", aniObj00);
    this.Ani00.addTarget("AniItem00", this.Button00, "left:300");
	this.Ani00.setEventHandler("oncomplete", this.Ani00_oncomplete, this);
	this.Ani00.set_loop(true);
	this.Ani00.set_loopcount(2);
	
    var aniObj01 = new nexacro.Animation("Ani01", this);
    this.addChild("Ani01", aniObj01);
    this.Ani01.addTarget("AniItem00", this.Button01, "left:300");   
};

상단 버튼 클릭 시 애니메이션 효과를 제어하는 기능을 처리하도록 이벤트 함수를 작성합니다.

this.btnPlay_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
    this.Ani00.play();
};

this.btnInit_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Button00.set_left(20);
	this.Button01.set_left(20);
};

첫번째 애니메이션 효과가 끝났을때 두번째 애니메이션 play 메소드를 실행합니다.

this.Ani00_oncomplete = function(obj:nexacro.Animation,e:nexacro.AnimationEventInfo)
{
	this.Ani01.play();
};

QuickView(Ctrl + F6)로 실행한 후 상단 버튼을 클릭해 애니메이션 효과가 적용되는 것을 확인합니다.

펼쳐지는 메뉴 효과 만들기

컨텐츠 화면을 넓게 사용하는 경우 메뉴 영역을 필요할때만 펼치는 경우가 있습니다. 애니메이션 효과를 적용해 서서히 펼쳐지고 접히는 메뉴 영역을 만들어봅니다.

예제

버튼을 클릭하면 메뉴가 펼쳐지고 다시 버튼을 클릭하면 메뉴가 서서히 사라집니다.

sample_animation_05.xfdl

예제에서 사용한 핵심 기능

oncomplete

duration 속성값으로 지정된 시간이 지나면 발생하는 이벤트입니다. loop 속성값이 true인 경우에 loopcount 속성값을 지정하지 않으면 애니메이션이 멈추지 않기 때문에 oncomplete 이벤트가 발생하지 않습니다. 예제에서는 loopcount 속성값을 2로 지정해서 첫번째 애니메이션 효과가 두 번 동작하고 다음 애니메이션 효과가 동작합니다.

예제 구현 방법

Animation 오브젝트를 생성하고 Target과 이벤트리스너를 등록합니다. easing 속성값은 완만한 변화를 보여주는 "easeInSine"으로 등록합니다.

this.sample_animation_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
    var aniObj00 = new nexacro.Animation("Ani00", this);
    this.addChild("Ani00", aniObj00);
	this.Ani00.addTarget("AniItem00", this.btnPlay, "width:20, left:329");
	this.Ani00.addTarget("AniItem01", this.Div00, "width:300, left:30");
	this.Ani00.setEventHandler("oncomplete", this.Ani00_oncomplete, this);
	this.Ani00.set_easing("easeInSine");

    var aniObj01 = new nexacro.Animation("Ani01", this);
    this.addChild("Ani01", aniObj01);
	this.Ani01.addTarget("AniItem00", this.btnPlay, "width:20, left:30");
	this.Ani01.addTarget("AniItem01", this.Div00, "width:1, left:30");
	this.Ani01.setEventHandler("oncomplete", this.Ani01_oncomplete, this);
	this.Ani01.set_easing("easeInSine");
};

this.Ani00_oncomplete = function(obj:nexacro.Animation,e:nexacro.AnimationEventInfo)
{  
  this.btnPlay.set_text("◀");
};

this.Ani01_oncomplete = function(obj:nexacro.Animation,e:nexacro.AnimationEventInfo)
{  
  this.btnPlay.set_text("▶");
};

this.btnPlay_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if( obj.text == "▶")
	{		
		this.Ani00.play();
	} else {
		this.Ani01.play();
	}
};