古籏一浩のJavaScriptラボ ― 第16回

Yahoo! UI Library 3で驚きのアニメーションを作成

2009年10月20日 11時00分更新

文● 古籏一浩

画像を上から落下させるアニメーション

　次はもう少し派手なアニメーションを付けてみましょう。複数の画像がブラウザー画面の外側から下に落下してくるアニメーションです。

　スクリプトを組み込む前のHTMLでは、画像が単純に横に並んでいます（下の図の（1）の状態）。落下のアニメーションをスタートする地点はブラウザーの外（表示領域外）ですので、HTMLが描画された段階で、スクリプトで画像のY座標をマイナスに変更します（図の（2）の状態）。これで、画像は画面の外に出て非表示状態となります。この段階から、画像のY座標の値を徐々に変更していけば、落下のアニメーションになります。アニメーションは、最終的に元のHTMLの位置で止まるようにします（図の（4）の状態）。

　落下させる画像にはスタイルシートクラス名「yui3-startup-anime」を設定しておきます。スクリプト自体はサンプル04と似ていますが、位置の指定方法に少し工夫が必要です。1つは、toに指定するエレメントの座標値、つまりアニメーション終了時の画像の位置です。画像をもとの表示位置に戻すため、DOMの構築が完了した時点（初期状態）の座標値を取得し、toに指定します。座標値はgetX()でX座標、getY()でY座標値を取得できますので、xyの引数は以下のようになります。


to   : { xy: [ ele.getX(), ele.getY() ] }

　もう1つは、fromで指定するアニメーションの開始位置です。たとえば、「-999px」と指定すると画像が極端に小さい場合などに期待した動きが得られないことがあります。「-200px」のように、使用する画像のサイズを考慮して指定してもいいのですが、画像を変更するたびに値を書き換えるのは面倒です（この場合、画像の高さが200ピクセルを超えると一部が画面上にはみ出してしまう）。そこで、画像の高さをスクリプトで取得して、落下開始位置を動的に決定します。


画像の高さを取得してアニメーションの開始位置（Ｙ座標）を決定すれば画像のサイズにかかわらず期待した動きが得られる

　画像の高さはheight属性に格納されています。属性値はgetAttribute('読み出したい属性名')で読み出せますので、getAttribute('height')で画像の高さを取得できます。以下のように記述すれば、画像の高さを考慮したアニメーション開始位置を指定できます。


from : { xy: [ ele.getX(), -ele.getAttribute('height') ] }

　これで位置は指定できましたが、せっかくのアニメーションなのに直線的に画像が落下するだけでは面白くありません。そこで、動きにちょっとしたアクセントを付けてみましょう。YUIは、easingに特定の関数を指定することでさまざまな動き（イージング）を実現できます。easingには以下の引数を指定できます。

Easing.backBoth	Easing.backIn	Easing.backOut	Easing.bounceBoth
Easing.bounceIn	Easing.bounceOut	Easing.easeBoth	Easing.easeBothStrong
Easing.easeIn	Easing.easeInStrong	Easing.easeNone	Easing.easeOut
Easing.easeOutStrong	Easing.elasticBoth	Easing.elasticIn	Easing.elasticOut

　試しに落下してバウンドする「Easing.elasticOut」を指定してみましょう。ここまでをまとめたものがサンプル05です。ページが読み込まれると画像が上から落下し、バウンドした後に元の位置で止まります。


サンプル05の実行結果。6枚の画像が上から下に落下しバウンドして止まる

●サンプル05（HTML）


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="build/yui/yui.js"></script>
<script type="text/javascript" src="js/YUI_startupanime.js"></script>
</head>
<body>
<h1>YUIスタートアップアニメ</h1>
<div>
<img src="photo/1.jpg" width="300" height="169" class="yui3-startup-anime">
<img src="photo/2.jpg" width="300" height="169" class="yui3-startup-anime">
<img src="photo/3.jpg" width="300" height="169" class="yui3-startup-anime">
<img src="photo/4.jpg" width="300" height="169" class="yui3-startup-anime">
<img src="photo/5.jpg" width="300" height="169" class="yui3-startup-anime">
<img src="photo/6.jpg" width="300" height="169" class="yui3-startup-anime">
</div>
</body>
</html>

●サンプル05（スクリプト＝YUI_startupanime.js）


YUI().use('anim', function(Y){
    Y.on('load', function(){
        Y.all('.yui3-startup-anime').each(function(ele){
            (new Y.Anim({
                node: ele,
                duration : 4.0,
                easing: Y.Easing.elasticOut,
                from : { xy: [ ele.getX(), -ele.getAttribute('height') ], opacity : 0.0 },
                to   : { xy: [ ele.getX(), ele.getY() ], opacity : 1.0 }
            })).run();
        });
    });
});