The method of realizing the fading effect of IOS text _ios

As usual, the text gradient effect chart

Realize the following ideas

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

Second, the use of text layers to crop the gradient layer, only retain the text part, will let the gradient layer only retains the part of the text, which is equivalent to letting the gradient layer display text, we see is actually cut after the gradual change of the layer of content.

Note: If you crop the gradient layer with a type layer, the text layer does not have the display function, the layer is cropped, will not be shown, in the following code will also be described.

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

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

Three, mask layer working principle:

1. According to the transparency of the crop, only to retain the non-transparent part, display the bottom content.

The sample code is as follows

Create Uilabel Uilabel *label = [[Yzlabel alloc] init];

  Label.text = @ "small brother, focus on advanced iOS development Engineer Training";

  [Label SizeToFit];  Label.center = Cgpointmake (200, 100);
  Question: Label is only used for text clipping, can not be added to the view.
  You must add the label to the view, and if you do not add it to the view, the label's layer does not invoke the DrawRect method to draw the text, and there is no text cropping.  How to verify, Custom label, rewrite DrawRect method, see whether call, find not add up, will not invoke [Self.view Addsubview:label];

  Create a gradient layer cagradientlayer *gradientlayer = [Cagradientlayer layer];  Gradientlayer.frame = Label.frame; Sets the color of the gradient layer, random color gradient gradientlayer.colors = @[(ID) [self randomcolor]. Cgcolor, (ID) [self randomcolor]. Cgcolor, (ID) [self randomcolor].  Cgcolor]; Question: Can the gradient layer be added to the label//not, Mask principle: The default will show the content at the bottom of the mask layer, if the gradient layer on the mask layer, it will not show//add gradient layer to the controller's view layer [Self.view.layer addsub  Layer:gradientlayer];
  Mask Layer Working principle: according to the transparency cut, only to retain the non-transparent part, the text is non-transparent, so in addition to the text, the other are cropped, so that only the text below the gradient layer of content, equivalent to leave the text of the area, so that the gradient layer to fill the color of the text.  Set the clipping layer of the gradient layer gradientlayer.mask = Label.layer; Note: Once the label layer is set to the mask layer, the label layer can not be displayed, will be directly removed from the parent layer, and then as the gradient layer of the mask layer, and the label layer of the parent layer will point to the gradient layer, the purpose: To facilitate the calculation of the gradient layerRegion, if the other layer as the coordinate system, but also need to do a point of conversion, the other coordinate systems need to be converted into their own coordinate system points, to determine the current point is not in the cutting range, more trouble.
  The parent layer is changed, the coordinate system is changed, the position of the label needs to be reset in order to set the cropping area correctly.  Label.frame = Gradientlayer.bounds; Using the timer, quickly switch the gradient color, there will be text color change effect cadisplaylink *link = [Cadisplaylink displaylinkwithtarget:self selector: @selector (

  Textcolorchange)];  [link Addtorunloop:[nsrunloop Mainrunloop] formode:nsdefaultrunloopmode];        Random Color Method-(Uicolor *) randomcolor{cgfloat r = Arc4random_uniform (256)/255.0;        CGFloat g = Arc4random_uniform (256)/255.0;        CGFloat B = arc4random_uniform (256)/255.0;
  return [Uicolor colorwithred:r green:g blue:b alpha:1]; }//Timer trigger Method-(void) Textcolorchange {_gradientlayer.colors = @[(ID) [self randomcolor]. Cgcolor, (ID) [self randomcolor]. Cgcolor, (ID) [self randomcolor]. Cgcolor, (ID) [self randomcolor]. Cgcolor, (ID) [self randomcolor].  
  Cgcolor]; }

Summarize

The above is the full content of the iOS text Fade implementation method, how? The implementation of the effect is good, and the code in the text gives a detailed explanation. I hope this article will be helpful to your iOS developers, and if you have any questions, you can leave a message to communicate.