Use of the iOS-Mask attribute and the iosmask attribute

Use of the iOS-Mask attribute and the iosmask attribute
Introduction to Mask attributes

MasksToBounds is the most commonly used Mask. In fact, there are many Mask use cases. After reading this, you will find that it is really easy to use...

First, let's take a look at what the Mask attribute is?

Mask is a Mask/Mask, which is usually called a Mask. In the official Apple documentation, for exampleMask is an optional Layer.It can mask the content of a Layer based on transparency.

It seems that I still don't know what egg is...

Then let's look at the following description, which means that the transparency of the Layer determines whether the Layer content can be displayed,Non-transparent content and background can be displayed, while transparent content cannot be displayed.

 

Use a Mask instance

Instance 1: gradient progress bar

First look at "face" and then "meaning"

 

The animation effect can be divided into four steps:

1. Create a CALayer as the background color progress bar

 1     CALayer *bgLayer = [CALayer layer]; 2  3     bgLayer.frame = CGRectMake(kNumberMarkWidth / 2, self.numberMarkView.bottom + 10.f, self.width - kNumberMarkWidth / 2, kProcessHeight); 4  5     bgLayer.backgroundColor = [UIColor colorWithHex:0xF5F5F5].CGColor; 6  7     bgLayer.masksToBounds = YES; 8  9     bgLayer.cornerRadius = kProcessHeight / 2;10 11     [self.layer addSublayer:bgLayer];

 

2. Create a Layer with the CAGradientLayer gradient effect

1 self. gradientLayer = [CAGradientLayer]; 2 self. gradientLayer. frame = bgLayer. frame; 3 self. gradientLayer. masksToBounds = YES; 4 self. gradientLayer. cornerRadius = kProcessHeight/2; 5 // sets the gradient color array 6 [self. gradientLayer setColors: [NSArray identifier: 7 (id) [[UIColor colorWithHex: 0xFF6347] CGColor], 8 [(id) [UIColor colorWithHex: 0xFFEC8B] CGColor], 9 (id) [[UIColor colorWithHex: 0xEEEE00] CGColor], 10 (id) [[UIColor colorWithHex: 0x7FFF00] CGColor], 11 nil]; 12 // sets the gradient position array 13 [self. gradientLayer setLocations: @ [@ 0.3, @ 0.5, @ 0.7, @ 1]; 14 // set the gradient start and end position 15 [self. gradientLayer setStartPoint: CGPointMake (0, 0)]; 16 [self. gradientLayer setEndPoint: CGPointMake (1, 0)];

 

3. create a Mask Layer and set it to the Mask of the CAGradientLayer gradient Layer. then, you can set the maskLayer width to control the progress. isn't it very simple, but it seems that you don't feel the power of Mask...

1  　　self.maskLayer = [CALayer layer];2     self.maskLayer.frame = CGRectMake(0, 0, (self.width - kNumberMarkWidth / 2) * self.percent / 100.f, kProcessHeight);3     [self.gradientLayer setMask:self.maskLayer];

 

1-(void) circleAnimation {// progress bar Animation 2 3 [CATransaction begin]; 4 [CATransaction setDisableActions: NO]; 5 [CATransaction category: [CAMediaTimingFunction functionWithName: enabled]; 6 [CATransaction setAnimationDuration: kAnimationTime]; 7 self. maskLayer. frame = CGRectMake (0, 0, (self. width-kNumberMarkWidth/2) * _ percent/100.f, kProcessHeight); 8 [CATransaction commit]; 9}

 

4. The text gradient shows the features of the Mask.

First, create a Label to display the score, and then create a gradient CAGradientLayer.Set the associated layer of the Label to the Mask of the gradient CAGradientLayer,In this case, OK.

As mentioned above, the Mask attribute features that the content is displayed when the content is not transparent, while the transparency is hidden.

In the instance, the Label is used as the Mask of the gradient layer. The text part in the Label is non-transparent, and others are transparent. the text and text background (here the gradient layer) can be displayed. it is like a hollow text section, and then the gradient layer is displayed.

At last, you only need to move the Label position to see the gradient of the text color. The lower left is set to Mask, and the lower right is not set to Mask.

 

1-(void) setNUmberMarkLayer {// The prompt text sets gradient 2 3 CAGradientLayer * numberGradientLayer = [CAGradientLayer]; 4 numberGradientLayer. frame = CGRectMake (0, kTopSpaces, self. width, kNumberMarkHeight); 5 [numberGradientLayer setColors: self. colorArray]; 6 [numberGradientLayer setLocations: self. colorLocationArray]; 7 [numberGradientLayer setStartPoint: CGPointMake (0, 0)]; 8 [numberGradientLayer setEndPoint: CGPointMake (1, 0)]; 9 [self. layer addSublayer: numberGradientLayer]; 10 [numberGradientLayer setMask: self. numberMark. layer]; 11 self. numberMark. frame = numberGradientLayer. bounds; 12}

 

Source code can be viewed in github: https://github.com/xl20071926/LXGradientProcessView

In addition, there are similar imitation sesame credit, with Mask and CAShaperLayer do, interested can also see: https://github.com/xl20071926/LXCircleAnimationView

 

Example 2: hollow out Effect

Most apps are guided by new users to have this function, but it is understood that a lot of it is done by directly posting images.

Well, it's really easy to do this, but it's good Low and the effect is not good, so let's use the hollow-out method that forces a high point to achieve it:

Here is a simple example:

The implementation is also very simple, mainly divided into three steps:

1. Create a hollow path:

UIBezierPath has a native method-(void) appendPath :( UIBezierPath *) bezierPath. This method serves to hollow out the overlapping parts of the two paths.

The implementation principle of this method should be that FillRule of path is FillRuleEvenOdd by default (CALayer has a fillRule attribute rule with kCAFillRuleEvenOdd), while EvenOdd is a parity rule and an odd number is displayed, even numbers are not displayed. overlay is an even number, so it is not displayed.

2. Create CAShapeLayer and assign the hollow path to shapeLayer.

3. Set shapeLayer to the Mask of the background view.

1 UIView * backgroundView = [[UIView alloc] init]; 2 backgroundView. frame = self. view. bounds; 3 backgroundView. backgroundColor = [UIColor colorWithWhite: 0 alpha: 0.7]; 4 [self. view addSubview: backgroundView]; 5 // create a full screen large path 6 UIBezierPath * path = [UIBezierPath bezierPathWithRect: self. view. bounds]; 7 // create a circular path 8 UIBezierPath * circlePath = [UIBezierPath bezierPathWithArcCenter: CGPointMake (self. view. center. x, self. view. center. y-25) 9 radius: 5010 startAngle: 011 endAngle: 2 * M_PI12 clockwise: NO]; 13 [path appendPath: circlePath]; 14 15 CAShapeLayer * shapeLayer = [CAShapeLayer layer]; 16 shapeLayer. path = path. CGPath; 17 backgroundView. layer. mask = shapeLayer;

By the way, you may encounter this kind of requirement in actual development. When tableView slides to a certain position, it will show the new user guide.

At this time, you need to convert the coordinates on tableView to the coordinates relative to the screen. The native method is available:

-(CGRect) convertRect :( CGRect) rect toView :( nullable UIView *) view;

-(CGRect) convertRect :( CGRect) rect fromView :( nullable UIView *) view;