Jaguar.js

Class: AnimationTimeline

collie. AnimationTimeline

new collie.AnimationTimeline(aTimeline, htOption)

timer/AnimationTimeline.js, line 31

타임라인 기반으로 애니메이션을 실행시킴 튜토리얼 보기

Name Type Description
aTimeline Array

타임라인 배열
htOption Object optional
Name Type Default Description
loop Object 1 optional

반복 횟수, 0일 경우 무한 반복 한다
See:
Examples
// 생성과 동시에 타임라인을 정의
collie.Timer.timeline([
     [0, "delay", function () {}, 1000],
     [10, "transition", function () {}, 1000, { from:1, to:1 }],
]);
// 생성 후 타임라인을 정의
var timeline = collie.Timer.timeline();
timeline.add(0, "delay", function () {}, 1000);
timeline.add(10, "transition", function () {}, 1000, { from:1, to:1 });
// 타임라인 액션을 삭제
var timeline = collie.Timer.timeline();
var action = timeline.add(0, "delay", function () {}, 1000);
timeline.remove(10); // 10ms에 실행되는 모든 액션을 삭제
timeline.remove(10, action); // action만 삭제

Extends

Methods

add(nStartTime, 애니메이션, fCallback, nDuration, htOption){collie.Animation}

timer/AnimationTimeline.js, line 70

타임라인에 애니메이션을 추가

Name Type Description
nStartTime Number

시작 시간(ms)
애니메이션 String | collie.Animation

이름이나 애니메이션 객체를 지정한다.
fCallback Function | Object

각 애니메이션에 쓰이는 인자, queue 애니메이션일 경우 첫 번째 안자가 htOption이 된다
nDuration Number

각 애니메이션에 쓰이는 인자
htOption Object

각 애니메이션에 쓰이는 인자
Returns:
애니메이션
Example
var timeline = collie.Timer.timeline();


// queue를 사용하는 방법
var queue = timeline.add(0, "queue");
queue.cycle(item, 1000, { from:0, to:9 });


// 직접 Animation 객체를 생성
timeline.add(100, new collie.AnimationCycle(item, 1000, { from:0, to:9 }));

inherited attach(vEvent, fHandler){collie.Component}

Component.js, line 142

이벤트 핸들러 추가

Name Type Description
vEvent Object | String
fHandler Function
Returns:
체이닝 지원

inherited complete()

timer/Animation.js, line 227

애니메이션이 완료 됐을 때 실행

inherited detach(vEvent, fHandler)

Component.js, line 176

이벤트 핸들러를 해제한다

Name Type Description
vEvent Object | String
fHandler Function

값이 없을 경우 이 이벤트에 할당된 전체 핸들러를 해제한다

inherited detachAll(sName)

Component.js, line 208

모든 이벤트 핸들러를 해제

Name Type Description
sName String

이벤트 이름, 값이 없으면 이 컴포넌트에 할당된 모든 이벤트를 해제한다

inherited fireEvent(sName, oEvent){Boolean}

Component.js, line 111

이벤트 발생

Name Type Description
sName String
oEvent Object
Returns:
발생 중 collie.ComponentEvent의 stop 메소드가 실행될 경우 false를 반환한다

inherited get(sName){Variables}

Component.js, line 65

DisplayObject와 Layer의 서로 다른 인터페이스를 맞추기 위한 임시 메서드

Name Type Description
sName String
See:

getAnimation(nStartTime){Array|Boolean}

timer/AnimationTimeline.js, line 191

등록된 애니메이션 인스턴스를 반환한다

Name Type Description
nStartTime Number

시작 시간(ms)
Returns:
애니메이션이 없으면 false를 반환, 반환 형식은 항상 배열임

getCycle(){Number}

timer/AnimationTimeline.js, line 208

현재까지 반복된 횟수

inherited getDuration(){Number}

timer/Animation.js, line 89

Duration을 반환

getRunningTime(){Number}

timer/AnimationTimeline.js, line 200

현재까지 진행된 시간을 반환

Returns:
진행이 안된 상태면 0을 반환

