개요

아이템으로 등록된 컴포넌트에 애니메이션 효과를 적용하는 오브젝트입니다.

지원 환경

- Animation 오브젝트는 디자인 시 생성할 수 없습니다.
   스크립트에서 동적 생성 후 addChild() 로 추가하여 사용하여야 합니다.
   Animation 오브젝트를 동적으로 생성할 때는 "nexacro." 구문을 반드시 사용하여야 합니다.

- Animation 오브젝트에 addTarget() 메소드로 AnimationItem 오브젝트를 여러개 등록할 수 있습니다.

- Animation 오브젝트 실행 시 아이템으로 등록된 컴포넌트에 애니메이션 효과를 동시에 적용합니다.

생성자

Animation( strName, objParent )

// Create Object  
var objAni = new nexacro.Animation("Animation00", this);  

// Add Object to Parent Form  
this.addChild( "Animation00", objAni );

// Set Object 
objAni.duration = 1000;
objAni.easing = "linear";
objAni.setEventHandler( "onbegin", this.Animation00_onbegin, this);

// Add Item to Object
objAni.addTarget( "AniItem00", this.Button00, "left:600" );

// Play Object
objAni.play();
 
// Remove Object form Parent
var objAniItem = objAni.removeTarget( "AniItem00" );
this.removeChild( "Animation00" );
 
// Destroy Object
objAniItem.destroy();
objAni.destroy();
objAniItem = null;
objAni = null;

속성

beziercurve

easing 속성값이 "custom" 일 때 애니메이션 효과에 적용될 Bezier 곡선을 직접 설정하는 속성입니다.

지원 환경

속성 타입

문법

Animation.beziercurve[= strBezier]

문법 설정

this.Animation00.beziercurve = "0, .76, 1, -0.79";

참고

- easing 속성값이 "custom" 인 경우만 적용되는 속성입니다.

- Bezier 곡선의 시작점은 "0, 0", 끝점은 "1, 1" 로 정의됩니다.

delay

애니메이션 효과의 시작이 지연되는 시간을 설정하는 속성입니다.

지원 환경

속성 타입

문법

Animation.delay[= nDelay]

문법 설정

this.Animation00.delay = 5000;

참고

- delay 속성값을 설정하지 않으면 0 으로 적용됩니다.

- Animation 오브젝트가 AnimationTimeline 의 아이템으로 실행될 경우
   "offset 속성값 + delay 속성값" 만큼 지연된 후 애니메이션 효과가 시작됩니다.

direction

애니메이션 효과가 진행되는 방향을 설정하는 속성입니다.

지원 환경

속성 타입

문법

Animation.direction[= enumDirect]

문법 설정

enumDirect ::= 'normal' | 'reverse' | 'alternate'

this.Animation00.direction = "alternate";

참고

- direction 속성값을 설정하지 않으면 "normal" 로 적용됩니다.

- direction 속성값이 "alternate" 일 때 loop 속성값이 false 이면 애니메이션 효과가 왕복되지 않고 반만 진행됩니다.
   1회 왕복되는 효과를 적용하려면 loop 속성값을 true 로 설정하고, loopcount 속성값을 2 로 설정하여야 합니다.

duration

애니메이션 효과가 실행되는 시간을 설정하는 속성입니다.

지원 환경

속성 타입

문법

Animation.duration[= nDuration]

문법 설정

this.Animation00.duration = 3000;

참고

- duration 속성값을 설정하지 않으면 1000 으로 적용됩니다.

- duration 속성에 설정한 시간동안 AnimationItem 으로 등록된 컴포넌트에 애니메이션 효과로 적용합니다.

활용 예제

• 숫자 카운터 효과 만들기

easing

애니메이션 효과에 적용될 Interpolation 함수를 설정하는 속성입니다.

지원 환경

속성 타입

문법

Animation.easing[= enumEasing]

문법 설정

