トランジション
これまでのビジュアルフィルタは、静的に特殊な描画処理を施すフィルタが中心でしたが、時間経過と共に徐々に変化させる特殊なフィルタがあります。これをトランジションと呼びます。トランジションフィルタを使うことで、画面切り替えのアニメーションがブラウザ上で行われるため、ゲームで利用できる効果的な演出を簡単に実現することができます。
トランジションフィルタには、BlendTransフィルタとRevealTransフィルタの2種類が用意されています。BlendTransフィルタは、オブジェクトを透明化させながら徐々にフェードイン・フェードアウトさせる基本的なトランジションフィルタです。
BlendTrans(Duration=duration)
durationには、トランジションが終了するまでの処理時間を浮動少数点型の秒単位で指定します。小数点以下がミリ秒となります。例えば、durationに1を指定した場合、1秒間かけてオブジェクトがフェードイン・フェードアウトされます。ただし、トランジションは単純なフィルタのような静的な画像変換ではないため、スクリプトからトランジションの適用と実行を指示しなければなりません。
トランジションフィルタをスクリプトから起動させるには、まずトランジションフィルタのオブジェクトを取得しなければなりません。フィルタオブジェクトは、HTMLの要素オブジェクトが公開しているfiltersコレクションから取得できます。
object.filters([index])
indexには、取得するフィルタのインデックスを指定します。配列のインデックスと同様に、オブジェクトに指定されている先頭のフィルタを取得するには0を、次のフィルタならば1を、という形で指定します。トランジションフィルタが適用されている要素オブジェクトのfiltersコレクションから、フィルタオブジェクト取得できれば、処理を起動させることができます。
まず、指定したトランジションフィルタを有効にするためにApply()メソッドを呼び出します。Apply()メソッドが呼び出されると、オブジェクトは視覚的な情報の更新を停止させます。トランジションフィルタは、オブジェクトの現在の状態から新しい状態に遷移させるものなので、最初にオブジェクトの視覚的な状態を保存しなければならないのです。
object.Apply()
Apply()を呼び出した後でオブジェクトを変更しても再描画はされなくなります。しかし、内部の状態を変更することは可能なので、この間にオブジェクトのプロパティを変更します。オブジェクトの変更が終わった時点でPlay()メソッドを呼び出せば、トランザクションフィルタの働きによって古い状態から新しい状態に視覚的なフェードイン・フェードアウト処理が行われるでしょう。
object.Play(duration)
durationには、フィルタの実行時間を浮動小数点数型で指定します。これはBlendTransのDurationプロパティと同じものです。フィルタオブジェクトで指定されているDurationパラメータに従う場合はdurationは省略してください。Play()メソッドでdurationを指定した場合はフィルタのDurationパラメータが無視されます。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=shift_jis">
<title>サンプル 03</title>
<script language="javascript">
var changed = false;
function img_click() {
img.style.filter = "BlendTrans(Duration=1)";
img.filters(0).Apply()
if (changed) img.src = "back00.jpg";
else img.src = "back01.jpg"
changed = !changed;
img.filters(0).Play()
}
</script>
</head>
<body>
<h1>サンプルプログラム 03</h1>
<p>イメージをクリックしてください</p>
<img src="back00.jpg" id="img" onClick="img_click()">
</body>
</html>
このHTML文書を開いて、表示されたイメージをクリックしてください。イメージは異なるイメージに向かってフェードイン・フェードアウトします。クリックイベントが発生するとBlendTransフィルタを設定してトランジションフィルタを実行させています。最初にApply()メソッドを呼び出してオブジェクトにフィルタを適用し、一時的に再描画を停止させます。その間にsrcプロパティを更新してIMG要素オブジェクトのイメージを更新します。本来ならばこの時点でIMG要素オブジェクトのイメージが切り替わって再描画されてしまいますが、Apply()メソッドの効果で再描画は行われません。その後、Play()メソッドを呼び出してトランジションフィルタを再生すると、フェード処理が行われてイメージが切り替わります。
もうひとつ、トランジションフィルタにはRevealTransフィルタがあります。処理方法は同じですが、オブジェクトの切り替わり方が異なります。
RevealTrans(Duration=duration, Transition=transitionshape)
durationは、BlendTransフィルタと同様にトランジションが終了するまでの処理時間を指定します。transitionshapeには、どのようにトランジションを行うかを表す0～23までの整数を指定します。指定した値によって、オブジェクトに対するトランジションが変化します。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=shift_jis">
<title>サンプル 04</title>
<script language="javascript">
var changed = false;
function img_click() {
img.style.filter =
"RevealTrans(Duration=1, Transition=" + transNum.value + ")";
img.filters(0).Apply()
if (changed) img.src = "back00.jpg";
else img.src = "back01.jpg"
changed = !changed;
img.filters(0).Play()
}
</script>
</head>
<body>
<h1>サンプルプログラム 04</h1>
<p>トランジションを選択して、イメージをクリックしてください</p>
<p><select id="transNum">
<option value="0">0 Box in</option>
<option value="1">1 Box out</option>
<option value="2">2 Circle in</option>
<option value="3">3 Circle out</option>
<option value="4">4 Wipe up</option>
<option value="5">5 Wipe down</option>
<option value="6">6 Wipe right</option>
<option value="7">7 Wipe left</option>
<option value="8">8 Virtical blinds</option>
<option value="9">9 Horizontal blinds</option>
<option value="10">10 Checkerboard across</option>
<option value="11">11 Checkerboard down</option>
<option value="12">12 Random dissolve</option>
<option value="13">13 Split vertical in</option>
<option value="14">14 Split vertical out</option>
<option value="15">15 Split horizontal in</option>
<option value="16">16 Split horizontal out</option>
<option value="17">17 Strips left down</option>
<option value="18">18 Strips left up</option>
<option value="19">19 Strips right down</option>
<option value="20">20 Strips right up</option>
<option value="21">21 Random bars horizontal</option>
<option value="22">22 Random bars vertical</option>
<option value="23">23 Random</option>
</select></p>
<img src="back00.jpg" id="img" onClick="img_click()">
</body>
</html>
このHTML文書を開いて、表示されている選択リストから実行したいトランジション番号を選択してイメージをクリックしてください。それぞれ、トランジション番号に従った処理が実行されます。ボックスやワイプによるイメージの切り替えはプレゼンテーションやゲームでは一般的に使われている方法なので、さまざまな場面で応用することができるでしょう。ただし、あまり無意味な乱用は操作性を悪くしてしまうので、ゲームで利用する場合はユーザーが処理を省略できるような仕組みを作るべきです。
トランジションを行っている状態でも、フィルタオブジェクトに対してStop()メソッドを呼び出すことで終了することができます。
object.Stop()
