Animating Motion

Ajax YUI Anim

YAHOO.util.Motionは、要素をスムーズに移動させるためのオブジェクト。

Exampleのページにある例がつまらないので、調査もかねて、ちょっと変えてみた。
YAHOO.util.Motionオブジェクトを使うには、「移動目的地」をあらわすattributesオブジェクトを

    var attributes = {
        points: { to: [x, y] }
    };

のように定義するが、このxは動かす要素の左上の点（left,top）をあらわしている。
X=0とすれば、bodyにたいして、margin=0,padding=0（つまり、leftが0）を目標にする。
それを確認するのが、実行1と実行2のボタン。

また、x,yには負の数字を入れることができる。
動かす要素は40px×40pxの矩形だが、x=-40、y=-40とすることで、完全にbodyから外に出すことができる。これを確認するのが、実行3のボタン。

<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;
    height:40px;
    width:40px;
}
</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() {

//  1.
//  動いていくポイント（TO）属性の定義
    var attributes = {
        points: { to: [600, 0] }
    };
    var anim = new YAHOO.util.Motion('demo', attributes);

 // YAHOO.util.ColorAnimのインスタンス化
    YAHOO.util.Event.on('demo-run', 'click', function() {
        anim.animate();
    });

//  2.
//  動いていくポイント（TO）属性の定義
    var attributes1 = {
        points: { to: [0, 200] }
    };
    var anim1 = new YAHOO.util.Motion('demo', attributes1);

 // YAHOO.util.ColorAnimのインスタンス化
    YAHOO.util.Event.on('demo-run1', 'click', function() {
        anim1.animate();
    });

//  3.
//  動いていくポイント（TO）属性の定義
    var attributes2 = {
        points: { to: [-40, -40] }
    };
    var anim2 = new YAHOO.util.Motion('demo', attributes2);

 // YAHOO.util.ColorAnimのインスタンス化
    YAHOO.util.Event.on('demo-run2', 'click', function() {
        anim2.animate();
    });
   
}
</script>
</HEAD>

<BODY onload=init()>
<p>
<div id="demo">デモ</div>
</p>
<p>
<button id="demo-run">実行1</button>
<button id="demo-run1">実行2</button>
<button id="demo-run2">実行3</button>
</p>
<p>
矩形を元に戻すには、画面を更新してください。
</p>

</BODY>
</HTML>

画面イメージ（実行前）は以下のようになる。