Dojo道場 ～ 第5回「アニメーションを使いこなす」
dojo.Animationモジュール

「Dojo道場」～実用アプリ構築のためのベストプラクティス

アニメーションイベントを使いこなす

　アニメーションには各種イベントが用意されており、コールバック関数を登録することで、アニメーション中のさまざまなステージに任意の処理を追加できます。用意されているイベントは以下のようになります。

イベント名	説明
beforeBegin	アニメーション開始直前に呼ばれる。イベント引数としてアニメーション対象のdomNodeへの参照を受け取る
onBegin	アニメーション開始直後に呼ばれる。イベント引数として、アニメーション中に変化させている変数の現在値を受け取る
onEnd	アニメーション終了直後に呼ばれる。引数としてアニメーション対象のdomNodeへの参照を受け取る
onAnimate	アニメーションの各ステップで呼び出される。イベント引数として、アニメーション中に変化させている変数の現在値を受け取る
onPlay	playメソッド呼び出し時に呼ばれる。イベント引数として、アニメーション中に変化させている変数の現在値を受け取る
onPause	pauseメソッド呼び出し時に呼ばれる。イベント引数として、アニメーション中に変化させている変数の現在値を受け取る
onStop	stopメソッド呼び出し時に呼ばれる。イベント引数として、アニメーション中に変化させている変数の現在値を受け取る

　イベントへのコールバック関数の登録には2つ方法があり、Animationオブジェクト生成時の引数として渡す方法か、生成されたAnimationオブジェクトにdojo.connectでコネクトする方法です。以下に、それぞれの方法でコールバック関数を登録する例を示します。

//単一のアニメーションのインスタンス化時にコールバックを登録
var animation = dojo.fx.wipeIn({
	node: "targetId",
	beforeBegin: function(node) {
		//アニメーション開始前の処理を記述
	},
	onEnd: function(node) {
		//アニメーション終了後の処理を記述
	}
});
animation.play();

//chainやcombineしたアニメーションにdojo.connectでコールバックを登録
var animation = dojo.fx.chain([
     	dojo.fx.wipeIn({
      		node: "targetId1"
      	}),
      	dojo.fx.wipeIn({
      		node: "targetId2"
      	})
   ]);
   dojo.connect(animation, "onEnd", function() {
	//連続実行した全てアニメーション終了後の処理を記述
});
animation.play();

dojo.animatePropertyを使いこなす

　これまでは、dojoにデフォルトで用意されたアニメーションを単一、もしくは組み合わせて利用してきました。dojo.animatePropertyは、ユーザーが自分で新しいアニメーションを定義するために用意された関数です。具体的には、数値をもつ任意のCSSスタイルを、徐々に変化させることができます。まずは簡単な例をお見せします。

var animation = dojo.animateProperty({
	  node:"targetId",
	  properties: {
	      width: 300, //（1）
	      height: { end: 400, start:100 }, //（2）
	      fontSize: { end:14, units:"pt" } //（3）
	  }
});
animation.play()

　dojo.animatePropertyはアニメーションオブジェクトを生成し、また引数も、基本的にはdojo.fadeInなど他のアニメーション生成関数と同様です。異なる点は、propertiesというパラメーター追加されていることです。このpropertiesに変化させたいCSSスタイル名、その開始値（optional）、終了値（required）、単位（optional）を指定します。

　例の（1）では対象のオブジェクトの現在のwidthから、300pxまで変化させるアニメーションを定義しています。単位であるpxは、デフォルトの単位なので省略できます。

　（2）では、heightを400pxから100pxに変化させています。

　（3）では、フォントサイズを、現在の値から14ptまで変化させてます。フォントサイズの単位はpxではなくptのため、unitsとして明示的に単位を指定しています。

　これら3つのCSSは、dojo.fx.combineのように同時に変化します。また、各propertiesの値を関数として定義することもできます。次の例では、現在のwidthからその2倍のwidthへと変化させるアニメーションを定義しています。

var animation = dojo.animateProperty({
	  node:"targetId",
	  properties: {
	      width: function(node) {
                  return {end: dojo.marginBox(node).w * 2}
              }
	  }
});
animation.play()