<enumEasing> ::= 'linear' 
                        | 'easeinsine' | 'easeoutsine' | 'easeinoutsine' | 'easeinquad' | 'easeoutquad' | 'easeinoutquad'
                        | 'easeincubic' | 'easeoutcubic' | 'easeinoutcubic' | 'easeinquart' | 'easeoutquart' | 'easeinoutquart'
                        | 'easeinquint' | 'easeoutquint'| 'easeinoutquint' | 'easeinexpo' | 'easeoutexpo' | 'easeinoutexpo'
                        | 'easeincirc' | 'easeoutcirc'  | 'easeinoutcirc' | 'easeinback' | 'easeoutback' | 'easeinoutback'
                        | 'easeinelastic' | 'easeoutelastic' | 'easeinoutelastic' | 'easeinbounce' | 'easeoutbounce' | 'easeinoutbounce'
                        | 'custom'

this.Animation00.easing = "linear"; 
this.Animation00.easing = "easeoutquad"; 
this.Animation00.easing = "easeinoutquad"; 
this.Animation00.easing = "custom";

참고

- easing 속성값을 설정하지 않으면 "easeoutelastic" 값으로 적용됩니다.

- easing 속성값은 "ease" + "in | out | inout" + "sine | quad | cubic | quart | quint | expo | circ | back | elastic | bounce" 조합으로 설정할 수 있습니다.

- <enumEasing> 값에 따른 Interpolation 함수 효과는 "여기"를 참조하세요.

활용 예제

• 숫자 카운터 효과 만들기

• easing 효과 만들기

• 펼쳐지는 메뉴 효과 만들기

elasticity

애니메이션 효과에 적용될 탄력도를 설정하는 속성입니다.

지원 환경

속성 타입

문법

Animation.elasticity[= nElasticity]

문법 설정

this.Animation00.elasticity = 1000;

참고

- elasticity 속성값을 설정하지 않으면 0 으로 적용됩니다.

- elasticity 속성값을 크게 설정할 수록 easing 속성에 설정한 Interpolation 함수의 변동폭이 커집니다.

id

Animation 오브젝트의 고유 식별자를 설정하는 속성입니다.

지원 환경

속성 타입

문법

Animation.id

문법 설정

var objAni = new nexacro.Animation( "Animation00", this );

참고

- new 연산자로 Animation 오브젝트를 생성할 때 id 속성값과 name 속성값이 동일하게 설정됩니다.

- 일반적으로 addChild(), insertChild() 메소드로 오브젝트를 자식으로 등록할 때 설정하는 값과 동일하게 설정합니다.

items

Animation 오브젝트에 등록된 모든 AnimationItem 오브젝트를 갖고 있는 읽기전용 속성입니다.

지원 환경

속성 타입

문법

Animation.items

문법 설정

var arrAniItem = this.Animation00.items[0];

참고

- items 속성은 Collection 접근방식을 사용할 수 있습니다.
   this.Animation00.items[0], this.Animation00.items["AnimationItem00"], this.Animation00.items.length 등의 방법을 사용합니다.

loop

애니메이션 효과의 반복 여부를 설정하는 속성입니다.

지원 환경

속성 타입

문법

Animation.loop[= bLoop]

문법 설정

bLoop ::= 'true' | 'false'

this.Animation00.loop = true;

참고

- loop 속성값을 설정하지 않으면 false 로 적용됩니다.

- direction 속성값이 "alternate" 일 때 loop 속성값이 false 이면 애니메이션 효과가 왕복되지 않고 반만 진행됩니다.
   1회 왕복되는 효과를 적용하려면 loop 속성값을 true 로 설정하고, loopcount 속성값을 2 로 설정하여야 합니다.

- Animation 오브젝트가 AnimationTimeline 오브젝트의 아이템으로 등록될 경우 항상 false 로 적용됩니다.

활용 예제

• 크기와 위치 변경하기

loopcount

loop 속성값이 true 일 때 애니메이션 효과가 반복되는 횟수를 설정하는 속성입니다.

지원 환경

속성 타입

문법

Animation.loopcount[= nLoopCnt]

문법 설정

this.Animation00.loopcount = 1;

참고

- loopcount 속성값을 설정하지 않으면 undefined 로 적용됩니다.

name

