トランジション

NarraLeaf-Reactでは、トランジションは舞台上の変化をアニメーションさせます。キャラクターの立ち絵の切り替え、背景の変更、シーンジャンプなどです。

立ち絵や背景のトランジションは、置き換えられる画像そのものの上で再生されます。シーンジャンプのトランジションは、舞台全体で再生され、その間は両方のシーンが同時に画面上に存在します。どちらも同じトランジションを使用します。

エンジンとパターン

トランジションAPIは、変化がどう再生されるかと変化がどんな形を取るかを分離しています。

• エンジンはトランジションのクラスです。newでインスタンス化し、どのエンジンも1つのオプションオブジェクトを受け取ります。new Dissolve({ duration: 500 })
• パターンは幾何形状です。Maskの静的ファクトリーで構築し、マスク駆動のエンジンのpatternオプションに渡します。パターンは単なる値であり、newでインスタンス化することはありません。

したがって、トランジションは「エンジン(アニメーション)」のように読めます。エンジンがピクセルの変化のしかたを決め、パターンがそのエンジンが再生するアニメーションになります。

import { Reveal, ThroughColor, Mask } from "narraleaf-react";

// 時計の掃引でそのまま次の画像を見せる
image.char("image1.jpg", new Reveal({ duration: 1200, pattern: Mask.clock() }));

// 同じ形状だが、黒のホールドを経由する
image.char("image1.jpg", new ThroughColor({ duration: 1800, pattern: Mask.clock() }));

例

import { Dissolve } from "narraleaf-react";

image.char("image1.jpg", new Dissolve({ duration: 3000, easing: "linear" }));

組み込みのトランジション

画像のトランジション

• Dissolve - 2つの画像をクロスフェードする
• Fade In - 次の画像をフェードインさせる。ピクセルオフセットからの移動を伴わせることもできる
• Blur Dissolve - ぼかしを経由してクロスフェードする
• Push - 次の画像をスライドインさせながら、現在の画像をスライドアウトさせる
• Darkness - 次の画像を暗闇から立ち上げる、または暗闇へ落とし込む
• Reveal - 任意のマスクパターンでそのまま次の画像を見せる
• Rule Reveal - グレースケールのルール画像が指定する順序で次の画像を見せる
• Through Color - 色で覆い、保持したのち、次の画像で覆いを外す
• Exposure - 段階的に画面を白へ焼き切り、次の画像を戻す

マスクパターン

• Mask - RevealとThrough Colorが共有するパターンの語彙。ワイプ、観音開き、アイリス、時計、扇、ブラインド、ドット、さらにMask.invertと手書きのカスタムパターン