通过布赛尔曲线以及CAShapeLayer的strokeStart 、strokeEnd 属性来实现一个圆形进度条

#import <UIKit/UIKit.h>@interface CircleProgressView : UIView/**起始值（0-1）*/@property(nonatomic,assign)CGFloat fstartValue;/**边框宽度*/@property(nonatomic,assign)CGFloat flineWidth;/**线条颜色*/@property(nonatomic,strong)UIColor *lineColor;/**变化的值*/@property(nonatomic,assign)CGFloat fvalue;@end#import "CircleProgressView.h"@interface CircleProgressView (){  CAShapeLayer *_shapeLayer;}@end@implementation CircleProgressView@synthesize fstartValue=_fstartValue;@synthesize flineWidth=_flineWidth;@synthesize lineColor=_lineColor;@synthesize fvalue=_fvalue;- (instancetype)initWithFrame:(CGRect)frame{  self = [super initWithFrame:frame];  if (self)  {    /**创建带形状的图层*/    _shapeLayer=[CAShapeLayer layer];    _shapeLayer.frame   = self.bounds;    _shapeLayer.strokeEnd = 0.f;        /*创建布赛尔曲线*/    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.bounds];        /**把图层和不塞尔曲线通过path进行关联*/    _shapeLayer.path  = path.CGPath;        /**设置图层的填充颜色、宽度、边框颜色*/    _shapeLayer.fillColor  = [UIColor clearColor].CGColor;    _shapeLayer.lineWidth  = 1.0f;    _shapeLayer.strokeColor = [UIColor redColor].CGColor;        [self.layer addSublayer:_shapeLayer];  }  return self;}/** * @brief 重写fstartValue的setter方法 * @param fstartValue 设置圆形strokeStart起始值 * @since */- (void)setFstartValue:(CGFloat)fstartValue{  _fstartValue     = fstartValue;  _shapeLayer.strokeStart = fstartValue;  }- (CGFloat)fstartValue{  return _fstartValue;}/** * @brief 重写flineWidth的setter方法 * @param flineWidth 设置圆形边框宽度 * @since */- (void)setFlineWidth:(CGFloat)flineWidth{  _flineWidth      = flineWidth;  _shapeLayer.lineWidth = flineWidth;}/** * @brief 重写lineColor的setter方法 * @param lineColor 设置圆形边框颜色 * @since */- (void)setLineColor:(UIColor *)lineColor{  _lineColor       = lineColor;  _shapeLayer.strokeColor = lineColor.CGColor;}- (UIColor *)lineColor{  return _lineColor;}/** * @brief 重写fvalue的setter方法 * @param lineColor 设置圆形的strokeEnd值 * @since */- (void)setFvalue:(CGFloat)fvalue{  _fvalue        = fvalue;  _shapeLayer.strokeEnd = fvalue;}- (CGFloat)fvalue{  return _fvalue;}@end#import "ViewController.h"#import "CircleProgressView.h"@interface ViewController (){  CircleProgressView *progress;}@end@implementation ViewController- (void)viewDidLoad{  [super viewDidLoad];    progress       = [[CircleProgressView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];  progress.center   = self.view.center;  progress.lineColor  = [UIColor redColor];  progress.flineWidth = 1.0f;  progress.fstartValue = 0;  [self.view addSubview:progress];  [NSTimer scheduledTimerWithTimeInterval:1.0f target:self selector:@selector(circleAnimation) userInfo:nil repeats:YES];  }- (void)circleAnimation{  progress.fvalue = arc4random()%100/100.f;}- (void)didReceiveMemoryWarning{  [super didReceiveMemoryWarning];  }@end

images/loading.gif' data-original="webkit-fake-url://1b522490-9581-453e-8b8b-9589e120b56a/image.tiff" />

原标题：通过布赛尔曲线以及CAShapeLayer的strokeStart 、strokeEnd 属性来实现一个圆形进度条

关键词：