このページの本文へ

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

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

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

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

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

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

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

YUI 3

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


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


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

fig1-2.png
画像の高さを取得してアニメーションの開始位置(Y座標)を決定すれば画像のサイズにかかわらず期待した動きが得られる

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


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


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

Easing.backBothEasing.backInEasing.backOut Easing.bounceBoth
Easing.bounceInEasing.bounceOutEasing.easeBoth Easing.easeBothStrong
Easing.easeInEasing.easeInStrongEasing.easeNone Easing.easeOut
Easing.easeOutStrongEasing.elasticBothEasing.elasticIn Easing.elasticOut

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

fig4-1.png fig4-2.png
fig4-3.png fig4-4.png
サンプル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();
        });
    });
});


Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く