JAVASCRIPT#66 - 다시 한걸음씩.

I've been made many mistakes but giving up will never be one of them.

JAVASCRIPT#66 - 다시 한걸음씩.

자만하고 길을 잃어 다시 시작. 천천히 한걸음씩 다시.

1. 네임스페이스 만들기.

var gf = {};

2. 스프라이트.

스프라이트란? 애니메이션이 될 수 있는 이미지.

스프라이트 & 스프라이트 시트 제작 도구 : GIMP + 어도비 플래쉬

3. 애니메이션의 구현. 

함수1. setFrame

gf.setFrame = function(divId, animation)
{
    $("#" + divId).css("backgroundPosition", "" + -1 * animation.currentFrame * animation.width + "px 0px");
}

Point1. $("#" + divId)으로 전달받은 divId 값을 이용해서 셀렉팅한다.

Point2. -1 을 꼭 붙여줘야 한다. 아니면 반대로 재생된다 -_-

함수2. 애니메이션 객체

gf.animation = function(options){
    var defaultValues =
    {
        url : false,
        width : 64,
        height : 64,
        startFrame : 0,
        endFrame : 0,
        numberOfFrame : 1, // 끝프레임 - 시작프레임 + 1 으로 설정.
        currentFrame : 0,
        rate : 30 // 작을수록 빨라짐.
    };

    $.extend(this, defaultValues, options);
}

var walk = new gf.animation({
    url : "Images/JohnDoe.png",
    startFrame : 0,
    endFrame : 2,
    numberOfFrame : 3,
    width : 18,
    height : 44,
    rate: 120
});

var stand = new gf.animation({
    url : "Images/JohnDoe.png",
    numberOfFrame : 0,
    width : 18,
    height : 44,
    rate: 120
});

Point1. animation 내부 프로퍼티 값 만드는 방법, var defaultValues = {}; 을 통해 먼저 디폴트값 내부객체 생성, 그다음 extend 메소드를 통해 입력options 값과 defaulValues 값을 합쳐서 자신의 것으로 만듬.

Point2. $.extend 메소드를 통해서 디폴트값과 사용자 지정값을 합쳐 자신(this)의 것으로 만듬.

함수3. 애니메이션 재생 함수

gf.animationHandles = {};

gf.setAnimation = function(divId, animation, loop)
{
    animation.currentFrame = animation.startFrame;
    if(gf.animationHandles[divId])
    {
        clearInterval(gf.animationHandles[divId]);
    }
    if(animation.url)
    {
        $("#"+divId).css("backgroundImage","url('"+animation.url+"')");
    }
    if(animation.numberOfFrame > 1)
    {
        gf.animationHandles[divId] = setInterval(function()
            {
                animation.currentFrame++;
                if(!loop && animation.currentFrame > animation.endFrame)
                {
                    clearInterval(gf.animationHandles[divId]);
                    gf.animationHandles[divId] = false;
                    gf.setFrame(divId, stand); // 원상복구 [임시★]
                }
                else
                {
                    animation.currentFrame %= animation.numberOfFrame;
                    gf.setFrame(divId, animation);
                }
            }, animation.rate);
    }
} 

Point1. 3중 따옴표 표기

- "url('"+animation.url+"')");

- "+ +" 로써 url 값을 가져온다음 작은따옴표 ''로 스트링으로 만들어 반환하고 다시 큰따옴표로

전체 스트링으로 싸서 반환하고있는 모습.

Point2. divId 값을 인덱스로하는 원소를 만들고 애니메이션 반복문 setInterval을 저장!

- 일단 숫자만 되는줄 알았던 인덱스에 divId라는 스트링 값도 되는게 참신한듯. 그리고이게 setInterval 반복문 자체를 담게됨. 이로써 만약 어떤 애니메이션이 진행중일때, 해당 divId에 또 다른 애니메이션 커맨드가 떨어지면 해당 divId를 인덱스로가지는 반복문을 삭제하고 새로운 반복 애니메이션문을 할당함으로 애니메이션이 겹치는 현상을 방지하고

있음.