Animation Easing

Ajax YUI Anim

YUIのAnimationを呼んでいると、Easing Methodという言葉が出てくる。
とても、訳しずらいので、今後、そのままeasingと呼ぶが、ようするにAnimationの終端の扱いのことらしい。
YAHOO.utilにEasingというオブジェクトがあって、そのAPIドキュメントをみると、たーくさんのmethodが用意されている。
以下にいくつかをサンプリングしてみる。
動きに「たのしさ」を出すためのmethodであることがわかる。

<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>
<style type="text/css"> 
#demo {
    background:#ccc;
    margin-bottom:1em;
    overflow:hidden;
    width:200px;
    height:25px;
}
</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> 

<script type="text/javascript">

init = function() {

	// 現在の幅（上のスタイルで定義；200px）から0まで、変化する。
	var attributes = {
	        width: { to: 0 }
	    };

	// 1. BackIn（広がってから縮まる）
	// Animオブジェクトのインスタンス化
    var anim = new YAHOO.util.Anim('demo', attributes, 1.5, 
    	    YAHOO.util.Easing.backIn);

	// id="demo-run"要素のクリックイベントにハンドラをくっつける。
	YAHOO.util.Event.on('demo-run', 'click', function() {
	        anim.animate();
	});

	// 2. EaseIn（だんだん早くなる）
	// ひとつの要素（id="demo"）にいくつもAnimationをくっつけられる。
    var anim1 = new YAHOO.util.Anim('demo', attributes, 1.5, 
    	    YAHOO.util.Easing.easeIn);

	// id="demo-run"要素のクリックイベントにハンドラをくっつける。
	YAHOO.util.Event.on('demo-run1', 'click', function() {
	        anim1.animate();
	});

	// 3. EaseOut（だんだん遅くなる）
    var anim2 = new YAHOO.util.Anim('demo', attributes, 1.5, 
    	    YAHOO.util.Easing.easeOut);

	// id="demo-run"要素のクリックイベントにハンドラをくっつける。
	YAHOO.util.Event.on('demo-run2', 'click', function() {
	        anim2.animate();
	});

	// 4. ElasticIn（だんだん遅くなる）
    var anim3 = new YAHOO.util.Anim('demo', attributes, 1.5, 
    	    YAHOO.util.Easing.elasticIn);

	// id="demo-run"要素のクリックイベントにハンドラをくっつける。
	YAHOO.util.Event.on('demo-run3', 'click', function() {
	        anim3.animate();
	});

}
</script>
</HEAD>

<BODY onload=init()>
<p>
<div id="demo">デモ</div>
</p>
<p>
<button id="demo-run">BackIn</button>
&nbsp
<button id="demo-run1">EaseIn</button>
&nbsp
<button id="demo-run2">EaseOut</button>
&nbsp
<button id="demo-run3">ElasticIn</button>
</p>

</BODY>
</HTML>

画面は以下の通り。

他のeasingについては、YAHOO.util.EasingのAPIドキュメントを参照。