CAShaperLayer环形进度条加载动画

介绍一个简单好玩的动画给各位默默敲码的攻城狮们。一个基于Layer层的环型进度条的动画吧，这个动画我们可以在加载数据和倒计时的时候看到，还有录制小视频时的一个小动画吧。
关键技术就是用CAShaperLayer构建一个圆形的图层，再用贝塞尔曲线来绘制一个边，通过动画了来控制一个叫做“strokeEnd”的属性让一个边显示出来。
网上对strokeEnd和strokeStart的解释是 对绘制的Path进行分区。这两个属性的值在0~1之间，0代表Path的开始位置，1代表Path的结束位置。是一种线性递增关系。strokeStart默认值为0，strokeEnd默认值为1。这两个属性都支持动画。http://www.cocoachina.com/ios/20160711/17007.html 这篇文章有相关介绍。
这里展示一下代码，

//----------------  环行进度条动画  -----------------------
    CGRect ScreenRect= [[UIScreen mainScreen] bounds];
    
    self.view.backgroundColor = [UIColor whiteColor];
    
    CAShapeLayer * circleLayer = [CAShapeLayer layer];
    circleLayer.frame = CGRectMake(0, 0, 200, 200);
    circleLayer.position = CGPointMake(CGRectGetWidth(ScreenRect)/2, CGRectGetHeight(ScreenRect)/2);
    UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:circleLayer.bounds];
    circleLayer.path = path.CGPath;
    circleLayer.fillColor = [[UIColor clearColor] CGColor];
    circleLayer.lineWidth = 2.0f;
    circleLayer.strokeColor = [[UIColor cyanColor] CGColor];
    [self.view.layer addSublayer:circleLayer];
    
    CABasicAnimation * progressAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    progressAnima.duration = 5;
    progressAnima.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
    progressAnima.repeatCount = HUGE_VALF;//无限次
    progressAnima.fromValue = @0.0;
    progressAnima.toValue   = @1.0;
    progressAnima.fillMode = kCAFillModeForwards;
    progressAnima.removedOnCompletion = YES;
    
    [circleLayer addAnimation:progressAnima forKey:@"progressAnimation"];

动画原理就是让strokeEnd这个属性值由0.0 ---> 1.0这么一个过程，有点抽象吧，大家知道怎么用就行了。

Untitled.gif