複数のアニメーションを使いこなす
デフォルトで用意されたアニメーションを利用するだけでも十分ですが、これらを複数組み合わせることで、新しいアニメーションを作成することもできます。具体的には以下の関数が用意されています。
| 関数 | 説明 |
| dojo.fx.Toggler(/*Object*/ args) | オブジェクトの表示・非表示アニメーションを簡単に制御するためのTogglerオブジェクトを生成する関数。Togglerオブジェクトは、show／hideメソッドを持ち、Argsには以下のパラメータを指定する
|
| 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で連続実行させています。では早速実行してみましょう。青い箱がフェードインして表示され、下方に移動、その後右上に移動しながらフェードアウトして消えるアニメーションが表示されるはずです。
実行結果（アニメーション中の画像をキャプチャしています）
