Jaguar.js

Class: AnimationTransition

collie. AnimationTransition

new collie.AnimationTransition(fCallback, nDuration, htOption)

timer/AnimationTransition.js, line 59

collie.Effect를 사용한 Transition 타이머 튜토리얼 보기

Name Type Description
fCallback Function | collie.DisplayObject | Array

실행될 콜백 함수, DisplayObject를 넣게 되면 해당 객체에 관한 내용만 변경함. htOption의 set 참조.

Name Type Description
timer collie.AnimationCycle

현재 타이머 인스턴스
frame Number

현재 프레임
duration Number

타이머에 설정된 duraiton 값
cycle Number

반복 횟수
runningTime Number

타이머 시작 후 실행된 시간 (ms)
value Number | Array

적용할 값. from, to 값이 배열일 경우 이 값도 배열로 반환
from Number | Array

시작 값, 시작 값을 입력하지 않고 fCallback에 DisplayObject를 넣으면 해당 객체의 현재 값이 자동으로 입력됨
to Number | Array

끝 값
nDuration Number

실행 시간
htOption Object

설정

Name Type Default Description
from Number | Array

시작 값(배열로 넣을 수 있음)
to Number | Array

끝 값(배열로 넣을 수 있음)
loop Number 1 optional

반복 횟수
effect collie.Effect collie.Effect.linear optional

효과 함수
set String | Array optional

fCallback에 DisplayObject를 넣을 경우 set을 이용해서 특정 값을 변경한다. 배열로 넣을 경우 여러 속성을 변경할 수 있다
See:
Examples
여러 개의 값으로 트랜지션
collie.Timer.transition(function (oEvent) {
 oDisplayObject.set("opacity", oEvent.value[0]);
 oDisplayObject.set("x", oEvent.value[1]);
}, 1000, {
 from : [1, 100],
 to : [0, 300]
});

DisplayObject를 callback으로 사용해서 여러 속성을 변경하는 방법

collie.Timer.transition(oDisplayObject, 1000, {
 from : [10, 10], // from 은 생략 가능, 생략하면 현재 값이 자동으로 입력 됨
 to : [100, 200],
 set : ["x", "y"]
});

하지만 이 때에는 DisplayObject의 move 메서드를 사용하는 것이 좋음

여러 개의 DisplayObject를 한꺼번에 실행할 수도 있음

collie.Timer.transition([oDisplayObjectA, oDisplayObjectB], 1000, {
 from : 0, // 이 때에는 from 생략 불가능
 to : 1,
 set : "opacity"
});

Extends

Members

remove

현재 타이머를 제거한다

Deprecated
  • start, stop할 때 List에 추가되고 제거되기 때문에 별도로 remove를 할 필요가 없어졌다.

    Methods

    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:

    inherited getDuration(){Number}

    timer/Animation.js, line 89

    Duration을 반환

    getValue(){Variables}

    timer/AnimationTransition.js, line 156

    현재 값을 반환

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

    reset()

    timer/AnimationTransition.js, line 120

    값을 초기화

    run(nCurrentFrame, nFrameDuration)

    timer/AnimationTransition.js, line 166

    애니메이션을 실행

    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)

    setValue(vValue)

    timer/AnimationTransition.js, line 147

    현재 값을 설정

    Name Type Description
    vValue Variables

    start()

    timer/AnimationTransition.js, line 84

    시작할 때 실행되는 메서드

    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/AnimationTransition.js, line 207

    트랜지션이 끝난 후 발생

    Name Type Description
    oEvent Object

    기본 컴포넌트 이벤트 객체

    end

    timer/AnimationTransition.js, line 195

    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