ここでは米国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)