Yahoo UI Library「アニメーション処理」

Yahoo UI Libraryにはページ上に表示されているエレメントを任意の位置に移動するためのアニメーション処理が用意されています。アニメーション処理は初期のバージョンから大きな変化はないため、従来のプログラムを変更することなく最新版で動かすことができます。
Yahoo UI Libraryで用意されているアニメーション処理はいくつかありますが、まず指定座標にエレメントを移動させてみましょう。指定座標にエレメントを移動させるにはnew YAHOO.util.Motion()を使います。最初のパラメータには移動させるエレメントを指定し2番目のパラメータにオプションとして座標値を指定します。
現在表示されている位置から指定した座標に移動させる場合は以下のように書きます。

{ points: { to : [ 300, 100]}}

pointsは座標点を示しており以後に指定されるパラメータで、どういう座標なのかを指定します。toが指定された場合は以後に続く[X,Y]の絶対座標にエレメントを移動させます。
これだけではエレメントは移動しません。エレメントを移動させるにはnew YAHOO.util.Motion()によって生成されたアニメーションオブジェクトのanimate()を使ってアニメーションを再生するようにします。
実際のサンプルは以下のようになります（サンプル01を実行する）。

【サンプル01】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/animation/animation-min.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<h1>指定座標まで移動させます</h1>
<form>
<input type="button" value="移動" onClick="moveContents()">
</form>
<div id="contents">ここが移動します</div>
</body>
</html>

絶対座標ではなく相対的にエレメントを移動させるにはtoではなくbyを使って指定します。byの場合も以後に続く[dx,dy]がX座標とY座標の移動量になります。
実際のサンプルは以下のようになります。（サンプル02を実行する）

【サンプル02】
var mObj = new YAHOO.util.Motion("contents", { points: { by : [ 20, 10]}});
mObj.animate();

特定の座標から座標へエレメントを移動させる場合にはfromとtoを使って開始座標点と終了座標点を指定します。
実際のサンプルは以下のようになります。（サンプル03を実行する）

【サンプル03】
var mObj = new YAHOO.util.Motion("contents", {
points: { from:[500, 150], to : [ 30, 100] }
});
mObj.animate();

アニメーションでエレメントが移動する場合の時間も指定することができます。時間の指定はYAHOO.util.Motion()の3番目のパラメータに秒数を指定します。1を指定すると1秒でアニメーションの再生が完了します。
実際のサンプルは以下のようになります。（サンプル04を実行する）

【サンプル04】
var mObj = new YAHOO.util.Motion("contents", {
points: { from:[500, 150], to : [ 30, 100] }
}, 0.5);
mObj.animate();

[目次へ]

指定座標に移動させる