ios弧形进度条_IOS贝塞尔曲线圆形进度条和加载动画-阿里云开发者社区

做项目让做一个加载动画,一个圈圈在转中间加一个图片,网上有好多demo,这里我也自己写了一个,中间的图片可加可不加。其中主要用到贝塞尔曲线。UIBezierPath是对CGContextRef的进一步封装,不多说直接上代码：

#import

@interface CircleLoader : UIView

//进度颜色

@property(nonatomic, retain) UIColor* progressTintColor ;

//轨道颜色

@property(nonatomic, retain) UIColor* trackTintColor ;

//轨道宽度

@property (nonatomic,assign) float lineWidth;

//中间图片

@property (nonatomic,strong) UIImage *centerImage;

//进度

@property (nonatomic,assign) float progressValue;

//提示标题

@property (nonatomic,strong) NSString *promptTitle;

//开启动画

@property (nonatomic,assign) BOOL animationing;

//隐藏消失

- (void)hide;

@end

#import "CircleLoader.h"

@interface CircleLoader ()

@property (nonatomic,strong) CAShapeLayer *trackLayer;

@property (nonatomic,strong) CAShapeLayer *progressLayer;

@end

@implementation CircleLoader

- (instancetype)initWithFrame:(CGRect)frame

{

self = [super initWithFrame:frame];

if (self) {

self.backgroundColor=[UIColor clearColor];

}

return self;

}

-(void)drawRect:(CGRect)rect

{

[super drawRect:rect];

_trackLayer=[CAShapeLayer layer];

_trackLayer.frame=CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);

_trackLayer.lineWidth=_lineWidth;

_trackLayer.strokeColor=_trackTintColor.CGColor;

_trackLayer.fillColor = self.backgroundColor.CGColor;

_trackLayer.lineCap = kCALineCapRound;

[self.layer addSublayer:_trackLayer];

_progressLayer=[CAShapeLayer layer];

_progressLayer.frame=CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);

_progressLayer.lineWidth=_lineWidth;

_progressLayer.strokeColor=_progressTintColor.CGColor;

_progressLayer.fillColor = self.backgroundColor.CGColor;

_progressLayer.lineCap = kCALineCapRound;

[self.layer addSublayer:_progressLayer];

if (_centerImage!=nil) {

UIImageView *centerImgView=[[UIImageView alloc]initWithImage:_centerImage];

centerImgView.frame=CGRectMake(_lineWidth, _lineWidth, self.frame.size.width-2*_lineWidth, self.frame.size.height-_lineWidth*2);

// centerImgView.center=self.center;

centerImgView.layer.cornerRadius=(self.frame.size.width+_lineWidth)/2;

centerImgView.clipsToBounds=YES;

[self.layer addSublayer:centerImgView.layer];

}

[self start];

}

- (void)drawBackgroundCircle:(BOOL) animationing {

//贝塞尔曲线 0度是在十字右边方向 －M_PI/2相当于在十字上边方向

CGFloat startAngle = - ((float)M_PI / 2); // 90 Degrees

//

CGFloat endAngle = (2 * (float)M_PI) + - ((float)M_PI / 8);;

CGPoint center = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);

CGFloat radius = (self.bounds.size.width - _lineWidth)/2;

UIBezierPath *processPath = [UIBezierPath bezierPath];

// processPath.lineWidth=_lineWidth;

UIBezierPath *trackPath = [UIBezierPath bezierPath];

// trackPath.lineWidth=_lineWidth;

//---------------------------------------

// Make end angle to 90% of the progress

//---------------------------------------

if (!animationing) {

endAngle = (_progressValue * 2*(float)M_PI) + startAngle;

}

else

{

endAngle = (0.1 * 2*(float)M_PI) + startAngle;

}

[processPath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];

[trackPath addArcWithCenter:center radius:radius startAngle:0 endAngle:2*M_PI clockwise:YES];

_progressLayer.path = processPath.CGPath;

_trackLayer.path=trackPath.CGPath;

}

- (void)start

{

[self drawBackgroundCircle:_animationing];

if (_animationing) {

CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

rotationAnimation.toValue = [NSNumber numberWithFloat:M_PI * 2.0];

rotationAnimation.duration = 1;

rotationAnimation.cumulative = YES;

rotationAnimation.repeatCount = HUGE_VALF;

[_progressLayer addAnimation:rotationAnimation forKey:@"rotationAnimation"];

}

}

- (void)hide

{

[_progressLayer removeAllAnimations];

[self removeFromSuperview];

}

@end

调用:

#import "ViewController.h"

#import "CircleLoader.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

//设置视图大小

CircleLoader *view=[[CircleLoader alloc]initWithFrame:CGRectMake(100, 100, 70, 70)];

//设置轨道颜色

view.trackTintColor=[UIColor redColor];

//设置进度条颜色

view.progressTintColor=[UIColor greenColor];

//设置轨道宽度

view.lineWidth=5.0;

//设置进度

view.progressValue=0.7;

//设置是否转到 YES进度不用设置

view.animationing=YES;

//添加中间图片 不设置则不显示

view.centerImage=[UIImage imageNamed:@"yzp_loading"];

//添加视图

[self.view addSubview:view];

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

//视图隐藏

// [view hide];

});

}

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

@end

效果: