There is an animation in iOS that is simple to use, but can achieve a lot of interesting effects, and that is mask animation.

If you don’t already know mask animation, you can learn it after reading this series. If you’ve already used it, this article will help you sort it out and make it easier to use.

To begin this three-part series, let’s first clarify what a mask is.

First, what is mask

Mask is a UIView or CALayer property that determines what part of the view or layer we can see.

This article focuses on the View and its Mask property for convenience.

The iOS description of masks is not particularly intuitive to many people, so before Posting the definition, let’s try to look at it visually.

First, let’s take a look at this graph:

As is shown in the picture, there is a round hole in a piece of paper, and the paper covers the picture on the left. Part of the picture shows through this hole, just like a window on the wall, allowing us to see part of the landscape.

Loosely speaking, the black paper in the middle is the mask, which determines which part of the view is visible to us.

However, this diagram can mislead us into thinking that the mask is blocking the view, which is not the case. Let’s take a look at this:

Mask only affects which part of the frontView can be seen by us. It has no effect on the backView. The mask looks more like a clipping of the View.

The above two images don’t fit the iOS description of masks, but they should give us an idea of the statement that “masks determine what part of the view we see.”

Next, let’s take a look at the iOS description of masks.

Mask in iOS

Let’s first look at iOS’s definition of a MASK for UIView:

var mask: UIView? { get set }
Copy the code

You can see that the mask of UIView is actually another UIView.

Take a look at this brief description:

An optional view whose alpha channel is used to mask a view’s content.

The alpha channel of the mask is used to determine the content of the view.

Let’s look at the detailed description:

Discussion

The view’s alpha channel determines how much of the view’s content and background shows through. Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content.

Fully or opaque pixels allow the underlying content to show through. Opaque parts of the mask (including translucent parts, which we’ll see later) allow views to pass through.

“Opaque part, let the view through”, this sentence may sound a little confusing, we still use the picture to express, we first according to this description, modify the previous picture, as follows:

In the mask (which is essentially a view), only the middle circle is colored (black) and the rest is transparent. When it acts as a mask for the view on the left, only circles with color (i.e., opacity) in the center will allow the view to pass through.

This is why some people find the description of mask not very intuitive, after all, we subconsciously think that the transparent part can only see through what is behind.

In fact, it is easy to understand that the opaque part of the mask is only a description of the window area, not the window itself. When it is used as a mask for the view, the opaque part of the mask (be it solid color, image, video, etc.) will be used as a window area and the view will be allowed to pass through it when it is actually rendered.

For convenience, in the above figure, I used the same size for view and mask, but actually the frame of mask is not important. Which parts of the view can be displayed only in the opaque area of the mask, regardless of the frame of the mask.

For example, the effect in the following picture is the same as the one above:

Note: The frame of the mask is based on the coordinate system of the view (similar to the frame of the subView of the view)

We know the meaning of mask, so how to use mask, very simple, is to assign a view to another view’s mask attribute.

For example, we could write code like this:

// backView
backView.frame = UIScreen.main.bounds
view.addSubview(backView)

// frontView
frontView.frame = UIScreen.main.bounds
view.addSubview(frontView)

/ / round window
let mask = CircleView()
mask.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
mask.center = CGPoint(x: frontView.bounds.midX, y: frontView.bounds.midY)
frontView.mask = mask
Copy the code

Note: The backgroundColor of the mask must be set to the color (any color will do), not clearColor, otherwise the mask will not work.

At this point, we almost have an understanding of iOS masks. In this series of articles, Windows are used to refer to masks for descriptive purposes, and views are used to refer to views associated with masks.

So next, we will simply look at a window, a simple example of scenery, to open the idea, the idea of opening, the effect of the subsequent article is easy to achieve.

3. Simple examples of Windows and views

Take a look at the window first.

As we already know, the mask of a view is also a view. Since there are various styles of views, the styles of Windows are also various.

For example, if we use a UIButton as the mask of the previous image view, the title of the button naturally becomes the text window, as shown in the picture below:

The schematic code is as follows:

/ / picture
frontView.frame = UIScreen.main.bounds
view.addSubview(frontView)

/ / window text
let mask = UIButton(type: .custom)
mask.setTitle("Ke suck".for: .normal) mask.titleLabel? .font =UIFont.systemFont(ofSize: 100)
mask.frame = CGRect(x: 0, y: 0, width: 300, height: 200)
mask.center = CGPoint(x: frontView.bounds.midX, y: frontView.bounds.midY)
frontView.mask = mask
Copy the code

