では、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パッケージに含まれるものも少し紹介しておきます。ｄojox.fxには、役立つアニメーションの実験的な実装が多数用意されています。例えば、dojox.fx.sizeTo（オブジェクトのwidthとheightを変化させる）や、dojox.fx.highlight（オブジェクトを点滅させる）など、他にもアニメーション生成関数が多数用意されています。また、アニメーションを利用した面白いウィジェットも多数用意されています。以下のページに機能紹介があるので、参考にされると良いと思います。
まとめ
この記事では、デフォルトのアニメーションの使い方、その組み合わせ方、アニメーションイベント、そして独自のアニメーションを定義する方法を解説しました。これらの機能は既存のDojoフレームワーク中でも既に使われているため、安心して利用することができます。例えば、ダイアログはツールチップの表示・非表示ではフェードイン、フェードアウトが使われています。また、トースター（画面右端にメール着信をみせるために出る小さなWindowとしてよく利用されるもの）では、dojo.fx.slideToが利用されています。
このように、ちょっとしたアニメーション効果を追加することで、Webアプリケーションを、まるでネイティブのリッチアプリケーションのような機能を持たせることもできるので、ぜひ色々活用してみてください。
