Fooling around with masks & shadows in SwiftUI
Dive into the technical world of SwiftUI where masks meet shadows. Learn how to creatively manipulate visual elements for stunning interfaces with our comprehensive tutorial, featuring easy-to-follow examples
Masks are a fun thing. No, not these masks, although they do seem fun too. No, rendering masks. The kind you find in Photoshop, Blender, Maya, and Final Cut Pro. What is a mask? It's a way to edit an image using another image.
One example would be masking an image with some text, giving that text a dashing style.
Paul Hudson twostraws
But we can't do much more. SwiftUI masking takes into account the alpha of the masking view, allowing us to "cut" and "punch through" our views to reveal what's underneath (basically, the reverse of what Paul did in the link above), and render it in real-time at runtime. Allowing us to do this:
Now, there is a cost to playing around with masks and shadows. A rendering cost. Often in the form of off-screen rendering. That is, views rendered only as intermediate steps, and discarded without ever being shown, in computing the actual final rendering of the view that will end up being displayed. This can occur, for example, when drawing shadows, hence the strong suggestion to use shadowPaths.
Angel G. Olloqui
Offscreen rendering can take a toll on a device, and lead to stuttering, frame drops, and overall poor performance. Especially when using table views, collection views, lazy stacks and lazy grids.
It also occurs when using masks. And here, we're using both masks and shadows. So keep that in mind when using what we'll learn here today.
