JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ:phpspot開発日誌

前の記事 ≪：シミを簡単に描画できるPhotoshopブラシ２５０セット
次の記事 ≫：スタイリッシュでカスタマイズ性のあるツールチップjQueryプラグイン...

JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ

2009年03月16日-

スポンサードリンク

GX - Full-Featured Javascript Animations Framework

JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ。
jQueryと組み合わせて使うアニメーションライブラリです。

jQueryやscript.aculo.usにもアニメーション機能は備わっているけど、ここまでではないというアニメーションに特化したアドオンです。
勿論、jQuery単体でも、組み合わせて実現できるのかもしれませんがアニメーションに特化している分簡単に出来ます。

以下でその凄さが分かるはず

シンプルアニメーション:

$('#el1').gx({'width': 200, 'height': 200, 'border-width': 8}, 2000, 'Linear', function(el) { el.html('Completed!'); });

Click Me!

カラーアニメーション:

$('#el2').gx({'width': 200, 'height': 200, 'color': 'red', 'background-color': '#ff00ff', 'border-width': 8, 'border-color': '#fa0'}, 4000, 'Linear', function(el) { el.html('Completed!'); });

Click Me!

イージング:

$('#el3').gx({'width': 300, 'height': 300, 'font-size': 20}, 4000, 'Bounce', function(el) { el.html('Completed!'); });

Click Me!

相対的アニメーション:

$('#el4').gx({'width': '+=300px', 'height': '+=300px', 'font-size': '+=20px'}, 4000, 'Elastic');

Click Me!

複数ユニットアニメーション:

$('#el5').gx({'width': '200px', 'height': '200px', 'font-size': '4em'}, 4000, 'Elastic');

Click Me!

キャンセリングアニメーション:

$('#el6').gxInit({queue: 'cancel'});
$('#el6').hover(function() {
$('#el6').gx({'width': 500, 'font-size': 18}, 4000, 'Bounce');
}, function() {
$('#el6').gx({'width': 100, 'font-size': 12}, 400, 'Linear');
});
$('#el7').gxInit({queue: 'cancel'});
$('#el7').hover(function() {
$('#el7').gx({'width': 500}, 4000, 'Linear');
}, function() {
$('#el7').gx({'width': 100}, 400, 'Linear');
});

Hover Me!

キューイング:

$('#el8').gx({'width': 400, 'height': 300, 'background-color': '#f0f'}, 4000, 'Linear')
.gx({'width': 140, 'height': 440, 'background-color': '#ff0'}, 2000, 'Linear')
.gx({'width': 100, 'height': 100, 'background-color': '#06C'}, 4000, 'Linear');

Click Me!

キューイング相対アニメーション:

$('#el1').gx({'top': '-=40'}, 200)
.gx({'top': '+=180'}, 1000)
.gx({'left': '-=40'}, 200)
.gx({'left': '+=480'}, 1000)
.gx({'top': '+=40'}, 200)
.gx({'top': '0'}, 1000)
.gx({'left': '+=40'}, 200)
.gx({'left': '0'}, 1000);

Click me!

Pause/Resume アニメーション:

$('#el9').click(function() {
$('#el9').gx({'width': '400px', 'font-size': '20px'}, 4000, 'Bounce');
});
$('#pause_9').click(function() {
$('#el9').pause();
});
$('#resume_9').click(function() {
$('#el9').resume();
});

pause | resume

Click Me!

コールバックアニメーション:

$('#el11').gx({'width': '400px', 'font-size': '20px', 'background-color': '#f0f'}, 4000,
'Bounce', function(el) { el.html('Complete!'); });

Click Me!

Start/Complete コールバックアニメーション:

$('#el10').gx({'width': '400px', 'font-size': '20px', 'background-color': '#f0f'}, 4000,
'Linear', {
start: function(el) { el.html('Start!'); },
complete: function(el) { el.html('Complete!'); }
});

Complete!

トグルアニメーション:

$('#el12').gx({opacity: 'toggle'})
.gx({opacity: 'toggle'})
.gx({opacity: 'toggle'})
.gx({opacity: 'toggle'})
.gx({opacity: 'toggle'})
.gx({opacity: 'toggle'});
$('#el13').gx({height: 'toggle'})
.gx({height: 'toggle'})
.gx({height: 'toggle'})
.gx({height: 'toggle'})
.gx({height: 'toggle'})
.gx({height: 'toggle'});
$('#el14').gx({width: 'toggle'})
.gx({width: 'toggle'})
.gx({width: 'toggle'})
.gx({width: 'toggle'})
.gx({width: 'toggle'})
.gx({width: 'toggle'});

Toggle my opacity!

Toggle my height!

Toggle my width!

↑ブログ入稿の関係上、動かないサンプルがあったら申し訳ないです

実装方法も、メソッドが１個なのでシンプルに実装できます。

$(something).gx(styles [, duration] [, easing] [, callback])

関連エントリ