Connecting Screen Transitions with Image Preservation and a Circular Mask

A simple fade transition can sometimes make the connection between the previous screen and the next screen feel weak.

One way to create a more seamless transition is to temporarily preserve the previous screen as an image, place it over the next screen, and gradually reveal the new screen with a circular mask.

👇 Sample site

https://uni928.github.io/Uni928PublicHTMLs/index95English.html

Basic Flow

1. Save the current screen as an image.
2. Generate and load the next screen.
3. Place the saved image over the entire screen.
4. Reveal the next screen in a circular shape centered around the character or another desired position.
5. Delete the saved image once the circle has expanded across the entire screen.

Important Implementation Notes

The captured image should be created according to the screen size and must always be discarded after the transition is complete.

If loading the next screen takes time, this transition can also be used when navigating to a loading screen and again when leaving the loading screen.

Summary

By preserving the previous screen as an image, displaying the next screen underneath it, and gradually revealing the new screen with a circular mask, you can create an engaging transition without passing through a black screen.

Once this type of screen transition has been made reusable, it can be applied not only to mazes and games, but also to web pages, settings screens, detail screens, modal windows, and many other interfaces.