iOS ui--Rainbow Animation progress bar learning and self-encapsulation improvements

Objective:

Let's start by showing the color progress bar animations for this small iOS example:

Read this article first to talk about the advantages: for the base of the poor reader, you can directly read the end of the text "How to use the Rainbow Animation progress bar" chapter, and then I encapsulated the functional module class used in your project can be.

An example of this effect is a work written by Foreigner Nick Jensen in 2013: Using Cagradientlayer's animated precision bar view. I read the source of the foreigner, I think the effect of this progress bar is very good, but I think he wrote the code needs to be improved.

tip : The reader can directly download the source of the foreigner, run, and then compare the blog I wrote to reconstruct the process of thinking, to learn. Another point is that the foreign source after all the output is early, so with the MRC, the code in the use of retain and release manual memory management, but my source is based on arc, so it does not involve the use of manual memory management code.

Note : This blog post needs to have a certain foundation for iOS development, mainly familiar with the cagradientlayer (color gradient layer), Cashapelayer (Shape layer), Core Animation Foundation and layer, Layer.mask and other knowledge, otherwise readers see this article will have a lot of things do not understand the place. At least you may see the source of the foreigner will have a lot of things do not understand. About Cagradientlayer (color gradient layer), Cashapelayer (shape layer) can read the previous blog post notes.

Text outline:

1. Structural analysis of UI effect implementations
2. How to use the Rainbow progress bar

Body: Structural analysis of UI effect implementations:

• 1. Add a rect (0,0,[uiscreen mainscreen].bounds.size.width,2) Rectangle Cagradientlayer Object first.
• 2. On this Cagradientlayer object, we use the core animation to realize the infinite cyclic rotation process of the rainbow Bar.
• 3, add a mask layer for this cagradientlayer, this mask layer is like adding a rectangle of equal width and height, covering the Gradientlayer object
• 4, then the width of the mask layer to provide an interface for external calls, by changing the width of the mask layer to display the non-obscured part of the rainbow Bar

Code implementation ideas (similar to Nick Jensen, but improved later):

1, overriding the class method Layerclass, will uiview the default Calayer object type Cagradientlayer

2, in the initialization method

3, because of the need for rotation cycle Rainbow Bar animation, so of course need an auxiliary array element conversion algorithm method

< Span class= "token punctuation" > < Span class= "token punctuation" > 
           

4, then through the core animation, to achieve the Rainbow Bar Carousel animation

< Span class= "token punctuation" >   
        /span>                

5, finally overriding the properties of the externally exposed two interfaces

How to use the Rainbow Animation progress bar

1, first to I github on UIView download 5th UIView realize a good small function rainbowprogress.

2. Then drag the entire file directory of the rainbowprogress in the feature project into your project:

3, and then the following direct display of the use of examples, not many interfaces, difficult:

Reprint need to indicate the source: http://www.cnblogs.com/goodboy-heyang/p/5186730.html respect the fruits of labor.

iOS ui--Rainbow Animation progress bar learning and self-encapsulation improvements