【iOS】带端点的进度圆环

效果如图：

002.gif

根据项目需求，实现了以上效果的圆环；
对于圆环，主要分三层：
1.最底层灰色圆环；
2.上层的进度圆环；
3.进度小圆点；
里面的内容显示用Masonry进行布局即可，这里就不过多介绍；
圆环的实现使用CAShapeLayer，通过UIBezierPath绘制圆环路径，并将该路径赋值给CAShapeLayer的path属性；
CAShapeLayer的常用属性：

path //从贝塞尔曲线获取到形状
strokeColor //边缘线的颜色
fillColor //闭环填充的颜色
lineCap //边缘线的类型
lineWidth //线条宽度
strokeStart //画笔起始位置
strokeEnd //画笔结束位置

底层圆环绘制代码：

- (void)drawDownLayer
{
    if(!_downLayer){
        _downLayer = [[CAShapeLayer alloc]init];
        _downLayer.frame = self.bounds;
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake((CGRectGetMaxX(self.frame) - CGRectGetMinX(self.frame)) / 2, (CGRectGetMaxY(self.frame) - CGRectGetMinY(self.frame)) / 2) radius:self.bounds.size.width/2 startAngle:(M_PI*(-90))/180 endAngle:(M_PI*(270))/180 clockwise:YES];
        _downLayer.path = path.CGPath;
        _downLayer.lineWidth = self.linewidth;
        _downLayer.lineCap = kCALineCapSquare;
        _downLayer.strokeColor = [UIColor lightGrayColor].CGColor;
        _downLayer.fillColor = [UIColor clearColor].CGColor;
        [self.layer addSublayer:_downLayer];
    }
}

上层的进度圆环绘制代码：

- (void)drawUpLayer
{
    if(!_upLayer){
    _upLayer = [[CAShapeLayer alloc]init];
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = self.duration;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    [_upLayer addAnimation:pathAnimation forKey:@"shapeLayerAnimation"];
    _upLayer.frame = self.bounds;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake((CGRectGetMaxX(self.frame) - CGRectGetMinX(self.frame)) / 2, (CGRectGetMaxY(self.frame) - CGRectGetMinY(self.frame)) / 2) radius:self.bounds.size.width/2 startAngle:(M_PI*(-90))/180 endAngle:(M_PI*(270))/180*_percent clockwise:YES];
    path.lineCapStyle = kCGLineCapRound;
    _upLayer.path = path.CGPath;
    _upLayer.lineWidth = self.linewidth;
    _upLayer.lineCap = kCALineCapRound;
    _upLayer.strokeColor = self.color.CGColor;
    _upLayer.fillColor = [UIColor clearColor].CGColor;
    [_downLayer addSublayer:_upLayer];
    }
}

由于上层圆环的动画时间有一定要求，所以使用CABasicAnimation对其动画时间进行操作
两层圆环的绘制已经完成，接下来是小圆点的路径和运动；
使用CAKeyframeAnimation，并为其添加圆形运动轨迹:

- (void)point
{
    CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    pathAnimation.calculationMode = kCAAnimationPaced;
    pathAnimation.fillMode = kCAFillModeForwards;
    pathAnimation.removedOnCompletion = NO;
    pathAnimation.duration = self.duration;
    pathAnimation.repeatCount = 0;
    float radiuscale = 1;
    CGFloat origin_x = self.frame.size.width/2;
    CGFloat origin_y = self.frame.size.height/2;
    CGFloat radiusX = self.frame.size.width/2;
    float a = -M_PI / 2;
    float b = (-M_PI / 2 + 2 * M_PI) * _percent;
    CGMutablePathRef path = CGPathCreateMutable();
    CGAffineTransform t = CGAffineTransformConcat(CGAffineTransformConcat(CGAffineTransformMakeTranslation(-origin_x, -origin_y),CGAffineTransformMakeScale(radiuscale, radiuscale)),
                                                   CGAffineTransformMakeTranslation(origin_x, origin_y));
    CGPathAddArc(path, &t, origin_x, origin_y, radiusX ,a , b, 0);
    pathAnimation.path = path;
    CGPathRelease(path);
    if(!_point){
        _point = [[UIView alloc] init];
        [self addSubview: _point];
        _point.frame = CGRectMake(self.bounds.size.width/2, 0, self.linewidth*2+2, self.linewidth*2+2);
        [_point.layer setCornerRadius:(self.linewidth*2+2)/2];
        _point.backgroundColor = self.color;
        [_point.layer addAnimation:pathAnimation forKey:@"movePoint"];
    }
}