IOS animation window view (1)

Time:2020-9-6

IOS has a kind of animation, although simple to use, but can achieve many interesting effects, that is mask animation.

If you don’t know about mask animation, you can learn it after reading this series of articles. If you have already used it, this article can help you sort it out and make it more convenient for you to use it.

This series of three articles, as the beginning of the series, we should first clarify a question: what is a mask.

1、 What is mask

Mask is an attribute of uiview or calayer, which determines theWhich part can we see

This article mainly uses view and its mask attribute for convenience.

IOS’s description of mask is not particularly intuitive for many people, so before we post the definition, let’s take a look at it intuitively.

First of all, let’s take a look at this picture

IOS animation window view (1)

As shown in the picture, there is a round hole on a piece of paper, and the paper covers the picture on the left. Part of the picture penetrates through this hole, which is like a window on the wall, so that we can see part of the scenery.

Loosely speaking, the black paper in the middle is the mask, which determines which part of the view can be seen by us.

However, this picture may mislead us and make us feel that the mask is blocking the view, which is not the case.
Let’s take a look at this picture

IOS animation window view (1)

From this picture, we can see that: frontView.mask It only affects which part of frontview can be seen by us, and has no effect on the back view.
It seems that the mask is more like a clipping of the view.

The two figures above do not conform to the IOS description of mask, but through these two pictures, we should have an intuitive impression of the sentence “mask determines which part of the view can be seen by us”.

Next, let’s take a look at the IOS description of mask.

2、 Mask in IOS

Let’s first look at the definition of the mask of uiview in IOS

var mask: UIView? { get set }

As you can see, 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.

This description points out that the alpha channel of the mask is used to determine the content display of the view, but it does not say how to decide.

Let’s take a 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.

The sentence “fully or partially opaque pixels allow the underlying content to show through” is relatively clear. The main idea is: the opaque part of the mask (including the translucent part, which we will see later) can let the view through.

The sentence “the opaque part can let the view come through” may sound a little confusing. Let’s use a diagram to show it. First, we can transform the previous picture according to this description, as follows:

IOS animation window view (1)

In the mask (which is also a view in essence), only the middle circle is colored (black), and the rest is transparent. When it is used as the mask of the left view, only the circle with color (i.e. opaque) in the middle is allowed to pass through.

This is why some people think that the description of mask is not very intuitive. After all, subconsciously, we will feel that the transparent part can pass through the things behind.

In fact, it is easy to understand that the opaque part of the mask is just a description of the window area, not the window itself. When it is used as the mask of the view, the system will take the opaque part of the mask (whether it is solid color, image or video) as the window area. When rendering, it will let the view here pass through.

For convenience, in the figure above, I use the same size for view and mask, but in fact, the frame of mask is not important. Which parts of the view can be displayed depends on the opaque area of the mask, which has nothing to do with the frame of the mask.

For example, the effect in the following figure is the same as that in the above figure:

IOS animation window view (1)

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

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

For example, we can write the code as follows:

// 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

Note: remember to set the backgroundColor of the mask (any color is OK). It cannot be clearcolor, otherwise the mask will not take effect.

So far, we have almost understood the mask of IOS.
In this series of articles, for the convenience of description, the window refers to the mask, and the scene refers to the view associated with the mask.

Then, let’s take a simple look at some simple examples of windows and landscapes to open up our ideas. As soon as the ideas are opened, the effect in the following articles will be easily realized.

3、 Simple examples of windows and landscapes

Look at the window first.

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

For example, we use a uibutton as the mask of the previous image view, and the title of the button will naturally become a text window. The effect is shown in the following figure:

IOS animation window view (1)

The schematic codes are as follows:

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

//Text window
let mask = UIButton(type: .custom)
mask.setTitle (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

Next, take a look at the scenery.

Scenery is also a view. It can be solid color, picture, moving picture, video, etc.
In this example, we use a gradient animation view as the scene, and use a circular window. The effect is shown in the following figure:

IOS animation window view (1)

Because the background is a gradient animation, the following animation can better show the effect:

IOS animation window view (1)

The schematic codes are as follows:

//Gradient animation scene
frontView.frame = UIScreen.main.bounds
view.addSubview(frontView)
//Perform 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

Maybe some students have already thought that the combination of the above text window and gradient scenery is a good effect,
Yes, this creates a dynamic gradient text effect, as shown in the following moving picture:

IOS animation window view (1)

The schematic codes are as follows:

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

//Text window
let mask = UIButton(type: .custom)
mask.setTitle (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

As an example, we will understand that as long as the idea of selecting window and scenery is more open, the mask animation effect is various.

Careful students still remember that we left a tail in front of us. I quote from the previous article:

The sentence “fully or partially opaque pixels allow the underlying content to show through” is relatively clear. The opaque part of the mask (including the translucent part, which we will see later), can be accessed by the view.

As the fully opaque mask is easy to understand (that is, the opaque area is cut off as a window), so the previous article takes the fully opaque mask as an example.

After reading this, we have no difficulty in understanding the semi transparent mask, so let’s add the translucent mask.

4、 Translucent mask

Now that you know, the opaque area on the mask is equivalent to describing the area of the window, andThe semi transparency of the mask is equivalent to describing the transparency of the window.

The mask area is completely opaque, and the window is completely transparent, and the view can completely penetrate; while the mask area is translucent, the window is translucent, and the view can vaguely pass through.
The transparency of the mask is inversely proportional to the transparency of the window.

Let’s take a common example in practice.

Here’s an 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 live room).
In this case, the cell slides up and out of the tableview. When the cell is half way down, the edge of the tableview will be obvious because only half of the cells are displayed. As shown in the figure below:

IOS animation window view (1)

We want to make its edge less obvious and have a similar fade out effect. If we use mask to achieve this, we only need to have a vertical gradient view as mask.

Note: the mask here is used as the mask of the superview of the tableview (you can create a view of the same size as the tableview as its superview)

The top of the mask gradually transits to transparent. Accordingly, the window gradually transits to opaque. The top of tableview looks like fading out. The effect is shown in the following figure:

IOS animation window view (1)

The schematic codes are as follows:

//Table view (assisted by tablecontainer)
let tableContainer = UIView()
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 mask for a tablecontainer, not a tableview
tableContainer.mask = mask

Let’s talk about translucent mask first. In the following article, we mainly focus on opaque mask.

The end

At this point, we have a sufficient understanding of mask, and also opened a little window and landscape ideas; next, we’ll take a look at various ways to play mask.

All the examples in this article have complete code in GitHub’s window and scene library.

Thank you for your reading. I’ll see you in the next article.

Portal

  • GitHub’s windowandscape Library
  • IOS animation window view (2)
  • IOS animation window view (3. End)