iOS development--ui & text Gradient Effect: Mask property in a layer

Text Gradient Effect: Mask property in a layer

This article, the main story is the Mask property in the layer, using it, you can make the text gradient effect!

First, the text gradient effect:

Second, the text gradient realization idea:

1. Create a color gradient layer that is as large as the text control.

2. Use the text layer to crop the gradient layer, just keep the text part, will let the gradient layer only retain the text of the part, the equivalent of indirectly let the gradient layer display text, we see in fact is trimmed, the gradient layer part of the content.

Note: If you crop a gradient layer with a text layer, the text layer is not in the display function, and the layer is clipped, not displayed, and is described in the code below.

2.1 Create a Label,label with text to display the text.

2.2 Set the mask of the gradient layer to be a label layer, you can crop the gradient layer with text.

How 3.mask layers work:

1. Crop according to transparency, leaving only the non-transparent part, showing the bottom content.

4. Detailed Code + explanation

1 //Create Uilabel2UILabel *label =[[Yzlabel alloc] init];3 4Label.text =@"Small size brother, focus on advanced iOS development engineer's training";5 6 [Label SizeToFit];7 8Label.center = Cgpointmake ( $, -);9 Ten //question: Label is only used for text clipping, can not be added to the view.  One //You must add the label to the view, and if you do not add it to the view, the label's layer does not call the DrawRect method to draw the text, and no text is cropped.  A //How to verify, customize the label, override the DrawRect method, see if it is called, find it not added, do not call - [Self.view Addsubview:label]; -  the //Create a gradient layer -Cagradientlayer *gradientlayer =[Cagradientlayer layer]; -  -Gradientlayer.frame =Label.frame; +  - //set the color of the gradient layer, random color gradient +Gradientlayer.colors = @[(ID) [Self randomcolor]. Cgcolor, (ID) [Self randomcolor]. Cgcolor, (ID) [Self randomcolor]. Cgcolor]; A  at //question: Can the gradient layer be added to the label - //No, Mask principle: the content at the bottom of the mask layer is displayed by default, and if the gradient layer is placed on the mask layer, it will not show -  - //add a gradient layer to a view layer on the controller - [Self.view.layer Addsublayer:gradientlayer]; -  in //Mask Layer Working principle: according to the transparency cut, only the non-transparent parts, the text is non-transparent, so in addition to the text, the other is clipped out, so that only the text below the gradient layer content, equivalent to leave the text area, let the gradient layer to fill the color of the text.  - //to set the clipping layer for a gradient layer toGradientlayer.mask =Label.layer; +  - //Note: Once the label layer is set to mask layer, the label layer can not be displayed, will be removed directly from the parent layer, and then as the mask layer of the gradient layer, and the label layer of the parent layer will point to the gradient layer, the purpose of this: the gradient layer as a coordinate system, easy to calculate the clipping region, If the other layer is a coordinate system, you also need to do some conversion, it is necessary to convert the points in other coordinate systems to the point on their own coordinate system, to determine the current point is not in the clipping range, more troublesome.  the  *  $ //The parent layer changes, the coordinate system is changed, you need to reset the label position in order to correctly set the cropping area. Panax NotoginsengLabel.frame =gradientlayer.bounds; -  the //using the timer, quickly switch the gradient color, there is the text color change effect +Cadisplaylink *link =[Cadisplaylink displaylinkwithtarget:self selector: @selector (Textcolorchange)]; A  the [link Addtorunloop:[nsrunloop mainrunloop] formode:nsdefaultrunloopmode]; +  - //Random Color Method $-(Uicolor *) randomcolor{ $CGFloat r = Arc4random_uniform ( the) /255.0; -CGFloat g = Arc4random_uniform ( the) /255.0; -CGFloat B = Arc4random_uniform ( the) /255.0; the return[Uicolor colorwithred:r green:g blue:b Alpha:1]; - }Wuyi  the //Timer Trigger Method --(void) Textcolorchange { Wu_gradientlayer.colors = @[(ID) [Self randomcolor]. Cgcolor, -(ID) [Self randomcolor]. Cgcolor, About(ID) [Self randomcolor]. Cgcolor, (ID) [Self randomcolor]. Cgcolor, $(ID) [Self randomcolor]. Cgcolor];}

iOS development--ui & text Gradient Effect: Mask property in a layer