アニメーションの終了時（完了時）に特定の処理を行わせたい場合があります。yuiではonCompleteに終了時の処理を指定することができます。書式は以下のようになります。
オブジェクト.onComplete.subscribe(処理内容)
処理内容の部分に関数を指定しておくと終了時に関数が呼び出されます。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>yuiサンプル</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 setOpac()
{
boxObj = new YAHOO.util.Anim("box", { opacity:{ from:0, to:1 } },2 );
boxObj.onComplete.subscribe(endCheck);
boxObj.animate();
}
function endCheck()
{
alert("処理が完了しました");
}
// --></script>
</head>
<body>
<h1>yuiサンプル</h1>
<form>
<input type="button" value="不透明度を変更" onClick="setOpac()">
</form>
<div id="box">Yahooサンプル</div>
</body>
</html>
終了時だけでなく開始時に処理を行わせることもできます。この場合はonCompleteのかわりにonStartを使います。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>yuiサンプル</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 setOpac()
{
boxObj = new YAHOO.util.Anim("box", { opacity:{ from:0, to:1 } },2 );
boxObj.onStart.subscribe(startCheck);
boxObj.animate();
}
function startCheck()
{
alert("処理を開始します");
}
// --></script>
</head>
<body>
<h1>yuiサンプル</h1>
<form>
<input type="button" value="不透明度を変更" onClick="setOpac()">
</form>
<div id="box">Yahooサンプル</div>
</body>
</html>
yuiは開始時、終了時だけでなくアニメーション処理中にも関数を呼び出して処理ができるようになっています。この場合はonTweenを使います。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>yuiサンプル</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 setOpac()
{
boxObj = new YAHOO.util.Anim("box", { opacity:{ from:0, to:1 } },2 );
boxObj.onTween.subscribe(tweenCheck);
boxObj.animate();
}
function tweenCheck()
{
var n = boxObj.getAttribute("opacity");
document.getElementById("opacValue").value = n;
}
// --></script>
</head>
<body>
<h1>yuiサンプル</h1>
<form>
<input type="button" value="不透明度を変更" onClick="setOpac()"><br>
不透明度：<input type="text" id="opacValue">
</form>
<div id="box">Yahooサンプル</div>
</body>
</html>
[
カレンダーをダウンロードして使ってみよう]
[
目次へ]
(2006.2.20)