Animation 오브젝트의 이름을 설정하는 속성입니다.

지원 환경

속성 타입

문법

Animation.name

문법 설정

var objAni = new nexacro.Animation( "Animation00", this );

참고

- new 연산자로 Animation 오브젝트를 생성할 때 id 속성값과 name 속성값이 동일하게 설정됩니다.

- 일반적으로 addChild(), insertChild() 메소드로 오브젝트를 자식으로 등록할 때 설정하는 값과 동일하게 설정합니다.

parent

Animation 의 부모 오브젝트를 갖는 읽기전용 속성입니다.

지원 환경

속성 타입

문법

Animation.parent

참고

- 일반적으로 addChild() 메소드를 사용하여 Animation 를 추가한 오브젝트가 parent 속성에 설정됩니다.

- Animation 가 어디에도 속해있지 않거나 부모 오브젝트로부터 제거되면 null 값을 갖습니다.

메서드

addTarget

애니메이션 효과가 적용될 대상 컴포넌트를 Animation 오브젝트에 아이템으로 추가하는 메소드입니다.

지원 환경

문법

Animation.addTarget( strID, objComp, strProps );

파라미터

this.Animation00.addTarget( "AnimationItem00", this.Button00, "left:[100,600]" );

반환

참고

- addTarget() 메소드가 정상적으로 실행되면 items 속성에 AnimationItem 오브젝트가 아이템으로 추가됩니다.

destroy

스크립트에서 동적으로 생성한 Animation 을(를) 삭제하는 메소드입니다.

지원 환경

문법

Animation.destroy()

반환

참고

- 동적으로 생성한 Animation 을(를) 완전히 삭제하기 위해서는 destroy() 메소드를 호출해야 합니다.

pause

진행중인 애니메이션 효과를 일시 중지하는 메소드입니다.

지원 환경

문법

Animation.pause()

파라미터

this.Animation00.pause();

반환

참고

- 일시 중지된 상태에서 Animation 오브젝트의 속성값을 변경해도 반영되지 않습니다.
   애니메이션 효과가 종료되거나 stop() 메소드를 실행하여야 변경된 속성값이 반영됩니다.

- 일시 중지된 애니메이션 효과는 play() 메소드를 실행하여 다시 진행시킬 수 있습니다.

- 일시 중지된 애니메이션 효과를 진행되던 방향의 반대로 진행하려면 reverse() 메소드 실행 후 play() 메소드를 실행하여야 합니다.

play

애니메이션 효과를 시작하는 메소드입니다.

지원 환경

문법

Animation.play()

파라미터

this.Animation00.play();

반환

참고

- 애니메이션 효과는 대상 컴포넌트의 속성값을 실제로 변경시키며 진행됩니다.
   따라서, 애니메이션 효과가 종료되면 변경된 속성값이 유지됩니다.

- 애니메이션 효과가 진행되는 중에 play() 메소드를 실행하면 애니메이션 효과가 처음부터 다시 실행됩니다.

- 애니메이션 효과를 최초 실행 시 Animation 오브젝트의 direction 속성값에 따라 실행되는 방향이 결정됩니다.
   reverse() 메소드 실행 시 애니메이션 진행방향이 변경됩니다.

- pause() 메소드에 의해 일시 중지된 애니메이션 효과는 play() 메소드를 실행하여 다시 진행시킬 수 있습니다.

- delay 속성값이 설정되어 있으면 설정된 시간만큼 지연된 후 애니메이션 효과가 시작됩니다.

활용 예제

• 펼쳐지는 메뉴 효과 만들기

removeTarget

Animation 오브젝트에 아이템으로 추가된 AnimationItem 오브젝트를 제거하는 메소드입니다.

지원 환경

문법

Animation.removeTarget( strID );

파라미터

this.Animation00.removeTarget( "AnimationItem00" );

반환

참고

- removeTarget() 메소드가 정상적으로 실행되면 items 속성에서 AnimationItem 오브젝트가 제거됩니다.

reverse

애니메이션 효과의 방향을 반대로 변경하는 메소드입니다.

지원 환경

문법

Animation.reverse()

