Hello GX! - まずは試してみる
ここでの動作環境は次のとおり。
- OS: FreeBSD 8-current
- Webブラウザ: Firefox 3.0.6
GXでおもに使用することになるgxメソッドの使用例は次のとおり。
$(something).gx(styles [, duration] [, easing] [, callback]);
- [object] styles: アニメーションに用いるCSSプロパティを定義
- [int/string] duration: アニメーションの時間を定義
- [string] easing: Easing Equationを指定。デフォルトは"Linear"
- [function/object] callback: コールバック関数を指定
ご覧のとおり、jQuery.animateと大変よく似ている文法だ。jQueryを使用してきたユーザなら直感的にアニメーションが記述可能となっている。このほかにもいくつかのメソッドが用意されているので、詳細はWebサイトのドキュメントを参照されたい。
まずはDemosの最初に紹介されているSimple animationからだ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Hello GX / tutorial 1 - Simple animation</title>
<style type="text/css">
<!--
div#element1
{
border:1px solid #000000;
padding: 10px;
width: 120px;
height: 40px;
background-color: #ffffff;
}
-->
</style>
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./js/GX.js"></script>
<script type="text/javascript">
<!--
$(document).ready
(
function()
{
$('#exec').click
(
function()
{
$('#element1').gx({'width': 200, 'height': 200 }, 1000, 'Linear', function(el) { el.html('complete'); });
// jQuery の animate で構成する場合
// $('#element1').animate({'width': 200, 'height': 200 }, 1000, 'linear', function() { $(this).html('complete'); });
}
);
}
);
-->
</script>
</head>
<body>
<input type="button" id="exec" value="start">
<div id="element1">div#element1</div>
</body>
</html>
ボタンをクリックするとアニメーションがはじまるサンプルファイルだ。Webブラウザでtutorial_1.htmlにアクセスしてみよう。以下の動画のように、startボタンをクリックすると、div要素が拡大していくはずである。
ソース中にも記載したが、これだけのアニメーションならばjQuery.animate単体でも実現可能だ。つづいてはColors animationを実際にうごかしてみよう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Hello GX / tutorial 2 - Colors animation</title>
<style type="text/css">
<!--
div#element2
{
border:1px solid #000000;
padding: 10px;
width: 120px;
height: 40px;
background-color: #ffffff;
}
-->
</style>
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./js/GX.js"></script>
<script type="text/javascript">
<!--
$(document).ready
(
function()
{
$('#exec').click
(
function()
{
$('#element2').gx({'width': 200, 'height': 200, 'color' : '#bbbbbb', 'background-color': '#444444' }, 1000, 'Linear', function(el) { el.html('complete'); });
}
);
}
);
-->
</script>
</head>
<body>
<input type="button" id="exec" value="start">
<div id="element2">div#element2</div>
</body>
</html>
Webブラウザでtutorial_2.htmlにアクセスしてみよう。以下のように、startボタンをクリックすると、div要素の色が徐々に変化しながら拡大していくはずだ。
色指定は16進数の指定のほかに、[255, 255, 255]といった10進数での指定も可能だ。ちなみにjQuery単体では色を変化させながらアニメーションをおこなうことはできないので、実現させる場合はjQuery Color Animationsといった外部プラグインを使用する必要がある。