iOS implements an arc-shaped progress bar for a color gradient

The ability to see some progress bars on GitHub is achieved through core graph. It doesn't matter if it's right or wrong, but the development efficiency is obviously much worse, and the operational efficiency is still worth looking at. In fact, using the core animation provided by Apple can be very simple and convenient to achieve the circular progress bar effect, but also can effectively guarantee the animation effect, whether it is forward or backward. Text level is more limited, you can use the code to speak.

1, first to a result

Status of 80%:

Status of 99%:

2, need to use the macro:

#define Degreestoradians (x) (m_pi* (x)/180.0)//convert angle to PI by way of # define  progreess_width 80//Circle diameter #define Progress_line_ Width 4//breadth of Arc

3, Cashapelayer

First, you have to introduce the core animation framework. In order to achieve the ring effect, it is necessary to use the Cashapelayer, the principle is that cashapelayer can be achieved by specifying the path of the way to generate a graph, very convenient.

4, Uibezierpath

Because of the need to draw a circle, Uibeziperpath is a very useful tool for drawing round. Implement the following code to draw the entire track as shown above. This circle is from the angle of 210 degrees to 30 degrees.

Uibezierpath *path = [Uibezierpath bezierpathwitharccenter:cgpointmake (max.) Radius: (progreess_width-progress_line _width)/2 Startangle:degreestoradians ( -210) Endangle:degreestoradians (+) Clockwise:yes];

5. Draw a background track of a completed progress

The simple principle here is that the goal can be achieved with the combination of Cashapelayer and uibezierpath, and the result of this step is as follows:

        _tracklayer = [Cashapelayer layer];//creates a track shape layer        _tracklayer.frame = self.bounds;        [Self.layer Addsublayer:_tracklayer];        _tracklayer.fillcolor = [[Uicolor clearcolor] cgcolor];         _tracklayer.strokecolor = [_strokecolor cgcolor];//Specifies the rendering color of path        _tracklayer.opacity = 0.25;//Background you just have to do the background, don't be too obvious. , less transparency        _tracklayer.linecap = kcalinecapround;//The edge of the specified line is round        _tracklayer.linewidth = progress_line_width;// The width of the line        uibezierpath *path = [Uibezierpath bezierpathwitharccenter:cgpointmake (max.) Radius: (progreess_ Width-progress_line_width)/2 Startangle:degreestoradians ( -210) Endangle:degreestoradians (+) clockwise:YES];// Described above to build a circular        _tracklayer.path =[path Cgpath];//pass path to layer, then the layer will handle the corresponding rendering, the entire logic and coregraph are consistent.

6. Gradient Progress bar:

The first thing to make clear is that we need the color to vary from red to yellow and then to blue, depending on the percentage.
How to achieve this color gradient effect. Here we need to use the Cagradientlayer,cagradientlayer is a layer to draw the color gradient (if you use transparent color, you can also do a transparent gradient). We first use the Cagradientlayer to make the gradient effect, and then the Shapelayer as a gradientlayer mask to intercept the necessary parts, in order to achieve the gradient of the progress bar effect.

First, you need to build a color gradient along the arc. The above requirements can be broken down into two parts.
① the left half of the color from the red gradient to yellow.
② the right half, the color fades from yellow to blue.
Thus we can see that we need two cashapelayer.
Why do you have to toss it? Cashapelayer cannot fade along an arc, only specify a gradient between two points. So only the curve to the salvation.
First look at the effect of this section:

Then, create a new cashapelayer to intercept the layer of this color gradient.
This part of the code looks like this:

        _progresslayer = [Cashapelayer layer];        _progresslayer.frame = Self.bounds;        _progresslayer.fillcolor = [[Uicolor clearcolor] cgcolor];        _progresslayer.strokecolor = [Process_color Cgcolor];        _progresslayer.linecap = Kcalinecapround;        _progresslayer.linewidth = Progress_line_width;        _progresslayer.path = [path Cgpath];        _progresslayer.strokeend = 0;        Calayer *gradientlayer = [Calayer layer];        Cagradientlayer *gradientlayer1 = [Cagradientlayer layer];        Gradientlayer1.frame = CGRectMake (0, 0, SELF.WIDTH/2, self.height); [GradientLayer1 Setcolors:[nsarray arraywithobjects: (ID) [[uicolor Redcolor] cgcolor], (ID) [Uicolorfromrgb (0xfde802)        Cgcolor], nil]];        [GradientLayer1 setlocations:@[@0.5,@0.9,@1]];        [GradientLayer1 Setstartpoint:cgpointmake (0.5, 1)];        [GradientLayer1 setendpoint:cgpointmake (0.5, 0)];        [Gradientlayer Addsublayer:gradientlayer1]; Cagradientlayer *gradientlayer2 = [CAgradientlayer layer];        [GradientLayer2 setlocations:@[@0.1,@0.5,@1]];        Gradientlayer2.frame = CGRectMake (SELF.WIDTH/2, 0, SELF.WIDTH/2, self.height); [GradientLayer2 Setcolors:[nsarray arraywithobjects: (ID) [Uicolorfromrgb (0xfde802) Cgcolor], (ID) [Main_blue cgcolor]        , Nil]];        [GradientLayer2 setstartpoint:cgpointmake (0.5, 0)];        [GradientLayer2 Setendpoint:cgpointmake (0.5, 1)];        [Gradientlayer Addsublayer:gradientlayer2]; [Gradientlayer Setmask:_progresslayer]; Using Progresslayer to intercept the gradient layer [Self.layer addsublayer:gradientlayer];

7. Progress bar Effect

Go to the previous step the effect we get is a progress of 100%, the length of the _progresslayer is the same as the length of the _tracklayer. So how do you solve the problem of percentages?

Cashapelayer has a strokeend attribute, which is a floating-point type from 0 to 1, which can be expressed as a percentage, and this property is animatable, which can dynamically represent the change in progress.
As shown in the following code:

-(void) Setpercent: (Nsinteger) Percent animated: (BOOL) animated{    [catransaction begin];    [Catransaction setdisableactions:!animated];    [Catransaction setanimationtimingfunction:[camediatimingfunction Functionwithname:kcamediatimingfunctioneasein]] ;    [Catransaction Setanimationduration:main_screen_animation_time];    _progresslayer.strokeend = percent/100.0;    [Catransaction commit];    _percent = percent;}

8. Summary

The percentage of the ① progress bar is implemented by Cashapelayer's Strokeend property.
② Loop gradient progress bar, by combining Cashapelayer and cagradientlayer implementation, pay attention to the use of the Mask property of the layer.

iOS implements an arc-shaped progress bar for a color gradient