파라미터

this.Animation00.reverse()

반환

참고

- reverse() 메소드는 play() 메소드가 한번 이상 수행되어 애니메이션 효과가 실행된 방향의 정보가 있을 때만 사용할 수 있습니다.

- 애니메이션 효과가 진행중일 때 reverse() 메소드를 실행하면 애니메이션 효과의 방향이 즉시 변경됩니다.

- 애니메이션 효과가 진행중이 아닐 때 reverse() 메소드를 실행하면 진행되는 방향의 정보만 변경됩니다.
   따라서 변경된 방향으로 애니메이션 효과를 실행하려면 play() 메소드를 사용하여야 합니다.

seek

애니메이션 효과의 진행위치를 특정 시간으로 이동하는 메소드입니다.

지원 환경

문법

Animation.seek( nMSecond )

파라미터

this.Animation00.seek( 1500 )

반환

참고

- seek() 메소드 수행 시 애니메이션 효과의 진행위치가 즉시 변경됩니다.

stop

진행중인 애니메이션 효과를 중지하는 메소드입니다.

지원 환경

문법

Animation.stop()

파라미터

this.Animation00.stop()

반환

참고

- 애니메이션 효과가 진행중일 때 stop() 메소드를 실행하면 대상 컴포넌트는 애니메이션 효과가 진행되기 전 상태로 돌아갑니다.
   애니메이션 효과가 완료된 후 stop() 메소드를 실행하면 대상 컴포넌트는 최종 상태를 유지합니다.

- 애니메이션 효과가 진행중일 때 Animation 오브젝트의 속성값을 변경해도 반영되지 않습니다.
   애니메이션 효과가 종료되거나 stop() 메소드를 실행하여야 변경된 속성값이 반영됩니다.

이벤트

onbegin

애니메이션 효과가 시작됐을 때 발생하는 이벤트입니다.

지원 환경

문법

onbegin(obj:nexacro.Animation,e:nexacro.AnimationEventInfo);

파라미터

참고

- 실제 애니메이션 효과가 시작되기 전에 발생하는 이벤트입니다.
   delay 속성값이 설정되어 있다면 해당 값만큼 지연 된 후 이벤트가 발생합니다.

oncomplete

애니메이션 효과가 종료됐을 때 발생하는 이벤트입니다.

지원 환경

문법

oncomplete(obj:nexacro.Animation,e:nexacro.AnimationEventInfo);

파라미터

활용 예제

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

onrun

애니메이션 효과가 실행중일 때 Tick 마다 발생하는 이벤트입니다.

지원 환경

문법

onrun(obj:nexacro.Animation,e:nexacro.AnimationEventInfo);

파라미터

참고

- delay 속성값에 의해 애니메이션 효과가 지연중일 때는 이벤트가 발생하지 않습니다.
   onbegin 이벤트가 발생된 후 부터 발생하는 이벤트입니다.

- Tick 은 일반적으로 초당 60 회 발생하지만 W3C 권장 사항에 따라 대부분의 웹 브라우저에서 표시 새로고침 빈도에 따라 발생합니다.
   Tick 발생은 다른 작업에 의해 일시 중지될 수 있으므로 항상 일정한 간격으로 발생하지 않습니다.

활용 예제

• 숫자 카운터 효과 만들기

onupdate

play() 메소드가 실행되면 애니메이션 효과가 종료될 때까지 Tick 마다 발생하는 이벤트입니다.

지원 환경

문법

onupdate(obj:nexacro.Animation,e:nexacro.AnimationEventInfo);

파라미터

참고

- delay 속성값에 의해 애니메이션 효과가 지연중일 때도 이벤트가 발생합니다.
   play() 메소드가 실행되면 즉시 발생하는 이벤트입니다.

- Tick 은 일반적으로 초당 60 회 발생하지만 W3C 권장 사항에 따라 대부분의 웹 브라우저에서 표시 새로고침 빈도에 따라 발생합니다.
   Tick 발생은 다른 작업에 의해 일시 중지될 수 있으므로 항상 일정한 간격으로 발생하지 않습니다.