Spry prerelease 1.3から各種エフェクトが追加されました。エフェクトのベースとしてはscript.aculo.usを参考にしているようです。
このためSpryエフェクトの指定方法はscript.aculo.usと、ほぼ同じです。パラメータが異なるのは仕方ないところですが、script.aculo.usを使ったことがあるのであれば、すぐに使うことができるでしょう。
最初にフェード処理を行ってみます。まず、エフェクト対象になるオブジェクトにID名を指定しておきます。指定したID名をSpry.Effect.AppearFade()の最初のパラメータに指定します。以下のサンプルではボックスをクリックするとボックスがフェードインします。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#ff4;
border:1px solid black;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("myBox").onclick = function() {
Spry.Effect.AppearFade("myBox");
}
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<div id="myBox">Spryエフェクト<br>サンプル</div>
</body>
</html>
Spry.Effect.AppearFade()のパラメータにはID名だけでなくthisを指定することもできます。このthisを指定する方が汎用性も高く手軽です。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#ff4;
border:1px solid black;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("myBox").onclick = function() {
Spry.Effect.AppearFade(
this);
}
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<div id="myBox">Spryエフェクト<br>サンプル</div>
</body>
</html>
フェードインするまでの時間などはSpry.Effect.AppearFade()の二番目のパラメータにプロパティリストの形で指定します。時間を指定するプロパティ名はdurationです。指定する値はフェードインするまでのミリ秒になります。以下のサンプルでは4000を指定しているので4秒でフェードインすることになります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#ff4;
border:1px solid black;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("myBox").onclick = function() {
Spry.Effect.AppearFade(this,
{ duration: 4000 });
}
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<div id="myBox">Spryエフェクト<br>サンプル</div>
</body>
</html>
フェードする時の不透明度、フェード終了時の不透明度を指定することもできます。
これらもSpry.Effect.AppearFade()の二番目のパラメータにプロパティリストの１つとして指定します。開始時の不透明はfrom、終了時の不透明度はtoで指定します。指定する数値は0〜100までのパーセント指定になります。
以下のサンプルは20%から60%で不透明度を変化させます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#ff4;
border:1px solid black;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("myBox").onclick = function() {
Spry.Effect.AppearFade(this, { duration: 1000,
from: 20, to: 60 });
}
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<div id="myBox">Spryエフェクト<br>サンプル</div>
</body>
</html>
一度フェードインした後に、元に戻すこともできます。この場合もSpry.Effect.AppearFade()の二番目のパラメータにプロパティリストの形で指定します。toggleの値でtrueまたはfalseを指定できます。falseを指定すると元に戻らず、trueを指定すると元の状態に復帰するようになります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#ff4;
border:1px solid black;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("myBox").onclick = function() {
Spry.Effect.AppearFade(this, { duration: 1000, from: 0, to: 100,
toggle: true });
}
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<div id="myBox">Spryエフェクト<br>サンプル</div>
</body>
</html>
フェード開始処理時、終了処理時に特定の処理を呼び出すことができます。
この指定もSpry.Effect.AppearFade()の二番目のパラメータにプロパティリストの形で指定します。開始時はsetup、終了時はfinishプロパティに実行する処理を指定します。
以下のサンプルはフェード終了時にendFunc関数を呼び出します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#ff4;
border:1px solid black;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("myBox").onclick = function() {
Spry.Effect.AppearFade(this, { duration: 1000, from: 0, to: 100, toggle: true,
finish:endFunc });
}
}
function endFunc() {
alert("フェード処理終了");
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<div id="myBox">Spryエフェクト<br>サンプル</div>
</body>
</html>
[
目次へ]
(2006.8.13)