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

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

---

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

onComplete(終了時に動作)

最後に、onCompleteイベントを紹介します。これはアニメーション後に動作します。 アニメーションが終了したタイミングで、次の動作を自動的に行うことができるようになります。 下記のサンプルでは、 クリックするとフェイドアウト後、onCompleteイベントが動作して、文字列を出力します。

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

<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){
    //インスタンスを作成
    var myAnim = new YAHOO.util.Anim(
      id, { opacity : { from:1,to:0 } } ,0.8
    );

    //対象要素の初期化
    var el = myAnim.getEl();
    el.innerHTML='';

    //onCompleteイベントのセット
    myAnim.onComplete.subscribe(function (){
         //最後にこのダイアログが表示されます
         alert('消えましたね');
    });   

    //実行
    myAnim.animate();
}
</script>

<style>
#test1{width:120px;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>

次に、onComplete後、連続して次のアニメーションを動作させてみます。

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

<script type="text/javascript">

function chgWH(id){

    //アニメインスタンス1を作成
    var myAnim1 = new YAHOO.util.Anim(
      id, { width : { from:5,to:20,unit:'em' } } ,0.8
    );
    //アニメインスタンス2を作成
    var myAnim2 = new YAHOO.util.Anim(
      id, { height : { from:20,to:200,unit:'px' } } ,0.8
    );

    //onCompleteイベントのセット
    myAnim1.onComplete.subscribe(function (){
         myAnim2.animate();//次に、インスタンスmyAnim2を実行
    });   

    //実行
    myAnim1.animate();//まず、インスタンスmyAnim1を実行
}

</script>

<style>
#test2{ width:5em;height:20px;background-color:orange}
</style>

<div id="test2"><span>幅と高さ</span></div>
<br>
<form>
<input type="button" 
    value="幅と高さが変化します" 
    onclick="chgWH('test2')">
</form>

今回はアニメーション用の簡単なイベントについてまとめてみましたが、 次回は、YUIが用意したイベントの中から、もうひとつだけ、 アニメーション時に便利でクロスブラウザなaddListenerを使ってみます。