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];

}

//综上,只是简单的实现进度圆