Rev. 2.73

gx_logo_2.gif

Riccardo Degni씨는 GX라는 이름의 jQuery용 애니메이션 프레임웍을 개발하고 공개했습니다. 그는 사실 MooTools용 확장 라이브러리인 moo.rd를 만든 장본인입니다. GX는 2가지 디자인 패턴으로 개발되었는데, 하나는 "덜쓰고, 많은 일 시켜먹기" 패턴으로써 jQuery의 방식을 그대로 모방하여 작은 코드량만으로 복잡 다양한 애니메이션을 구사하는 것과, 다른 하나는 DRY(Don’t Repeat Yourself) 패턴으로써 내부적으로 함수들을 중복-호출하지 않고 필요한 때 한번만 호출하여 재사용하는 구조를 가진다고 합니다.

엄격한 표준을 준수하는 스타일시트와 자바스크립트를 사용하고, 한번 생성한 인스턴스를 지속적으로 참조하는 구조이기 때문에 메모리 릭(누수) 문제와 "깜빡임" 문제와는 이별이며, 애니메이션 상태를 묻지도 따지지도 않고 추적할 수 있다고 합니다. Moo의 영향을 고스라니 이어받아서 그런지 덩치가 매우 작고(5kb) 강력한 변화(Transitions) 효과를 내장할 수 있네요. 크로스-브라우저를 지원하며, MIT 라이센스를 따르고 있습니다.

// simple animation
$('element').gx({'width':'+=200px', 'height':'4em', 'opacity':0.4, 'color':'#ff0'}, 4000);

// queue animations
$('element').gx({width: 0}, 200)
            .gx({width: 200}, 4000)
            .gx({width: 0}, 'verySlow')
            .gx({width: 100}, 'slow');

// 'Complete' callback
$('element').gx({width: 200, height: 200}, 2000, 'Bounce', function(el) {
  el.html('The animation is completed!');
});

// 'Start' and 'Complete' callbacks
$('element').gx({width: 200, height: 200}, 2000, 'Bounce', {
  'start': function(el) {
      el.html('The animation is started!');
    }, 'complete': function(el) {
      el.html('The animation is completed!');
  }
});

프로젝트에 써먹어볼까 생각중입니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar