CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

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

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

イベント名 説明
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()

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

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

もっと読む

著者プロフィール

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5