【Javascript】YUI アニメーション-簡単なEvent

YUI アニメーション-簡単なEvent

---

1: onStart(スタート時に動作)
2: onTween(アニメーション中に動作)
3: onComplete(終了時に動作)

前回に引き続き、YUIアニメーションの 使い方を試します。

今回は、YUIアニメーションで使える簡単なイベントです。 YUIでは、クロスブラウザなイベント処理が用意されていて詳細は後日紹介しようと思いますが、 ここでは、主に、アニメーションを利用したときに便利なイベントを3つ紹介します。

onStart(スタート時に動作)、onTween(アニメーション中に動作)、onComplete(終了時に動作)です。

(*今回からは、YUIのバージョン2.2.1を利用します。 YUIダウンロード )

onStart(スタート時に動作)

onStartイベントは、名前の通り、アニメーションがスタートするときに動作します。 とりあえず、簡単なサンプルを見てみます。 クリックするとonStartイベントが動作して「スタートします」というダイアログが表示されてから、透明化フェイドアウトします。

このコードは次の通りです。

<script type="text/javascript"
        src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" 
        src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" 
        src="../../build/event/event-min.js"></script>
<script type="text/javascript" 
        src="../../build/dom/dom-min.js"></script>

<script type="text/javascript">
function chgOpa1(id){

    //onStart時に動作する関数
    var chgMsg = function() {   
      alert('スタートします')
    }

    var myAnim = new YAHOO.util.Anim(
      id, { opacity : { from:1,to:0 } } ,0.8
    );

    //onStartイベントのセット
    myAnim.onStart.subscribe(chgMsg);
    myAnim.animate();
}
</script>

<style>
#test1{ width:15em;height:120px;background-color:#888}
</style>

<div id="test1"><span style="width:15em">フェイドアウトします</span></div>
<br>
<form>
<input type="button" 
    value="フェイドアウトします" 
    onclick="chgOpa1('test1')">
</form>

このフェイドアウトのスクリプト部分は、前回の ものと同じですが、そこに「myAnim.onStart.subscribe(chgMsg);」というメソッドを追加で記述してあり、引数で渡されている「chgMsg」関数が onStartイベント時に動作する関数となっています。

ちなみに、このコードは、関数chgMsgを作らずに、次のようにシンプルに、いきなり引数として直接匿名関数を書いて渡すことも可能です。

<script type="text/javascript">
function chgOpa1(id){
    var myAnim = new YAHOO.util.Anim(
      id, { opacity : { from:1,to:0 } } ,0.8
    );
    myAnim.onStart.subscribe(function() {   
      alert('スタートします')
    });
    myAnim.animate();
}
</script>

次ページはonTween(アニメーション中に動作)です。