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这么一个过程，有点抽象吧，大家知道怎么用就行了。

这里随便给大家介绍一个小软件LICEcap，也是我在网上搜到的，已经有的就飘过吧，这是一个Mac上录制屏幕变为GIF图的小软件，方便我们发表一些效果图。http://www.pc6.com/mac/135257.html