トランジションについて

ページ

ここまで、各レイヤは fore と back の2つのページを持っていると解説してきましたが、ページはトランジションのための機能です。

fore ページは「現在表示されている部分」です。今までのサンプルスクリプトで行ってきたように、テキストや画像を fore ページに描画すると、それはそのままユーザの目に見える状態となります。

back ページは「トランジションを行うと表示されることになる部分」です。逆にいえば、back ページに対してテキストや画像を描画しても、それだけではユーザの目には見えません。

トランジションは、back ページに描画した内容を、特定の方法を用いて、fore ページに移し替える機能と定義することができます。

トランジションの基本

トランジションを行うには、[trans]タグを使用します。

以下は、もっとも単純なトランジションの一例です。

上の例では、まず base レイヤの fore ページに、red という画像ファイルを描画しています。これにより、red という画像が表示されます。

さらに、同じ base レイヤの back ページに、blue という画像ファイルを描画していますが、これは back ページへの描画であるため、画面上には変化は起こりません。

その上で[trans]タグを上のように記述することによって、全レイヤの back ページの内容を、1000ミリ秒をかけながら、crossfade という方法で fore ページに移し替えることができます。ユーザの目には、red という画像が1秒かけてクロスフェードしながら徐々に blue という画像に移り変わっていくように見えます。

トランジションの作法

このように、まず表示させたい画像を back ページに描画し、その後[trans]タグを使うというのがトランジションの基本的な流れとなります。

しかし仕様上の制限により、実際にトランジションを行うときには、以下のような作法を用いて行うことを強く推奨します。

1. 現在の fore ページの内容を back ページへと複製する

[backlay]タグを用いて、現在の fore ページにある内容を back ページへと複製します。

これは全レイヤを対象にして行われます。つまり、このタグの実行直後は、base レイヤから message1 レイヤに至るまで、全レイヤの fore ページと back ページの内容が一致します。

2. トランジションで表示したい画像を、目的のレイヤの back ページへ描画する

[image]タグを用いて、これから行うトランジションで表示したい画像を、目的のレイヤの back ページへ描画します。

3. トランジションを行う

[trans]タグを用いて、実際にトランジションを行います。

トランジションは、原則として全レイヤが対象となります。

今回の例では、トランジションによって表示したい画像は base レイヤ上にあり、他のレイヤのトランジションを同時に行うと不都合があるように思えますが、実際には[backlay]タグによって base レイヤ以外の fore ページと back ページの内容は一致していますから、トランジション前とトランジション後の状態が等しいことになります。

つまり、base レイヤ以外は、トランジションが行われても画面上の変化は起こらないことになり、見た目の上では、base レイヤのみがトランジションされたような結果を得ることができます。

4. トランジションの終了を待つ

[trans]タグによってトランジションを開始しても、O₂ Engine はそのトランジションの終了を待たずに次の行へとコンテンツの再生を進めてしまいます。[wt]タグを使うことによって、そのトランジションが終了するまで、次の行へとコンテンツの再生が進むことを抑制することができます。

上記サンプルスクリプトから、仮に[wt]タグを削除した場合には、トランジションが開始した瞬間に「トランジションを完了しました。」というテキストを描画してしまうなどの不都合があります。

もちろん、トランジションの終了を特に待つ必要がない場合には、[wt]タグを置かないという選択もありえます。

様々なメソッドによるトランジション

[trans]タグの method 属性に指定する値を変えることによって、様々な種類のトランジションを行うことができます。

メソッドによっては、別途属性と値を指定しなければならない場合もありますので注意してください。メソッドごとの属性と値の指定方法については、タグリファレンスの[trans]タグの項目を参照してください。

以下は、O₂ Engine がサポートしているメソッドの一覧です。

メソッド名	動作例	特徴
crossfade		back ページの画像の上に覆い被さった fore ページの画像が徐々に透明になっていく、最も一般的なトランジションです。
toss		fore ページの画像の上に、紙を覆い被せるように back ページの画像が置かれるトランジションです。
slidein		fore ページの画像がスライドして消えていき、同時に back ページの画像がスライドして現れるトランジションです。
iris		fore ページの画像の中央に穴が開き、徐々にそこから back ページの画像が現れてくるトランジションです。
fadethrough		fore ページの画像がズームインしながら透明になっていき、その後ろに back ページの画像が表示されるトランジションです。
cube		直方体に貼りつけられている fore ページの画像と back ページの画像が回転しながら交替していくトランジションです。
horizontalflip		fore ページの画像が回転しながら奥に倒れていき、そのまま back ページの画像に差し替わった状態で現れるトランジションです。
multiflip		fore ページの画像が短冊状に縦にスライスされ、くるくると回転するようにして裏側から back ページの画像が現れるトランジションです。
blindup		fore ページの画像が短冊状に横に区切られ、区切られたそれぞれの範囲において下から上へ徐々に back ページの画像へと切り替わっていくトランジションです。
blinddown		fore ページの画像が短冊状に横に区切られ、区切られたそれぞれの範囲において上から下へ徐々に back ページの画像へと切り替わっていくトランジションです。
universal	（省略）	このトランジションには、別途ルール画像を用意する必要があります。 まず、rule 属性で指定した画像をルール画像として読み込み、ルール画像とトランジション対象のレイヤを重ねあわせて、ルール画像において最も黒いピクセルにあたる部分から最も白いピクセルにあたる部分までを順に、time 属性で指定した時間をかけて、fore ページの画像から back ページの画像へと切り換えていきます。

crossfade を除くトランジションは、ブラウザの種類によっては正常に動作しません。アクセスしているブラウザが指定されたメソッドのトランジションに対応していない場合、O₂ Engine は自動的に crossfade メソッドに切り換えてそのトランジションを実行します。

以下に、各ブラウザのトランジション対応状況を記します（2013年4月6日現在。ブラウザのバージョンは動作環境に記したものとし、端末の処理性能は十分であるとする）。

	Chrome (Win/Mac)	Firefox (Win/Mac)	Safari (Mac/iOS)	IE (Win)	Chrome (Android)
crossfade	○	○	○	○	○
toss	○	○	○	-	○
slidein	○	○	○	○	○
iris	○	-	○	-	○
fadethrough	○	○	○	-	○
cube	○	○	○	-	○
horizontalflip	○	○	○	-	○
multiflip	○	△	○	-	○
blindup	○	○	○	○	○
blinddown	○	○	○	○	○
universal	○	○	○	△	○

○:動作する／△:動作するが非推奨／-:動作しないので crossfade で代補する

Copyright©2012-2013 Gengosha Inc. all rights reserved.