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];
}
//綜上,只是簡單的實現進度圓
