45.AnimationTimeline

Edit

45.1AnimationTimeline

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

AnimationTimeline 오브젝트는 17.0.0.700 버전부터 지원합니다.

45.1.1사용 예

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

그림 45-1GIF

45.1.2AnimationTimeline 만들기

1

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 메소드를 호출하지 않습니다.

2

Animation 오브젝트 추가하기

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

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

3

애니메이션 효과 실행하기

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

this.Anitime00.play();

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

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

45.2.1예제

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

sample_animationtimeline_01.xfdl

45.2.2예제에서 사용한 핵심 기능

addTarget

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

45.2.3예제 구현 방법

1

화면 구성하기

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

2

AnimationTimeline, Animation 오브젝트 생성하기

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);
};

3

애니메이션 효과 실행, 초기화 처리하기

상단 버튼 클릭 시 애니메이션 효과를 제어하는 기능을 처리하도록 이벤트 함수를 작성합니다. 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);
};

4

QuickView로 확인하기

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