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];
}
综上,只是简单的实现进度圆
网友评论