Animating Motion Along The Curved Path

Ajax YUI Anim

この例は、div要素の矩形に「変わった動き」を与えるやり方を示している。

このために、YAHOO.util.Motionオブジェクトに与える属性オブジェクト(attributes）にcontrol pointという座標を定義する。
そのためには、attributeオブジェクトを

    var attributes = {
		points: { to: [x,y], 
        control: [ [x1, y1], [x2, y2], … ] }
    };

のように書く。control pointは複数の指定が可能とのこと。

Exampleのページの例は面白味に欠けるので、ここでも、ちょっと変えてみる。

contorol pointにでたらめな座標を記入して、div要素が元の位置に戻るように変えてみた。

<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() {

// 元の位置の記憶
	var aPos = YAHOO.util.Dom.getXY('demo');
	
// 変化する色属性の定義
    var attributes = {
		// 元の位置に戻ってくる。
		points: { to: [aPos[0],aPos[0]], 
        control: [ [0, 200], [1500, 500], [aPos[0],aPos[0]],
                   [-40,-40], [300,300] ] }
    };

// YAHOO.util.Motionのインスタンス化と実行
    var anim = new YAHOO.util.Motion('demo', attributes);
    YAHOO.util.Event.on('demo-run', 'click', function() {
        anim.animate();
    });
	
}
</script>
</HEAD>

<BODY onload=init()>
<p>
<div id="demo">デモ</div>
</p>
<p>
<button id="demo-run">実行</button>
</p>

</BODY>
</HTML>

これを動かしてみると、control pointがでたらめなのにもかかわらず（負の値を入れてもエラーにならない）、とてもスムーズな動きをすることがわかる。
これは、このExampleのページに

the points attribute (an array of [x, y] positions), with the point we are animating to, and the control points that will influence the path

と書かれているように、control pointが、「そこを通る」という意味ではなく、「カーブの軌跡に影響を及ぼす」ものだからである。
これは、これらのパラメータを使うsmoothing関数が与えられているということを示していて、こういった関数には、control pointとの距離（どれだけ、control pointのそばを通るか）を規定するパラメータが別途あるはずだが、調べずにおしまい。