CodeZine(コードジン)

特集ページ一覧

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

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

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

 では、dojo.animatePropertyと3章で紹介したアニメーションイベントを利用し、実際に役に立ちそうなサンプルアプリケーションを作成してみましょう。ここでは、選挙の投票結果を表示するアプリケーションを作ってみます。今回はテーブルとして、候補者名、得票数、得票数のグラフを表示し、それぞれに対して以下のようなアニメーションを実装してみます。

アニメーション 説明
候補者名 最初の500msは何も表示されず、残りの1500msで徐々にフェードインし、最終的には、当選者の名前を赤字Boldで“候補者名(win!)“と表示する。
得票数 +,*,-を繰り返し表示し得票数がアニメーション中はわからないようにし、最終的には、得票数が表示されるようにする
得票数グラフ バーチャートが徐々に伸びてゆく

 コードは以下のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>Animation Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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";

table {
    width: 400px;
    border: 1px #E3E3E3 solid;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

th {
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}

td {
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    padding-left: 5px;
    text-align: left;
}

.chart {
	border: none;
	background-color: blue;
	height: 10px;
}

</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() {

//候補者と得票数のデータを定義。得票数でソート済みとする
	var json = [
	    {name:"太郎", value:57},
	    {name:"次郎", value:33},
	    {name:"三郎", value:20},
	    {name:"四郎", value:8}
	];

//バーチャートと得票数のアニメーションを定義
	function animateBarChart(target, score, max) {
		var scoreNode = target.parentNode.previousSibling;
		var barWidth = 100 * score / max;
		return dojo.animateProperty({
			  node:target,
			  duration: 1500,
			  properties: {
			      width: { start:1, end:barWidth }
			  },
			  onAnimate: function(values) {
				  if (scoreNode.innerHTML == "+") {
					  scoreNode.innerHTML = "*";
				  } else if (scoreNode.innerHTML == "*") {
					  scoreNode.innerHTML = "-";
				  } else {
					  scoreNode.innerHTML = "+";
				  }
			  },
			  onEnd: function(node) {
				  scoreNode.innerHTML = score + "票";
			  }
		});
	}

//候補者名
	function animateCandidateName(target, name, winner) {
		return dojo.animateProperty({
			node:target,
			delay: 500,
			duration: 1000,
			properties: {
				opacity: { start:0, end:1 }
			},
			onBegin: function(values) {
				target.innerHTML = name;
			},
			onEnd: function(node) {
				if (winner) {
					dojo.style(node, "color", "red");
					dojo.style(node, "fontWeight", "bold");
					node.innerHTML += "(WIN!)";
				}
			}
		});
	}

//jsonからテーブルの行を生成。
	var tbody = dojo.byId("result");
	var animations = [];
	for (var i=0; i<json.length; i++) {
		var tr = dojo.create("tr", {}, tbody);
		var name = dojo.create("td", {}, tr);
		var score = dojo.create("td", {}, tr);
		var chart = dojo.create("div", {className:"chart"}, dojo.create("td", {}, tr));

		var animation = dojo.fx.combine([
			animateBarChart(chart, json[i].value, json[0].value),
			animateCandidateName(name, json[i].name, i==0)
		]);
		animations.push(animation);
	}

	dojo.fx.combine(animations).play();
});

</script>
</head>

<body class="claro">
<h1>投票結果</h1>

<table>
	<thead>
		<tr><th>候補者</th><th colspan="2">投票数</th></tr>
	</thead>
	<tbody id="result">
	</tbody>
</table>

</body>

</html>

 dojo.addOnLoadの中身に注目してください。まず、jsonとして候補者名とその得票数の一覧を定義しまいます。addOnLoadの後半で、このjsonからテーブルの行を動的に生成しています。

 animateBarChart関数では、dojo.animatePropertyを利用して、バーチャートのwidthを1から得票数を表す長さ(100 * score / max)まで変化させるアニメーションを定義しています。また同時に、onAnimate関数で得票数を+,*,-を連続で表示させるようにし、onEnd関数で、最終的に得票数を表示するようにしています。

 同様に、animateCandidateName関数では、dojo.animatePropertyを利用して、opacityの値を0から1へ変化させることで、候補者名をフェードインさせています。ここではonBeginで初めて候補者名をinnerHTMLにセットすることで、delayでしていした最初の500msは何も表示されないようにしています。そして、onEndで、当選者の場合にスタイルを変化させ“(WIN!)“という文字列を追加するようにしています。

 各行ごとに、animateBarChartとanimateCandidateNameで作成したアニメーションをdojo.fx.combineし、各行のアニメーションをさらにdojo.fx.combineすることで、得票結果のテーブル全体を同時にアニメーションさせています。

実行結果
実行結果

Dojox.fx

 これまでは、dojoパッケージに含まれるアニメーションを紹介して来ましたが、最後に、dojox.fxパッケージに含まれるものも少し紹介しておきます。dojox.fxには、役立つアニメーションの実験的な実装が多数用意されています。例えば、dojox.fx.sizeTo(オブジェクトのwidthとheightを変化させる)や、dojox.fx.highlight(オブジェクトを点滅させる)など、他にもアニメーション生成関数が多数用意されています。また、アニメーションを利用した面白いウィジェットも多数用意されています。以下のページに機能紹介があるので、参考にされると良いと思います。

まとめ

 この記事では、デフォルトのアニメーションの使い方、その組み合わせ方、アニメーションイベント、そして独自のアニメーションを定義する方法を解説しました。これらの機能は既存のDojoフレームワーク中でも既に使われているため、安心して利用することができます。例えば、ダイアログはツールチップの表示・非表示ではフェードイン、フェードアウトが使われています。また、トースター(画面右端にメール着信をみせるために出る小さなWindowとしてよく利用されるもの)では、dojo.fx.slideToが利用されています。

 このように、ちょっとしたアニメーション効果を追加することで、Webアプリケーションを、まるでネイティブのリッチアプリケーションのような機能を持たせることもできるので、ぜひ色々活用してみてください。



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

バックナンバー

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

もっと読む

著者プロフィール

あなたにオススメ

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