Now let’s look at the scenery.

A view is also a view, which can be a solid color, a picture, a GIF, a video, etc. In this example, we use a gradient animated View as the scene and a circular window, which looks something like this:

Since the background is a gradient animation, this GIF better shows the effect:

The schematic code is as follows:

// Gradient animation scene
frontView.frame = UIScreen.main.bounds
view.addSubview(frontView)
// Perform the animation
frontView.start()

/ / round window
let mask = CircleView()
mask.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
mask.center = CGPoint(x: frontView.bounds.midX, y: frontView.bounds.midY)
frontView.mask = mask
Copy the code

As some of you may have already thought, the combination of the above text window and gradient scene is a good effect. Yes, it forms a dynamic gradient text effect, as shown in the following GIF:

The schematic code is as follows:

// Gradient animation scene
frontView.frame = UIScreen.main.bounds
view.addSubview(frontView)
// Perform the animation
frontView.start()

/ / window text
let mask = UIButton(type: .custom)
mask.setTitle("Ke suck".for: .normal) mask.titleLabel? .font =UIFont.systemFont(ofSize: 100)
mask.frame = CGRect(x: 0, y: 0, width: 300, height: 200)
mask.center = CGPoint(x: frontView.bounds.midX, y: frontView.bounds.midY)
frontView.mask = mask
Copy the code

Examples cited here, we will understand, as long as the selection of Windows with a wider view of the idea, mask animation effects are diverse.

Those of you who are careful remember that we left a tail at the front, and I quote from the previous words:

4. Fully or partially opaque pixels allow the underlying content to show through. We’ll look at this later), you can let the view pass through.

Because completely opaque masks are easier to understand (that is, the opaque area is cut out as a window), completely opaque masks are used as examples in the previous articles.

At this point, we have no problem understanding semi-transparent masks, so let’s add semi-transparent masks.

Four, translucent mask

Now, as you can see, the opacity of the mask describes the area of the window, and the semi-transparency of the mask describes the transparency of the window.

The area of mask is completely opaque, so the window is completely transparent and the view can be fully penetrated. The area of mask is translucent, the window is translucent, and the view can be blurred through. The transparency of the mask is inversely proportional to the transparency of the window.

Let’s look at it with a common practice example.

For example, sometimes we have a half-screen tableView whose top is no longer at the top of the screen, but in the middle of the screen (such as the chat area in the studio). In this case, the cell slides up out of the tableView, and halfway through, the edges of the tableView become obvious because only half the cell is displayed. As shown below:

We want to make the edges less obvious and have a fade out effect. If we use a mask, we just have a vertical gradient view as the mask.

Note: Mask is the superView mask of the tableView (you can create a superView of the same size as the tableView)

The top of the mask gradually transitioned to transparent, correspondingly, the window gradually transitioned to opaque, and the top of the tableView seemed to fade out, as shown below:

The schematic code is as follows:

// Table scene (tableContainer)
let tableContainer = UIView(a)let bounds = UIScreen.main.bounds
let gradientHeight: CGFloat = 20.0
tableContainer.frame = CGRect(x: 0, y: bounds.midY, width: bounds.width / 2, height: bounds.height / 2)
view.addSubview(tableContainer)
tableView.frame = tableContainer.bounds
tableContainer.addSubview(tableView)

// Translucent gradient window
let mask = GradientView()
mask.frame = tableContainer.bounds
mask.gradientLayer.startPoint = CGPoint(x: 0, y: 1)
mask.gradientLayer.endPoint = CGPoint(x: 0, y: 0)
mask.colors = [.white, .white, UIColor.white.withAlphaComponent(0)]
mask.locations = [0.1 - Double(gradientHeight / tableContainer.bounds.height), 1]
// As a tableContainer mask instead of a tableView
tableContainer.mask = mask
Copy the code

Translucent mask we will talk about this first, the following article, we are mainly opaque mask.

The end of the

So far, we have enough understanding of mask, but also opened a little window and scene thinking; In the following article, we will take a look at the various ways to play mask.

The complete code for all of this article’s examples is available in the GitHub repository.

Thanks for reading, and we’ll see you in the next article.

portal

  • Making library
  • IOS Animation – Windows Part 2
  • IOS Animation – Window View (3 · End)