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

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

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

文● 古籏一浩

画像をフェードインで表示するアニメーション

　もっとも簡単なアニメーションとして、画像の不透明度を徐々に変化させるフェードイン効果を試してみましょう。HTMLは以下のようにimgタグを用意し「myPhoto」というID名を設定しておきます。


<img src="photo/1.jpg" width="300" height="169" id="myPhoto">

　不透明度を変化させるアニメーションは、ページ内容が読み込まれた後（loadイベントが発生した後）に処理を開始します。loadイベントについては前回の記事で説明していますので参照してください（関連記事）。

　アニメーション処理は、new Y.Anim()としてアニメーションのためのオブジェクト（インスタンス）を生成し、run()メソッドを呼び出します。このとき、どのエレメントを、どのようにアニメーションさせるかを指定する必要があります。

　アニメーションさせるエレメントは、nodeに指定します。指定方法はCSSのセレクターと同じです^（*1）。先ほどimgタグに「myPhoto」というID名を割り当てたので、node: '#myPhoto'と指定します。

　どのようにアニメーションさせるかは、from（アニメーションの開始値）とto（終了値）にそれぞれプロパティ名と値を指定します。不透明度はopacityプロパティで、値は0が完全な透明、1が完全な不透明です。fromを省略すると現在の状態がアニメーションの開始値になります。

　ここまでをまとめたものがサンプル01です。ページが読み込まれると透明から不透明に徐々に画像が変化していきます。


サンプル01の実行結果。ページが読み込まれると画像の不透明度が変化していく

●サンプル01（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" id="myPhoto">
</div>
</body>
</html>

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


YUI().use('anim', function(Y){
    Y.on('load', function(){
        (new Y.Anim({
            node: '#myPhoto',
            from : { opacity : 0.0 },
            to   : { opacity : 1.0 }
        })).run();
    });
});

　アニメーションの時間（不透明度が変化する時間）を指定したいときは、durationに秒数を指定します（ミリ秒ではない点に注意）。duration : 5とすると、5秒かけてアニメーションします（サンプル02）。


サンプル02の実行結果。5秒かけてアニメーションする

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


YUI().use('anim', function(Y){
    Y.on('load', function(){
        (new Y.Anim({
            node: '#myPhoto',
            duration : 5.0,
            from : { opacity : 0.0 },
            to   : { opacity : 1.0 }
        })).run();
    });
});