做项目让做一个加载动画,一个圈圈在转中间加一个图片,网上有好多demo,这里我也自己写了一个,中间的图片可加可不加。其中主要用到贝塞尔曲线。UIBezierPath是对CGContextRef的进一步封装,不多说直接上代码：
#import <UIKit/UIKit.h>@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
效果:
如果觉得《IOS贝塞尔曲线圆形进度条和加载动画》对你有帮助，请点赞、收藏，并留下你的观点哦！
