CodeZine(コードジン)

特集ページ一覧

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

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

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

複数のアニメーションを使いこなす

 デフォルトで用意されたアニメーションを利用するだけでも十分ですが、これらを複数組み合わせることで、新しいアニメーションを作成することもできます。具体的には以下の関数が用意されています。

関数 説明
dojo.fx.Toggler(/*Object*/ args) オブジェクトの表示・非表示アニメーションを簡単に制御するためのTogglerオブジェクトを生成する関数。Togglerオブジェクトは、show/hideメソッドを持ち、Argsには以下のパラメータを指定する
  • node(required):アニメーション対象のノードを、domNodeへのリファレンス、もしくはdomNodeに指定されたIDの文字列で指定する
  • showFunc(optional):表示時に利用されるアニメーションを指定するデフォルトは、dojo.fadeIn
  • showDuration(optional):表示アニメーションの開始から終了までの実行時間(ms)。デフォルトでは200ms
  • hideFunc(optional):非表示に利用されるアニメーションを指定するデフォルトは、dojo.fadeOut
  • hideDuration(optional):非表示アニメーションの開始から終了までの実行時間(ms)。デフォルトでは200ms
dojo.fx.chain(/*Array*/ animations) 配列として渡された、複数のアニメーションを連続して実行するAnimationオブジェクトを生成する
dojo.fx.combine(/*Array*/ animations) 配列として渡された、複数のアニメーションを並列に実行するAnimationオブジェクトを生成する

 例えば以下のようなコードで、オブジェクトをwipeIn/OutさせるためのTogglerオブジェクトを生成、利用できます。

var toggler = new dojo.fx.Toggler({
        node: "targetId",
        showFunc: dojo.fx.wipeIn,
        showDuration: 500,
        hideFunc: dojo.fx.wipeOut,
        hideDuration: 500
});
toggler.show(); /*オブジェクトを表示する*/
toggler.hide(); /*オブジェクトを非表示にする*/

 また、chainとcombineは、複数のアニメーションを連続、または同時に実行する新しいAnimationオブジェクトを生成します。この生成されたAnimationを再度、chainとcombineの引数とすることもでき、非常に強力な機能になっています。以下に、簡単な例を示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>Animation Test</title>
<style type="text/css">
@import "../dojo-release-1.5.0/dojo/resources/dojo.css";
@import "../dojo-release-1.5.0/dijit/themes/claro/claro.css";

#box {
	border: 1px solid black;
	background-color: blue;
	width: 100px;
	height: 100px;
}
</style>

<script type="text/javascript" src="../dojo-release-1.5.0/dojo/dojo.js" djConfig="parseOnLoad: true">
</script>

<script type="text/javascript">
dojo.require("dojo.fx");

dojo.addOnLoad(function() {
dojo.style("box", "opacity", "0");

// オブジェクトをフェードインして表示させた後、画面下へオブジェクトを移動する
	var chain = dojo.fx.chain([
   		dojo.fadeIn({
   			node: "box",
   			duration: 1000,
   		}),
   		dojo.fx.slideTo({
   			node: "box",
   			duration: 1000,
   			left: 0,
   			top: 250
   		})
	]);
	
// オブジェクトを画面右に移動させながら、オブジェクトをフェードアウトして非表示にする
	var combine = dojo.fx.combine([
		dojo.fadeOut({
			node: "box",
			duration: 1000,
		}),
		dojo.fx.slideTo({
			node: "box",
			duration: 1000,
			left: 500,
			top: 100
		})
	]);

//2つのchainとcombineしたアニメーションを、さらに連続実行させる
	var animation = dojo.fx.chain([chain, combine]);
	animation.play();
});

</script>
</head>

<body class="claro">
<h1>青い箱がフェードインして移動し、移動しながらフェードアウトして消えます</h1>

<div id="box">
</div>

</body>

</html>

 まず、変数chainに、オブジェクトをフェードインアニメーションで表示し、その後、画面下方へとオブジェクトを移動するアニメーションをdojo.fx.chainで生成します。次に、変数combineに、画面右上へとオブジェクトを移動しながら、徐々にフェードアウトさせるアニメーションをdojo.fx.combineで生成します。最後に、生成された2つのchainとcombineアニメーションオブジェクトを、再度dojo.fx.chainで連続実行させています。では早速実行してみましょう。青い箱がフェードインして表示され、下方に移動、その後右上に移動しながらフェードアウトして消えるアニメーションが表示されるはずです。

実行結果(アニメーション中の画像をキャプチャしています)
実行結果(アニメーション中の画像をキャプチャしています)

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

バックナンバー

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

もっと読む

著者プロフィール

あなたにオススメ

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