Yahoo! UIライブラリをダウンロードして使ってみよう

 ここでは米国Yahoo!が提供するUI(ユーザーインタフェイス)ライブラリを利用してみましょう。まず、以下のサイトからライブラリをダウンロードしましょう(以後Yahoo! UI ライブラリはyuiライブラリと略します)。

http://developer.yahoo.net/yui/index.html

 それでは、yuiライブラリを使ってアニメーションさせてみましょう。yuiを使うには以下のようにしてライブラリを読み込ませます。

<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>

 この3つが基本的なライブラリになります。後は用途に応じて個別のライブラリを読み込ませます。ここでは、アニメーションを行うので以下のanimation.jsファイルを読み込ませます。

<script src="animation.js" type="text/javascript"></script>

 それでは横幅を広げる簡単なアニメーションを作成してみます。まず、アニメーションさせるためのdivタグを用意します。

<div id="box">Yahooサンプル</div>

 次にスクリプトで以下のようにアニメーションのパラメータを設定します。ここでは横幅を500(ピクセル)にするのでwidth:{ to:500 }とします。

boxObj = new YAHOO.util.Anim("box", { width: {to: 500} } );

 最初のパラメータはdivタグで指定したID名になります。これだけではアニメーションしないのでanimate()メソッドを使ってアニメーション処理を開始させます。(実際のサンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Yahoo.jsサンプル</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>
<script src="animation.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function setWidth()
{
boxObj = new YAHOO.util.Anim("box", { width: {to: 500} } );
boxObj.animate();
}
// --></script>
</head>
<body>
<h1>Yahoo.jsサンプル</h1>
<form>
<input type="button" value="サイズ変更" onClick="setWidth()">
</form>
<div id="box">Yahooサンプル</div>
</body>
</html>

 横幅だけでなく縦幅も同時に変化させる場合にはheightプロパティの値も指定します。(実際のサンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Yahoo.jsサンプル</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>
<script src="animation.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function setWidth()
{
boxObj = new YAHOO.util.Anim("box", { width: {to: 500}, height:{to:400}} );
boxObj.animate();
}
// --></script>
</head>
<body>
<h1>Yahoo.jsサンプル</h1>
<form>
<input type="button" value="サイズ変更" onClick="setWidth()">
</form>
<div id="box">Yahooサンプル</div>
</body>
</html>

 アニメーションで時間を指定しない場合には1秒になります。秒数を指定する場合にはYAHOO.util.Anim()の三番目のパラメータに指定します。以下のサンプルは5秒間でオブジェクトがアニメーションします。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Yahoo.jsサンプル</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>
<script src="animation.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function setWidth()
{
boxObj = new YAHOO.util.Anim("box", { width: {to: 500}, height:{to:400}},5 );
boxObj.animate();
}
// --></script>
</head>
<body>
<h1>Yahoo.jsサンプル</h1>
<form>
<input type="button" value="サイズ変更" onClick="setWidth()">
</form>
<div id="box">Yahooサンプル</div>
</body>
</html>

 ここまでのサンプルは指定した幅までアニメーションしましたが、幅20から幅100までといった範囲を指定してアニメーションさせたい場合もあります。このような場合にはfromプロパティに開始時の値を指定します。以下のサンプルは横幅を800ピクセルから200ピクセルまで、縦幅を500ピクセルから100ピクセルまで変化させます。(実際のサンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Yahoo.jsサンプル</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>
<script src="animation.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function setWidth()
{
boxObj = new YAHOO.util.Anim("box", { width: {from:800, to: 200}, height:{from:500, to:100}},3 );
boxObj.animate();
}
// --></script>
</head>
<body>
<h1>Yahoo.jsサンプル</h1>
<form>
<input type="button" value="サイズ変更" onClick="setWidth()">
</form>
<div id="box">Yahooサンプル</div>
</body>
</html>

 再生中のアニメーションを停止させることもできます。停止させるにはstop()メソッドを使います。(実際のサンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Yahoo.jsサンプル</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>
<script src="animation.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function setWidth()
{
boxObj = new YAHOO.util.Anim("box", { width: {from:800, to: 200}, height:{from:500, to:100}},10 );
boxObj.animate();
}
function stopAnime()
{
boxObj.stop();
}
// --></script>
</head>
<body>
<h1>Yahoo.jsサンプル</h1>
<form>
<input type="button" value="サイズ変更" onClick="setWidth()">
<input type="button" value="停止" onClick="stopAnime()">
</form>
<div id="box">Yahooサンプル</div>
</body>
</html>

[不透明度の処理]
[目次へ]

(2006.2.20)