[Core Animation] Layer Masking for beginners

4 min readMay 23, 2018

--

Little theory

We know that it is possible to clip a layer’s contents to its bounds using the masksToBounds property. Also, we can give layer rounded corners using the cornerRadius property.

Clip layer’s contents using `cornerRadius` property

Another example is using the masksToBounds property. If this property set to false, we could have something like this.

For clipping a layer’s contents to its bounds we need to set true value for masksToBounds property. It will look like this.

Clip layer’s contents using `masksToBounds` property

Sometimes we have a situation when we need to represent some content that is not rectangular. For example, you want to create a photo frame around an image with a custom shape. Another example, you might want the edges of some image to fade gracefully instead of clipping to a sharp edge.

The simplest way to create a non-rectangular view is to use a PNG image with an alpha component as backing image that includes an alpha mask. But we have some problems. How to clip images dynamically using programmatically generated masks? Also, how to have sublayers or subviews that also clip to the same arbitrary shape. So, do you have any ideas to solve these problems?

CALayer has a property called mask. The mask property is also a CALayer. It has all the same drawing and layout properties of any other layer. Mask layer located relative to its parent. It is used in a similar way to a sublayer, but it does not appear as a normal sublayer. Instead of being drawn inside the parent, the mask layer defines the part of the parent layer that is visible.

The color of the mask layer no object. We are interested only in its shape and alpha mask. If the mask layer is smaller than the parent layer, only the parts of the parent that intersect the mask will be visible. You need to know that, if you are using a mask layer, anything outside of that layer will be hidden.

Little practice

We are going to create a simple project that masks one image with another using the layer mask property. It works like this:

Create a masked image by combining image and mask layers

Example 1.

In our example we have a simple image:

Also, mask looks like this:

We want to create a masked image by combining image and mask layers.

Clip layer’s contents using a mask image

Also, you can see programming code.

Example 2.

Another example is clipping image using some shape.

Clip layer’s contents using shape layer as a mask

And what about programming code?

Example 3.

We might want the edges of some image to fade gracefully instead of clipping to a sharp edge.

Create fade-out effect using gradient layer as a mask

Simple code example.

Example 4.

And what about some challenge?

Clip layer’s contents using shape and gradient layers as a mask

Look at the code below. We use CAShapeLayer and CAGradientLayer as a mask.

You might have noticed that the killer feature of CALayer masking is that you are not limited to using static images for your masks. Anything that can be made up of layers can be used as the mask property.

Summary

To sum up, mask is an optional layer whose alpha channel is used to mask the parent layer’s content.

Thanks for reading! I hope this information was useful for you. Please don’t forget to 💚 if you found this article useful.