Animation

サイトのナビゲーション通りに進み、いよいよYahooアニメーション(Animation)のサンプリングに入る。

AnimationのトップページのGetting Startedをみると、以下のjsファイルを読み込めと書いてある。

<!-- Dependencies -->
<script src="scripts/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript">
</script>

<!-- Source file -->
<script src="scripts/animation/animation-min.js" type="text/javascript">
</script>

ただし、HttpServerのドキュメント・ルート/scriptsに、配布モジュールのbuild下が配置されていると仮定。

Domのところでも、このページは概略の説明だったから、サンプリングは簡単に読み飛ばしていくことにする。

Animationオブジェクトの基本形は、

<div id="test"></div>

<script>
// <span style="color:#0000CC;">id="test"要素に対して、Animationを定義</span>する。
// この際、幅は400(px)まで、durationは1sec、終末処理（easing method)=easeOutを指定。
var myAnim = new YAHOO.util.Anim('test', {width: { to: 400 }}, 
                                 1, 
                                 YAHOO.util.Easing.easeOut);
// Animation実行
myAnim.animate();

</script>

という感じになる。

同じことが、Animの違うコンストラクタを使い

var myAnim = new YAHOO.util.Anim('test');
myAnim.attributes.width = { to: 400 };
myAnim.duration = 0.5;
myAnim.method = YAHOO.util.Easing.easeOut;

myAnim.animate();

ともかけるらしい。

var attributes = {
   width: { to: 400 },
   height: { to: 400 }
};

var myAnim = new YAHOO.util.Anim('test', attributes);
myAnim.animate();

とかかれる、属性オブジェクト（上の例では、attributes)は、width, height, opacity, top, left, borderWidth, padding, marginなどと数字の組み合わせだが、to: xxxx、by: xxxxとか書かれるのが普通で、これは、Animationが、現在の姿からの変化を表すことが多いからとのこと。なるほど。

だが、場合によっては、

var attributes = {
   width: { from: 10, by: 200 },
   height: { from: 10, by: 200 }
};

var myAnim = new YAHOO.util.Anim('test', attributes);
myAnim.animate();

と、fromの指定もできるらしい。

また、通常は、指定する幅や高さの単位はpixだが、

var attributes = {
   width: { from: 1, to: 20, unit: 'em' },
   height: { from: 1, to: 20, unit: 'em' }
};

var myAnim = new YAHOO.util.Anim('test', attributes);
myAnim.animate();

と、unitを指定して単位を変えることもできると書いてある。（emは１文字をあらわす単位）

大事そうなのが、イベントに関する記述で、Animationユーティリティーには、

• onStart
• onTween
• onComplete

のイベントにハンドラーをsubscribeできると書いてある。ここで挙げられている例は、

// イベントハンドラー（Animation終了後に設定される）
var removeElement = function() {
   // this.getEl()でイベントの発生した要素（id=test）を取得。引数が分かりずらい。
   var el = this.getEl();
   // イベントの発生した親ノードより、イベントを発生した要素を除去。
   el.parentNode.removeChild(el);
}

var myAnim = new YAHOO.util.Anim('test', { 
	  height: {to: 10} 
	}, 1, YAHOO.util.Easing.easeOut);

// Animation終了後のイベントとして、removeElementをsubscribe.
myAnim.onComplete.subscribe(removeElement);

myAnim.animate();

のように、Animation後に、それが発生した要素を削除するものが挙げられている。

このあとは、Animのサブクラスの

• ColorAnim
• Motion
• Scroll

が例示されているが、Exempleの方にありそうなので、目を通すのみとする。