Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

 本シリーズでは、豊富な機能の中から厳選した、ビジネス・アプリケーションのためのベスト・プラクティスを中心に、Dojo Toolkitの活用方法をご紹介します。連載第5回の今回は、dojo.Animationというモジュールを使い、アニメーションを作成する方法を紹介します。

目次

dojo.Animationでアニメーションを作成

 Dojo Toolkitには、フェードイン、フェードアウトといった、利用頻度の高いアニメーションを容易に実現するためのモジュールが用意されています。本稿では、これらを活用してちょっとした動きをアプリケーションに取り入れることで、アプリケーションをよりリッチなものにする方法をご紹介します。

dojo.Animationを使いこなす

 Dojoでは1つのアニメーションの動作をdojo.Animation型のオブジェクトとして扱います。具体的にはアニメーションの動作の定義をカプセル化して、実行したり、停止したりすることを可能にします。例えばフェードイン、フェードアウトといったアニメーションはそれぞれ、dojo.fadeIn, dojo.fadeOutという関数が返すdojo.Animation型のオブジェクトのplay, stopといったメソッドを実行することで実現できます。

 まずは簡単なサンプルを見てみましょう。以下のコードを実行すると、ナビゲーションメニューがフェードインされて表示されます。

<!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";

#menu ul {
	list-style: none;
	padding-left: 15px;
}

#menu li {
	width: 100px;
	padding-bottom: 2px;
	border-bottom: 3px solid blue;
	margin: 5px;
}

#menu li a {
	color: black;
	text-decoration: none;
	padding-left: 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.require("dijit.form.Button");

dojo.addOnLoad(function() {
	dojo.style("menu", "opacity", "0");
	
	var animation = dojo.fadeIn({
		node: "menu",
		duration: 1000,
		delay: 500
	});
	animation.play(); 
});

</script>
</head>

<body class="claro">
<h1>フェードインするメニュー</h1>
<div id="menu"">
<ul>
<li><a href="javascript:;">最新のニュース</a></li>
<li><a href="javascript:;">政治・経済</a></li>
<li><a href="javascript:;">文化・芸能</a></li>
<li><a href="javascript:;">気象情報</a></li>
</ul>
</div>
</body>

</html>

 dojo.addOnLoadの中身に注目してください。まず最初に、dojo.styleを利用して、id=”menu”を持つdivのopacityを0に設定しています(透明にする)。デフォルトでメニューをフェードアウトした状態にするためです(dojo.fadeIn、dojo.fadeOutは、opacityを変化させることでフェードイン、フェードアウトを実現させています)。次に、dojo.fadeIn関数を使用して、フェードインアニメーションオブジェクトを生成し、playメソッドで実行しています。fadeIn関数の引数で、メニューを含むdivをアニメーションの対象に、delayとdurationを指定することで、画面ロード後500ms後に、1秒間かけてメニューを徐々に表示させるよう指定しています。

実行結果
実行結果

 dojo.Animationには、他にも以下のようなメソッドが用意されています。

メソッド 説明
play(/*int?*/delay, /*boolean?*/gotoStart) アニメーションを開始する
  • delay:アニメーションを開始するまでの時間(ms)デフォルトは0
  • gotoStart:デフォルトはfalse。trueを指定した場合、アニメーション途中でpauseされた場合でも、最初から実行する
pause() アニメーションを一時停止する
gotoPercent(/*decima*/percent, /*boolean?*/andPlay) アニメーションの位置をパーセント指定する
  • percent:アニメーションの開始時を0終了時を1として、ジャンプ先を指定する(デフォルトではアニメーションは開始されない)
  • andPlay:デフォルトはfalse。trueの場合は指定した位置からアニメーションを開始する
stop(/*boolean?*/gotoEnd) アニメーションを停止する
  • gotoEnd:デフォルトはfalse。アニメーションは停止するがアニメーションの位置(パーセント)は保持される。trueの場合は強制的に最後まで実行されたこと(パーセントが1)になる
status() 現在のアニメーションの状態を文字列として返す("paused", "playing", "stopped")

 また、以下のフィールドが定義されています。これらのフィールドを変更することで、dojo.Animation型オブジェクトの振る舞いを変更でき、またその値を参照したりすることもできます。

フィールド 説明
duration アニメーションの開始から終了までの実行時間(ms)。デフォルトでは350ms
repeat デフォルトは0。0以上を指定した場合、指定回数分アニメーションが繰り返し実行される。-1を指定した場合、無限ループされる
rate FPS(1秒あたりの画面再描画の回数)を指定。デフォルトは20(1000 / rate = FPS)

 デフォルトで用意されているアニメーションを利用するには、サンプルのように、以下の関数を呼び出し、アニメーションオブジェクトをインスタンス化して実行します。Dojoで用意されていないアニメーションに関しても、自分で定義することが可能です。その方法についても後述します。

アニメーション 説明
dojo.fadeIn(/*Object*/ args) オブジェクトが消えた状態から、徐々に表示される(透明から徐々に色が濃くなり表示)
dojo.fadeOut(/*Object*/ args) オブジェクトが表示された状態から、徐々に消える(色が徐々に透明になって消失)
dojo.fx.wipeIn(/*Object*/ args) オブジェクトが消えた状態から、上から下へとワイプしながら表示される
dojo.fx.wipeOut(/*Object*/ args) オブジェクトが表示された状態から、下から上へとワイプしながら消える
dojo.fx.slideTo(/*Object*/ args) オブジェクトを、指定された位置へと徐々に移動する(left, topという追加パラメーターが必要)

 各関数の引数には、アニメーションに必要なパラメーターを指定したオブジェクトを渡す必要があります。以下のパラメーターは全ての関数に共通です。

パラメーター名 説明
node(required) アニメーション対象のノードを、domNodeへのリファレンス、もしくはdomNodeに指定されたIDの文字列で指定する
delay(optional) アニメーションを開始するまでの時間(ms)デフォルトは0
duration(optional) アニメーションオブジェクトの、durationフィールドの値を指定。デフォルトは350ms
easing(optional) イージング関数を指定します。詳しくは豆知識で。通常はデフォルトのままで問題ないです
rate(optional) アニメーションオブジェクトの、rateフィールドの値を指定。デフォルトとは20
repeat(optional) アニメーションオブジェクトの、repeatフィールドの値を指定。デフォルトは0
豆知識:イージング

 イージングとは、アニメーションを徐々に加速、もしくは減速させることを意味します。例えば、dojo.fx.slideToは、ある場所へとオブジェクトを徐々に移動するアニメーションですが、イージング関数を変更することで、その加速減速の制御を変更できます(例えば、最初は早く徐々に遅く移動するなど)。Dojoに用意されたイージング関数一覧は、DojoCampusおよび、”dojo\dojox\fx\tests\test_easing.html”にあるeasing関数のテストファイルを参照してください。


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

著者プロフィール

バックナンバー

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

もっと読む

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