Chaining Animations Using onComplete

Ajax YUI Anim

このExampleは、AnimのonCompleteイベントのサンプル。
ソースを覗いてみると、YAHOO.util.ColorAnimとYAHOO.widget.Buttonのサンプルにもなっている。
これらについては、簡単に以下のソースコード中にメモを記入。

また、JavaScriptの発動をbody中の最後の要素（div id="animator"）のEvent.onAvailableに設定するようになっている。
body中には、span id="startAnim"要素もあって、これにもscriptが仕込まれるので、onAvailableを仕掛けるタイミングは微妙。
軽い要素同士なので、最後の要素に仕掛けるということでいいのだろう。
言い換えれば、scriptを仕掛ける最後の要素に設定する、ということでよい。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Ajax_Sampling</TITLE>
<link rel="stylesheet" type="text/css" href="scripts/yui/button/assets/skins/sam/button.css" />
<style type="text/css"> 
#animator {
	background-color:#003366; 
	color:#fff; 
	height:15em; 
	width: 15em; 
	position:relative;
	margin:1em;
	padding:1em;
}
</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js" >
</script> 
<script type="text/javascript" src="scripts/yui/animation/animation-min.js" >
</script> 
<!-- buttonウィジェットを使う -->
<!-- button-min.jsの依存 -->
<script type="text/javascript" src="scripts/yui/element/element-beta-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/button/button-min.js">
</script>


<script type="text/javascript">

// boby onload=init()ではなく、要素id=animatorのonAvailableイベントを使う。
YAHOO.util.Event.onAvailable("animator", function() {

	//ボタンがクリックされたときに発火するアニメーション
	var move = new YAHOO.util.Anim("animator", {
		left: {from:0, to:75}
	}, 1);
	
	//Animationが終わったときに発火するアニメーション
	//色アニメーションのため、YAHOO.util.ColorAnimが使われている。
	//AnimをExtendしたものなので、コンストラクタのシグナチャの形式は一緒。
	var changeColor = new YAHOO.util.ColorAnim("animator", {
		backgroundColor: {from:"#003366", to:"#ff0000"}
	}, 1);

	// moveアニメーションのonCompleteイベントに、changeColorの発火を
	// 仕込む（sbsscribeする）。
	move.onComplete.subscribe(function() {
		changeColor.animate();
	});

	//YUIのボタンウィジェットをstartAnimという名前(id)でインスタンス化し、
	//クリックイベントにDom.setStyle(Styleの初期値)の設定、
	//moveハンドラの発火を仕込む。
	//これで、ボタンを押すたびに、アニメーションが再スタートする。
	var startAnim = new YAHOO.widget.Button("startAnim");
	startAnim.subscribe("click", function() {
		//reset the color value to the start so that
		//the animation can be run multiple times:
		YAHOO.util.Dom.setStyle("animator", "backgroundColor", "#003366");
		move.animate();
	});

	//以下は、onStart、onTween、onCompleteの書き方の参考とする。
	//
	//changeColor.onStart.subscribe(function() {
	//	YAHOO.log("changeColor animation is starting.", "info", "example");
	//});

	//changeColor.onTween.subscribe(function(s, o) {
	//	YAHOO.log("changeColor onTween firing with these arguments: " + 
	//		YAHOO.lang.dump(o), "info", "example");
	//});
	
	//changeColor.onComplete.subscribe(function(s, o) {
	//	YAHOO.log("changeColor onComplete firing with these arguments: " + 
	//		YAHOO.lang.dump(o), "info", "example");
	//});
});

</script>
</HEAD>

<!-- yuiのボタンCSSを使うためのbodyのクラス属性-->
<BODY class=" yui-skin-sam">

<!-- yuiのボタンの使い方 -->
<!-- body内ではidとclassをspan要素に定義。
　　　　このidにscriptが仕込んである。 -->
<span id="startAnim" class="yui-button yui-link-button">
    <em class="first-child">
        <a href="#" title="Click here to begin the chained animations.">
         クリックするとアニメーションが始まります
        </a>
    </em>
</span>

<!--The animated element.-->
<div id="animator">

	ボタンをクリックすると、この要素はポジションを変えて、
	その後、色を変えます。
</div>

</BODY>
</HTML>

サンプルの画面は以下のようになる。