AnimationTimeline

Animation 오브젝트는 애니메이션에서 하나의 컷을 만드는 것이라면 AnimationTimeline 오브젝트는 만들어진 컷을 연결하는 역할을 담당합니다. Animation 오브젝트가 많지 않다면 oncomplete 이벤트를 사용해 애니메이션의 동작 시점을 지정할 수 있지만, Animation 오브젝트가 많아진다면 이벤트 함수 내에서 관리하는것이 불편할 수 있습니다. AnimationTimeline 오브젝트를 사용하면 애니메이션 효과의 적용 시점을 좀 더 쉽게 관리할 수 있습니다.

사용 예

프리젠테이션 도구에서 애니메이션 적용 시 "이전 효과 다음에 시작(Start After Previous)"를 옵션으로 선택하는 것도 타임라인을 관리하는 하나의 방법입니다.

AnimationTimeline 만들기

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

this.form_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var anitimeObj = new nexacro.AnimationTimeline("Anitime00", this);
	this.addChild("Anitime00", anitimeObj);
}

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

애니메이션 효과를 적용할 Animation 오브젝트를 추가해주어야 합니다. addTarget 메소드를 사용해 추가합니다.

this.Anitime00.addTarget("AniTimeItem00", aniObj00);

AnimationTimeline 오브젝트를 사용하는 경우에는 개별 Animation 오브젝트의 play 메소드를 사용하지 않고 AnimationTimeline 오브젝트의 play 메소드를 사용합니다.

this.Anitime00.play();

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

Animation 오브젝트에서는 oncomplete 이벤트를 사용했는데, 이번에는 AnimationTimeline 오브젝트를 사용해 애니메이션을 순서대로 처리합니다.

예제

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

sample_animationtimeline_01.xfdl

예제에서 사용한 핵심 기능

addTarget

Animation 오브젝트의 메소드 이름과 같지만, AnimationTimeline 오브젝트의 addTarget 메소드는 대상 Animation 오브젝트만 지정하고 props 속성값을 지정하지 않습니다. 세번째 파라미터로 nOffset를 지정할 수 있는데, 지정하지 않은 경우에는 0으로 처리합니다.

예제 구현 방법

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

Form 오브젝트의 onload 이벤트 함수 내에서 AnimationTimeline, Animation 오브젝트를 생성하고 addTarget 메소드를 실행해 두 개의 Animation 오브젝트를 대상으로 지정합니다.

this.sample_animationtimeline_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var anitimeObj = new nexacro.AnimationTimeline("Anitime00", this);
	this.addChild("Anitime00", anitimeObj);
	
    var aniObj00 = new nexacro.Animation("Ani00", this);
    this.addChild("Ani00", aniObj00);
    this.Ani00.addTarget("AniItem00", this.Button00, "left:300");
	
    var aniObj01 = new nexacro.Animation("Ani01", this);
    this.addChild("Ani01", aniObj01);
    this.Ani01.addTarget("AniItem00", this.Button01, "left:300");  
	
	this.Anitime00.addTarget("AniTimeItem00", aniObj00);
	this.Anitime00.addTarget("AniTimeItem01", aniObj01);
};

상단 버튼 클릭 시 애니메이션 효과를 제어하는 기능을 처리하도록 이벤트 함수를 작성합니다. Animation 오브젝트의 play 메소드가 아니라 AnimationTimeline 오브젝트의 play 메소드를 실행합니다.

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

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

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