トランジションについて

ページ

ここまで、各レイヤは 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]タグによってトランジションを開始しても、novelsphere.js はそのトランジションの終了を待たずに次の行へとコンテンツの再生を進めてしまいます。[wt]タグを使うことによって、そのトランジションが終了するまで、次の行へとコンテンツの再生が進むことを抑制することができます。

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

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

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

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

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

以下は、novelsphere.js がサポートしているメソッドの一覧です。

メソッド名	動作例	特徴
crossfade		back ページの画像の上に覆い被さった fore ページの画像が徐々に透明になっていく、最も一般的なトランジションです。
scroll		fore ページの画像がスライドして消えていき、同時に back ページの画像がスライドして現れるトランジションです。
universal	（省略）	このトランジションには、別途ルール画像を用意する必要があります。 まず、rule 属性で指定した画像をルール画像として読み込み、ルール画像とトランジション対象のレイヤを重ねあわせて、ルール画像において最も黒いピクセルにあたる部分から最も白いピクセルにあたる部分までを順に、time 属性で指定した時間をかけて、fore ページの画像から back ページの画像へと切り換えていきます。

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

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

	Chrome (Win/Mac)	Firefox (Win/Mac)	Safari (Mac/iOS)	IE (Win)	Chrome (Android)
crossfade	○	○	○	○	○
scroll	○	○	○	○	○
universal	○	○	○	△	○

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

トランジション拡張プラグイン

ver.2 から、標準で使用できるトランジションは crossfade、scroll および universal のみとなりましたが、プラグインを使うことによって、ver.1 と同様、様々なトランジションを使用することができます。

プラグインの使い方については「プラグインリファレンス」の「トランジション拡張プラグイン (extrans.js)」を参照してください。