iOS 使用 CAShapeLayer 与贝塞尔曲线实现进度圆的动画

iOS 使用 CAShapeLayer 与贝塞尔曲线实现进度圆的动画

1.创建一个继承于 view 的 CircleView 视图

2.根据需求设置参数

/***  需要确定的参数 起始值 / 接收变化的值 / 边框宽 /边框颜色*//***  起始值  (0 ~ 1)*/@property (nonatomic,assign) CGFloat startValue;/***  线条宽*/@property (nonatomic,assign) CGFloat linewidth;/***  线条颜色*/@property (nonatomic,strong) UIColor *lineColor;/***  变化值*/@property (nonatomic,assign) CGFloat value;- (void)startAniamtion;- (void)endAnimation;//3.在. m 文件//创建一个延展@interface CircleView ()@property (nonatomic,strong) CAShapeLayer *shape;@end- (instancetype)initWithFrame:(CGRect)frame{self = [super initWithFrame:frame];if (self) {_shape = [CAShapeLayer layer];_shape.frame = self.bounds;//创建出贝塞尔曲线UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:self.bounds ];_shape.path = circlePath.CGPath;_shape.fillColor = [UIColor clearColor].CGColor;_shape.lineWidth = 1.f;_shape.strokeColor = [UIColor redColor].CGColor;_shape.strokeEnd = 0.f;[self.layer addSublayer:_shape];}return self;}@synthesize startValue = _startValue;-(void)setStartValue:(CGFloat)startValue{_startValue = startValue;_shape.strokeEnd = startValue;}-(CGFloat)startValue{return _startValue;}@synthesize linewidth = _linewidth;-(void)setLinewidth:(CGFloat)linewidth{_linewidth = linewidth;_shape.lineWidth = linewidth;}-(CGFloat)linewidth{return _linewidth;}@synthesize lineColor = _lineColor;-(void)setLineColor:(UIColor *)lineColor{_lineColor = lineColor;_shape.strokeColor = lineColor.CGColor;}-(UIColor *)lineColor{return _lineColor;}@synthesize value = _value;- (void)setValue:(CGFloat)value{_value = value;_shape.strokeEnd = value;}-(CGFloat)value{return _value;}- (void)startAniamtion{CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];animation.fromValue = @0;animation.toValue = @1;animation.repeatCount = MAX_CANON;animation.duration = 5.f;[_shape addAnimation:animation forKey:nil];}//4.ok, 这里已经创建完成,去控制器里面实现吧!_circleView = [[CircleView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];_circleView.center = self.view.center;_circleView.startValue = 0.f;[self.view addSubview:_circleView];[self performSelector:@selector(animationAction) withObject:nil afterDelay:2];- (void)animationAction{[_circleView startAniamtion];}//综上,只是简单的实现进度圆