Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

Emile :: 50줄짜리 자바스크립트 애니메이션 프레임워크

script.aculo.us를 만든 토마스 퍽스(Thomas Fuchs)가 Fronteers에서 Javascript Animation Framework인 Emile을 공개하였습니다. Emile은 프레임워크가 별도로 필요하지 않으면 소스코드는 단지 50줄밖에 안됩니다.

소스코드는 GitHub에 있으며 MIT 라이센스로 공개되어 자유롭게 사용할 수 있습니다. Emile이라는 이름은 애니메이션 만화의 아버지라고 불리는 Emile Cohl에서 따왔습니다. 웹브라우저 지우너은 아래와 같습니다.

  • Microsoft Internet Explorer for Windows, version 6.0 and higher
  • Mozilla Firefox 1.5 and higher
  • Apple Safari 2.0.4 and higher
  • Opera 9.25 and higher
  • Chrome 1.0 and higher

자세한 Emile 소스코드 대한 부분은 발표자료에 자세하게 설명되어 있습니다. (이 발표자로는 PDF로도 제공하고 있습니다.)


물론 추가적인 부분을 위한 코딩이 좀 필요하지만 이렇게 간단한 코드로 애니메이션을 돌릴수 있다는 것은 상당히 흥미롭습니다. 데모가 제공되는 곳이 없어서 소스코드를 다운받을때 같이 제공되는 간단한 예제를 올려놨습니다.


요즘 많이 나오는 화려한 이펙트는 아니지만 아주 적은 소스로 애니메이션 효과를 줄 수 있습니다.

아래는 위 예제의 소스입니다.

emile('test2', 'left:300px;padding:10px;border:50px solid #ff0000', {
    duration: 500,
    after: function(){
        emile('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', { 
            duration: 4000, easing: bounce
        });
    }
});
  
function bounce(pos) {
    if (pos < (1/2.75)) {
        return (7.5625*pos*pos);
    } else if (pos < (2/2.75)) {
        return (7.5625*(pos-=(1.5/2.75))*pos + .75);
    } else if (pos < (2.5/2.75)) {
        return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
    } else {
        return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
    }
}

위와같은 형태로 사용합니다.
emile(Dom Object ID, CSS Styles, Option); 이라고 정의를 할 수 있을듯 합니다. 첫 파라미터로 애니메이션을 줄 돔 객체의 id를 넘겨주고 두번재 파리미터로는 CSS 스타일을 지정합니다. CSS스타일종류에 따라 다르겠지만 기존에 스타일이 지정되어 있어야 합니다. 특히 애니메이션을 위치가 이동되기 때문에 position:absolute등이 지정되어 있는채로 left, top등을 주면 해당 값으로 변하는 애니메이션 효과가 나타나게 쇱니다. 세번째 파라미터는 JSON형태로 옵션을 넘겨주는데 애니메이션의 시간을 정하는 duration과 변하는 속도를 지정해 주는 easing, 애니메이션이 끝난후에 콜백을 지정하는 after만을 사용할 수 있는듯 합니다. easing은 따로 정의한 함수를 지정해 주는데 이 함수에서 pos의 값이 변하는 양을 조절해서 속도를 정의합니다.(이건 약간 수학적 지식이 필요할듯 합니다. 공학용 계산기에서 수학식으로 그래프를 그리는 걸 생각하시면 됩니다.)



신기해서 허접한 예제를 하나더 만들어 봤습니다.


사진으로도 잘되나 한번 해봤습니다. 페이지가 로딩되면 2개의 이미지가 연속해서 동작하고 Click Me를 클릭하면 글자가 2배로 커지면서 이동합니다. 그리고 위쪽 이미지를 클릭하면 오른쪽으로 움직였다가 다시 왼쪽으로 오는데 왼쪽으로 움직일때는 점점 빨라지게 했습니다.(Click Me같은 경우는 사용을 잘못했는지 엄청 커졌다가 원하는 크기로 돌아오네요. 버그인지 사용상의 잘못인지는 모르겠지만 의도한 동작은 아닙니다.)

요즘이야 왠만하면 jQuery나 prototype.js같은 프레임워크를 쓰기는 하지만 안그럴때도 많은데 이렇게 적은양의 코드로 간단한 애니메이션을 할 수 있다는 것은 상당히 매력적이군요. 요즘 프레임워크처럼 아주 많은 기능이 있는 것은 아니지만 필요한 것은 대부분 지원하고 외부에서 상당히 조종할 수 있기 때문에 잘 활용하면 상당히 많은 것을 할 수 있을듯 합니다.
2009/11/13 03:00 2009/11/13 03:00