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といった外部プラグインを使用する必要がある。