【ハウツー】jQueryでアニメーションならコレで決まり?! 新星フレームワーク「GX」 (3) さまざまなアニメーション効果を試す | エンタープライズ

【ハウツー】

jQueryでアニメーションならコレで決まり?! 新星フレームワーク「GX」

3 さまざまなアニメーション効果を試す

富田宏昭　 [2009/03/30]

印刷

先頭
前へ
- 1
- 2
- 3
- ／3

さまざまなアニメーション効果を試す

GXにはあらかじめEasing Equationとよばれる視覚効果がおおく用意されている。Easingになにも指定しなかった場合は"Linear"が使用されるが、今回はGX.jsとGX.transitions.jsをロードした上でeasingに"Bounce"と指定して実行してみよう。

<!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 3 - animation with GX.transitions.js</title>
<style type="text/css">
<!--
div#element3
{
    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" src="./js/GX.transitions.js"></script>
<script type="text/javascript">
<!--
$(document).ready
(
    function()
    {
        $('#exec').click
        (
            function()
            {
                $('#element3').gx({'width': 200, 'height': 200, 'color' : '#bbbbbb', 'background-color': '#444444' }, 2000, 'Bounce', function(el) { el.html('complete'); }); 
            }
        );
    }
);
-->
</script>

</head>

<body>
    <input type="button" id="exec" value="start">
    <div id="element3">div#element3</div>
</body>

</html>

Webブラウザでtutorial_3.htmlにアクセスしてみる。さきほどのただ拡大していくアニメーションとは違い、以下のようにバウンドしながら拡大していくはずだ。

このほかにもざっと9種類ほどのアニメーションが用意されている。なおこれらのアニメーションはGX.transitions.jsをみればわかるが、ユーザの手で拡張が可能となっている。ちょっと手を加えたい場合や気にいったアニメーションが見つからなかった場合は、自分で作ってしまうのもひとつの手だ。

つい多用してしまいがちな視覚効果、でも使いどころを見極めて

シンプルな構文で簡単にアニメーションが追加できるGX。ライブラリをロードするだけで最初から多彩なアニメーションが使えるのはなかなか魅力的だ。なにか視覚効果をつけたいけどネタが見つからない場合は、まずはGXをひととおり試してみるというのもアリだろう。

なお、この手の視覚効果は簡単に使えてしまう分つい多用してしまいがちだ。GXにかぎらずアニメーション・視覚効果を追加するライブラリに共通して言えることだが、実際に組みこんでみる前にいま一度「その視覚効果が本当に必要か」を考えてみることをおすすめする。すぐれた視覚効果はすぐれた操作性を提供してくれる。しかし「カッコいいから」という理由だけでこういった視覚効果を闇雲に使ってしまっては操作性を低下させるばかりか、ユーザに不要なストレスを与えかねない。なかなか使いどころがむずかしいアニメーションだが、実際に使用する場面を想像し、適材適所でつかいこなせるようになっておきたいところだ。