inherited isPlaying(){Boolean}

timer/Animation.js, line 220

타이머가 진행 중인지 여부를 반환

Returns:
실행 중

inherited option(vName, vValue, bNotOverwrite)

Component.js, line 27

컴포넌트의 옵션을 설정한다.

Name Type Description
vName Object | String

옵션 이름이나 여러 옵션을 설정할 수 있는 객체를 넣을 수 있다.
vValue Variables optional

옵션 값, 값이 없다면 해당 옵션 값을 반환한다.
bNotOverwrite Boolean optional

이 값이 true면 기존에 값이 있을 경우 덮이 씌우지 않는다
Example
component.option({
 a : 1,
 b : true
});


component.option("a", 1);
component.option("a"); // return 1

inherited optionSetter(sName, fSetter)

Component.js, line 100

옵션 값이 설정될 때 실행될 함수를 지정한다. Setter는 한 속성 당 한 개의 함수만 설정할 수 있다.

Name Type Description
sName String
fSetter Function

inherited pause()

timer/Animation.js, line 176

애니메이션을 일시정지

Example
// pause/start
var timer = collie.Timer.repeat(function () {}, 1000);
timer.pause();
timer.start();

remove(nStartTime, oTimer)

timer/AnimationTimeline.js, line 131

등록된 타임라인을 제거한다

Name Type Description
nStartTime Number

시작 시간(ms)
oTimer collie.Animation

지울 타이머, 값이 없으면 해당 시간대 전부를 지움

reset()

timer/AnimationTimeline.js, line 215

값을 초기화

run(nCurrentFrame, nFrameDuration)

timer/AnimationTimeline.js, line 230

애니메이션을 실행

Name Type Description
nCurrentFrame Number optional

현재 렌더러 프레임, 값이 없으면 자동으로 현재 렌더러 프레임을 가져 온다
nFrameDuration Number optional

진행된 프레임 시간(ms)

inherited set(sName, vValue, bNotOverwrite){Object}

Component.js, line 78

DisplayObject와 Layer의 서로 다른 인터페이스를 맞추기 위한 임시 메서드

Name Type Description
sName String
vValue Variables
bNotOverwrite Boolean optional
See:
Returns:
method chaining

inherited setDuration(nDuration)

timer/Animation.js, line 80

Duration을 설정

Name Type Description
nDuration Number | String

실행 시간, 지연 시간 설정 (ms)

inherited start()

timer/Animation.js, line 197

정지 상태인 타이머를 다시 실행

inherited stop(bSkipEvent)

timer/Animation.js, line 147

애니메이션을 정지

Name Type Description
bSkipEvent Boolean

이벤트를 발생하지 않는다
Example
// stop/start
var timer = collie.Timer.repeat(function () {}, 1000);
timer.stop();
timer.start();

inherited unset(sKey)

Component.js, line 88

옵션을 제거한다

Name Type Description
sKey String

Events

complete

timer/AnimationTimeline.js, line 288

계획된 모든 애니메이션과 반복 횟수가 끝나면 발생. loop=0으로 설정하면 발생하지 않는다.

Name Type Description
oEvent Object

기본 컴포넌트 이벤트 객체

end

timer/AnimationTimeline.js, line 296

loop가 있을 경우 모든 타임라인 액션이 한 번 끝났을 때 발생

Name Type Description
oEvent Object

기본 컴포넌트 이벤트 객체

inherited pause

timer/Animation.js, line 180

타이머를 일시 정지할 때 발생

Name Type Description
oEvent Object

기본 컴포넌트 이벤트 객체

inherited start

timer/Animation.js, line 205

타이머를 실행할 때 발생. Timer를 이용해서 생성할 때는 생성하는 순간 시작 상태이다.

Name Type Description
oEvent Object

기본 컴포넌트 이벤트 객체

inherited stop

timer/Animation.js, line 156

타이머를 정지할 때 발생. 정상적으로 complete된 경우에는 발생하지 않는다

Name Type Description
oEvent Object

기본 컴포넌트 이벤트 객체
comments powered by Disqus