Circular progress bar Animation "Loading" based on Cashapelayer and Bezier curves

The first contact with Cashapelayer and Bezier curves, see the next Geek College video. It feels good for beginners. Today, a tutorial on creating a simple circular progress bar with Cashapelayer and Bezier curves
Let's start with a brief introduction to the next Cashapelayer
1,cashapelayer inherits from Calayer, all properties of Calayer can be used
It makes sense to use 2,cashapelayer with Bezier curves.
Shape: Shapes
Bezier curves can provide shapes for them, and it makes no sense to use cashapelayer alone.
3, using Cashapelayer and Bezier curves can be implemented in the DrawRect method of the view to draw some of the desired graphics

A comparison of Cashapelayer and DrawRect
Drawrect:drawrect belongs to Coregraphic frame, consumes CPU and consumes high performance
Cashapelayer:cashapelayer belongs to the Coreanimation framework, rendering graphics through the GPU, saving performance. Animated rendering delivered directly to the phone's GPU, without consuming memory

The relationship between Bezier curve and Cashapelayer
Shape is the meaning of shapes in 1,cashapelayer, so it takes shape to take effect
2, Bezier curves can create vector-based paths
3, Bezier curves provide a path to Cashapelayer and Cashapelayer render in the provided path. The path is closed, so the shape is drawn
4, the Bezier curve for Cashapelayer as path, whose path is a closed-loop, end-to-end curve, even if the Bezier curve is not a closed-loop curve

Let's talk about it. See how to create a simple circular progress bar

12	//创建全局属性的ShapeLayer@property(nonatomic, strong) CAShapeLayer *shapeLayer;

12345678910111213141516171819202122

- (void)viewDidLoad {    [super viewDidLoad];         //创建出CAShapeLayer    self.shapeLayer = [CAShapeLayer layer];    self.shapeLayer.frame = CGRectMake(0, 0, 200, 200);//设置shapeLayer的尺寸和位置    self.shapeLayer.position = self.view.center;    self.shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充颜色为ClearColor        //设置线条的宽度和颜色    self.shapeLayer.lineWidth = 1.0f;    self.shapeLayer.strokeColor = [UIColor redColor].CGColor;         //创建出圆形贝塞尔曲线    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];        //让贝塞尔曲线与CAShapeLayer产生联系    self.shapeLayer.path = circlePath.CGPath;        //添加并显示    [self.view.layer addSublayer:self.shapeLayer];}

That's when we run down to see that there's going to be a circle

Now we're going to use the two parameters of Cashapelayer, Strokeend and Strokestart.
Stroke: Using the meaning of a stroke
Here's where the starting and ending pens are.
A stroke of 1 is a full circle, 0.5 is a half circle, and 0.25 is 1/4 laps. And so on

If we set the starting point to 0, the end point is set to 0.75.

123	//设置stroke起始点self.shapeLayer.strokeStart = 0;self.shapeLayer.strokeEnd = 0.75;

Look at the running effect

We can control the starting and ending points, and then we can complete our round progress bar at the price timer.
Add a global variable add, which is the increment we have each time

1234	@interfaceViewController (){    doubleadd;}

and write a timer.

1234567

add = 0.1;//每次递增0.1//用定时器模拟数值输入的情况    _timer = [NSTimer scheduledTimerWithTimeInterval:0.1                                              target:self                                            selector:@selector(circleAnimationTypeOne)                                            userInfo:nil                                             repeats:YES];

Timer every time to the execution of the function, this relatively simple does not explain

12345678910111213141516

- (void)circleAnimationTypeOne{    if (self.shapeLayer.strokeEnd > 1 && self.shapeLayer.strokeStart < 1) {        self.shapeLayer.strokeStart += add;    }else if(self.shapeLayer.strokeStart == 0){        self.shapeLayer.strokeEnd += add;    }        if (self.shapeLayer.strokeEnd == 0) {        self.shapeLayer.strokeStart = 0;    }        if (self.shapeLayer.strokeStart == self.shapeLayer.strokeEnd) {        self.shapeLayer.strokeEnd = 0;    }}

Come on, let's see how it works.

On the demo, for everyone's reference.
Circleanimationtest

"Mount" animation of a circular progress bar based on Cashapelayer and Bezier curves