画面遷移を単純なフェードにすると、前画面と次画面のつながりが弱く見えることがあります。
そこで、遷移前の画面を一時的に画像として保持し、次の画面の上に重ねて円形マスクで広げる方法を紹介します。
👇サンプルサイト
👇サイトに対して実装する場合
サイトに対して実装する場合は、遷移元と遷移先の両方に
<script src="https://uni928.github.io/Uni928PublicHTMLs/Plugin/plugin10.js"></script>
をなるべく上(headを閉じる直前)に入れれば動作します。
なお、メモリが少ないと判断された場合は通常遷移します。
基本の流れ
- 現在の画面を画像として保存
- 次の画面を生成・読み込み
- 保存した画像を画面全体に重ねる
- 画面全体に重ねたものをキャラクター位置などを中心に円形表示
- 円が画面全体に広がったら、保存画像を削除
実装時の注意点
キャプチャ画像は画面サイズに合わせて作成し、遷移完了後に必ず破棄します。
また、次画面の読み込みに時間がかかる場合は、ローディング画面への遷移と、ローディング画面から出る時の遷移に使用します。
まとめ
「前画面を画像として保持し、次画面を円形マスクで表示する」ことで、黒い画面を経由しない印象的な画面遷移を実現できます。
画面遷移処理をこのように汎用化しておくと、迷路やゲームだけでなく、Webページ、設定画面、詳細画面、モーダル表示などにも応用できます。