今回はトランジションフィルタについて学んで行きましょう。
トランジション（時間的変遷）とは？・・・ビジュアルのある状態から他の状態へ時間とともに変化するフィルタである。トランジションフィルタを使用する際は、変化にかかる時間を指示すること。また適用できるオブジェクトは一般的なHTMLエレメントである。前回の【予習】でも紹介しました。もう一度MSDNの説明を見てみましょう。
Applyメソッドでは、トランジションが最初に適用されるコントロールの視覚的な外観をフリーズさせる。これにより再描画は行われなくなるが、内部的な変更は続く。Playメソッドは、トランジションを実行する。スクリプトは、どんなときでも"追跡を終了する"ことができ、Stopメソッドを呼び出してトランジションを終了できる。
エレメントにトランジションフィルタを付加するのは、CSSあるいはスクリプトで行える。但し付加しただけではなんら変化をもたらさない。実際にフィルタを動作させるには、まずApply()メソッドで適用を促す。これによりフィルタは発動するが、視覚的には凍結状態となる。以後停止または再生開始されるまで、エレメントに変更を行っても見た目は変化しなくなる。但し内部的には変更は行われている。なるほど、ひとたびトランジション再生（Play()メソッド）が開始されると、そのトランジション種類効果を伴って内部変更後の状態に移行する。
では実験的なサンプルをご覧ください。
サンプル１はrevealトランジションで、トランジション効果のタイプは23(transition=23、ランダム）です。当然ながらきちんと動作しますね。apply()で凍結後、枠と画像ファイルを変更し、play()で再生しています。
サンプル２はサンプル１とほとんど同じですが、トランジション再生中にLEFTを変更しています。うまく動いているようです。
更に次の実験をお試しください。
実験
・・・いろいろボタンを押してみてね。ボタン５で見かけ上凍結させ、ボタン１〜ボタン４で現在の状態を変更、その後ボタン６で再生してみてください。
また再生中にいろんなボタンを押して動作を確認してみてください。
ではトランジションフィルタのちょっぴりリファレンス〜〜
Revealトランジションフィルタ
パラメータ 解説 duration トランジションが終了するまでの時間。値は浮動小数点で、秒.ミリ秒(0.000)と記述する。 transitionshape トランジションの状態 (Revealトランジションのみ)。0から23までの整数を指定する。指定した値でトランジションの状態が決まる。
トランジションの型 値 Box in 0 Box out 1 Circle in 2 Circle out 3 Wipe up 4 Wipe down 5 Wipe right 6 Wipe left 7 Vertical blinds 8 Horizontal blinds 9 Checkerboard across 10 Checkerboard down 11 Random dissolve 12 Split vertical in 13 Split vertical out 14 Split horizontal in 15 Split horizontal out 16 Strips left down 17 Strips left up 18 Strips right down 19 Strips right up 20 Random bars horizontal 21 Random bars vertical 22 Random 23
Script・・・一般のビジュアルフィルタやDirectXフィルタと同様である。フィルタコレクション(filters)の要素にもなる。プロパティ・メソッド・イベントも持つ。
| プロパティ |
説明 |
| Duration | トランジションが終了するまでのデフォルト時間を設定する。aplly()またはplay()時には読み込み専用となる。 |
| Status | トランジションの現在の状態を返す。整数値。読み込み専用で、0 (終了)、1 (適用中）、2 (実行中)の値を返す。 |
| enabled | フィルタの使用/不使用を指定する。フィルタの使用（true）と不使用（false）の論理値。プロパティは読み込み/書き込みが可能。 |
|
transition |
Revealトランジションのタイプを設定・または読み出す。 |
| メソッド |
|
| Apply() | 指定されたオブジェクトにトランジションを適用する。 |
| Play(sTime) | トランジションを実行する。sTimeは再生時間。秒.ミリ秒（s.mmm)・・・3.500は3秒500ミリ秒。 |
| Stop() | トランジションを実行する。 Onfilterchangeイベントを発生する。 |
| イベント |
|
| Onfilterchange | ビジュアル フィルタの状態が変更したり、トランジションが終了したときに発生する。 |
尚、経過時間設定はDurationプロパティで行うが、Play(dur)でも可能である。この場合Durationプロパティの値は無視される。
例）object.filters["Revealtrans"].play(5)
後述します。
Blendトランジションフィルタ
パラメータ 解説 duration トランジションが終了するまでの時間。値はfloat型で、秒.ミリ秒(0.000)と記述する。
後述します。
IE5.5以降のトランジションフィルタ
filtername
DXImageTransform.Microsoft.Fade・・・blendTransフィルタに相当する。
revealTransフィルタに相当するものは前回の講座を参照ください。
メソッド・イベントはほぼ同じ。プロパティ/属性は種類によっていくつか存在する。
後述します。
MetaCreationsフィルタ（トランジション）内容は前回の講座を参照ください。
メソッド・プロパティ・イベントはほぼ同じ（僕には不明なプロパティがあります）。
具体的・基本的使用例の解説をします。
【１】エレメントにトランジションフィルタを設定する。
<Element STYLE="filter: filtername(sProperties)">・・・インラインスタイルシート
object.style,filter="filtername(sProperties)"・・・スクリプト
【２】トランジションフィルタを適用する（Apply()メソッド）。
object.filters["filtername"].apply()・・・スクリプト。フィルタコレクションのフィルタ名でインデックスを指定していますが、ビジュアルフィルタと同様にフィルタのインデックス番号で指定したり、サブオブジェクトで指定することもできます。
object.filters[0].apply()やobject.filters.revealtrans.appy()
【３】エレメントを変化させる。
object.Property=★・・・スクリプトでsrcやスタイル変更など。
【４】トランジションフィルタを再生する（Play()メソッド）。
object.filters["filtername"].play()・・・スクリプト
ではRevealtrasフィルタから
【１】エレメントにトランジションフィルタを設定する。
<img id="img1" src="aki1.jpg" style="position:absolute; left:10px; top:10px; border:green 20px dotted; width:225px; height:156px; filter:revealTrans(duration=8,transition=23)">
【２】トランジションフィルタを適用する（Apply()メソッド）。
img1.filters["revealTrans"].apply()
【３】エレメントを変化させる。
img1.src="aki2.jpg"・・・ファイル変更
img1.style.border="red
20px dashed"・・・枠線スタイルを変更
【４】トランジションフィルタを再生する（Play()メソッド）。
setTimeout("img1.filters.revealTrans.play()",5000)・・・setTimeout()メソッドで時間を空けて実行。
setTimeout("img1.filters[0].play(),5000)やsetTimeout("img1.filters["revealTrans"].play(),5000)でもOK。
[ソース]
<HTML>
<head>
<meta http-equiv="content-type"
content="text/html; charset=shift_jis">
<META http-equiv="Content-Style-Type"
content="text/css">
<title></title>
</head>
<body
style="margin:0px; padding:0px;">
<img id="img1"
src="aki1.jpg" style="position:absolute; left:10px; top:10px;
border:green 20px dotted; width:225px; height:156px; filter:revealTrans(duration=8,transition=23)">
<script>
img1.filters.revealTrans.transition=23//この設定をしないと繰り返しでランダムにならない。
img1.filters["revealTrans"].apply()
img1.src="aki2.jpg"
img1.style.border="red
20px dashed"
setTimeout("img1.filters.revealTrans.play()",5000)
</script>
</body>
</html>
次はBlendTransフィルタ。
【１】エレメントにトランジションフィルタを設定する。
<img id="img1" src="aki1.jpg" style="position:absolute; left:10px; top:10px; border:green 20px dotted; width:225px; height:156px; filter:blendTrans(duration=8)">
【２】トランジションフィルタを適用する（Apply()メソッド）。
img1.filters["blendTrans"].apply()
【３】エレメントを変化させる。
img1.src="aki2.jpg"・・・ファイル変更
img1.style.border="red
20px dashed"・・・枠線スタイルを変更
【４】トランジションフィルタを再生する（Play()メソッド）。
setTimeout("img1.filters.blendTrans.play()",5000)・・・setTimeout()メソッドで時間を空けて実行。
setTimeout("img1.filters[0].play(),5000)やsetTimeout("img1.filters["blendTrans"].play(),5000)でもOK。
[ソース]
<HTML>
<head>
<meta http-equiv="content-type"
content="text/html; charset=shift_jis">
<META http-equiv="Content-Style-Type"
content="text/css">
<title></title>
</head>
<body
style="margin:0px; padding:0px;">
<img id="img1"
src="aki1.jpg" style="position:absolute; left:10px; top:10px;
border:green 20px dotted; width:225px; height:156px; filter:blendTrans(duration=8,transition=23)">
<script>
img1.filters["blendTrans"].apply()
img1.src="aki2.jpg"
img1.style.border="red
20px dashed"
setTimeout("img1.filters.blendTrans.play()",5000)
</script>
</body>
</html>
次はIE5.5以降のDirectX系トランジションフィルタ。種類が多いので、ここではSplit vertical in（Barn Filter）を。これらトランジションフィルタはblendTransやrevealTransよりもプロパティが多い。
Barn Filterのプロパティ一例 motionプロパティ・・・in or out。効果の方向。
Orientationプロパティ・・・horizontal or vertical.。フィルタ効果が水平であるか、または垂直であるかを示す値。
【１】エレメントにトランジションフィルタを設定する。
<img id="img1" src="aki1.jpg" style="position:absolute; left:10px; top:10px; border:green 20px dotted; width:225px; height:156px; filter:progid:DXImageTransform.Microsoft.Barn(orientation=horizontal, motion=out,duration=8)">
【２】トランジションフィルタを適用する（Apply()メソッド）。
img1.filters["DXImageTransform.Microsoft.Barn"].apply()
【３】エレメントを変化させる。
img1.src="aki2.jpg"・・・ファイル変更
img1.style.border="red
20px dashed"・・・枠線スタイルを変更
【４】トランジションフィルタを再生する（Play()メソッド）。
setTimeout("img1.filters['DXImageTransform.Microsoft.Barn'].play()",5000)・・・setTimeout()メソッドで時間を空けて実行。
setTimeout("img1.filters[0].play(),5000)はOKだが、setTimeout("img1.filters.DXImageTransform.Microsoft.Barn.play(),5000)はNG。
[ソース]
<HTML>
<head>
<meta http-equiv="content-type"
content="text/html; charset=shift_jis">
<META http-equiv="Content-Style-Type"
content="text/css">
<title></title>
</head>
<body
style="margin:0px; padding:0px;">
<img id="img1" src="aki1.jpg"
style="position:absolute; left:10px; top:10px; border:green 20px dotted;
width:225px; height:156px; filter:progid:DXImageTransform.Microsoft.Barn(orientation=horizontal, motion=out,duration=8)">
<script>
img1.filters["blendTrans"].apply()
img1.src="aki2.jpg"
img1.style.border="red
20px dashed"
setTimeout("img1.filters['progid:DXImageTransform.Microsoft.Barn'].play()",5000)
</script>
</body>
</html>
最後にMetaCreationsフィルタ（DirectX 2D)
このMetaCreationsフィルタの場合はCopyrightを効果の種類に合わせて正しく設定しなければなりません（前回講座）。
【１】エレメントにトランジションフィルタを設定する。Copyrightの設定も忘れずに。
<img id="img1" src="aki1.jpg" style="position:absolute; left:10px; top:10px; border:green 20px dotted; width:225px; height:156px; filter:progid:DXImageTransform.MetaCreations.ColorFade(duration=8)">
img1.filters["DXImageTransform.MetaCreations.ColorFade"].Copyright="Copyright MetaCreations Corp. 1998. Unauthorized duplication of this string is illegal. {2A54C908-07AA-11D2-8D6D-00C04F8EF8E0}"・・・スクリプト。スペース不足でも正常にならないので注意！！
【２】トランジションフィルタを適用する（Apply()メソッド）。
img1.filters["DXImageTransform.MetaCreations.ColorFade"].apply()
【３】エレメントを変化させる。
img1.src="aki2.jpg"・・・ファイル変更
img1.style.border="red
20px dashed"・・・枠線スタイルを変更
【４】トランジションフィルタを再生する（Play()メソッド）。
setTimeout("img1.filters['DXImageTransform.MetaCreations.ColorFade'].play()",5000)・・・setTimeout()メソッドで時間を空けて実行。
setTimeout("img1.filters[0].play(),5000)はOKだが、setTimeout("img1.filters.DXImageTransform.MetaCreations.ColorFade.play(),5000)はNG。
[ソース]
<HTML>
<head>
<meta http-equiv="content-type"
content="text/html; charset=shift_jis">
<META http-equiv="Content-Style-Type"
content="text/css">
<title></title>
</head>
<body
style="margin:0px; padding:0px;">
<img id="img1" src="aki1.jpg"
style="position:absolute; left:10px; top:10px; border:green 20px dotted;
width:225px; height:156px; filter:progid:DXImageTransform.MetaCreations.ColorFade(duration=8)">
<script>
img1.filters["DXImageTransform.MetaCreations.ColorFade"].Copyright="Copyright
MetaCreations Corp. 1998. Unauthorized duplication of this string is illegal.
{2A54C908-07AA-11D2-8D6D-00C04F8EF8E0}"
img1.filters["DXImageTransform.MetaCreations.ColorFade"].apply()
img1.src="aki2.jpg"
img1.style.border="red
20px dashed"
setTimeout("img1.filters['DXImageTransform.MetaCreations.ColorFade'].play()",5000)
</script>
</body>
</html>
基本的な使い方はお分かりでしょうか？
トランジションといえばスライドショー！！ということで次回はスライドショーを作ってみましょう。