アニメーション処理を行なう部分ではエレメントをどのような動きで移動させるかを指定することができます。YAHOO.util.Motion()の場合は4番目のパラメータで指定することができます。
動きの指定はYAHOO.util.Easingオブジェクト内で定義されており以下のものが定義されています。
| YAHOO.util.Easing.easeNone |
| YAHOO.util.Easing.easeIn |
| YAHOO.util.Easing.easeOut |
| YAHOO.util.Easing.easeBoth |
| YAHOO.util.Easing.easeInStrong |
| YAHOO.util.Easing.easeOutStrong |
| YAHOO.util.Easing.easeBothStrong |
| YAHOO.util.Easing.elasticIn |
| YAHOO.util.Easing.elasticOut |
| YAHOO.util.Easing.elasticBoth |
| YAHOO.util.Easing.backIn |
| YAHOO.util.Easing.backOut |
| YAHOO.util.Easing.backBoth |
| YAHOO.util.Easing.bounceIn |
| YAHOO.util.Easing.bounceOut |
| YAHOO.util.Easing.bounceBoth |
これをYAHOO.util.Motion()の4番目のパラメータに指定することでざまざまな動きを行なわせることができます。
実際のサンプルは以下のようになります（サンプル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"><!--
function moveContents(){
var mObj = new YAHOO.util.Motion("contents", {
points: { from:[500, 150], to : [ 30, 100] }
}, 0.5,
YAHOO.util.Easing.backIn);
mObj.animate();
}
// --></script>
</head>
<body>
<h1>動きの方法を指定します</h1>
<form>
<input type="button" value="移動" onClick="moveContents()">
</form>
<div id="contents">ここが移動します</div>
</body>
</html>
YAHOO.util.Easing.〜は与えられたパラメータに従って計算した値を返すだけの関数です。例えばYAHOO.util.Easing.easeNoneでは以下のように関数が定義されています。
function (t, b, c, d) {
return c*t/d + b;
}
関数に渡されるパラメータは4つあり「現在の時間」「開始値」「開始値と終了値の差」「合計のアニメーションの長さ」になっています。これらの値を元にして自作の関数を作成すれば、独自の動きを行なわせることができます。
実際のサンプルは以下のようになります（手抜きなので、ガタガタと動くだけです）。（サンプル02を実行する）
【サンプル02】
function moveContents(){
var mObj = new YAHOO.util.Motion("contents", {
points: { to : [ 0, 0] }
}, 0.5, myEaseFunc);
mObj.animate();
}
function myEaseFunc(t,b,c,d){
return Math.sin(t)*10;
}
[
目次へ]