iOS 进度条、加载、安装动画的简单实现

#import

@interfaceViewController : UIViewController

@end

/*** ---------------分割线--------------- ***/

#import"ViewController.h"

#import"HWWaveView.h"

#import"HWCircleView.h"

#import"HWProgressView.h"

#import"HWInstallView.h"

@interfaceViewController ()

@property(nonatomic, strong) NSTimer *timer;

@property(nonatomic, weak) HWWaveView *waveView;

@property(nonatomic, weak) HWCircleView *circleView;

@property(nonatomic, weak) HWProgressView *progressView;

@property(nonatomic, weak) HWInstallView *installView;

@end

@implementationViewController

- (void)viewDidLoad {

 [superviewDidLoad];

 //创建控件

 [self creatControl];

 //添加定时器

 [self addTimer];

}

- (void)creatControl

{

 //波浪

 HWWaveView *waveView = [[HWWaveView alloc] initWithFrame:CGRectMake(30,100,150,150)];

 [self.view addSubview:waveView];

 self.waveView = waveView;

 //圆圈

 HWCircleView *circleView = [[HWCircleView alloc] initWithFrame:CGRectMake(220,100,150,150)];

 [self.view addSubview:circleView];

 self.circleView = circleView;

 //进度条

 HWProgressView *progressView = [[HWProgressView alloc] initWithFrame:CGRectMake(30,365,150,20)];

 [self.view addSubview:progressView];

 self.progressView = progressView;

 //加载安装效果

 HWInstallView *installView = [[HWInstallView alloc] initWithFrame:CGRectMake(220,300,150,150)];

 [self.view addSubview:installView];

 self.installView = installView;

}

- (void)addTimer

{

 _timer = [NSTimer scheduledTimerWithTimeInterval:0.2f target:self selector:@selector(timerAction) userInfo:nil repeats:YES];

 [[NSRunLoop mainRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];

}

- (void)timerAction

{

 _waveView.progress +=0.01;

 _circleView.progress +=0.01;

 _progressView.progress +=0.01;

 _installView.progress +=0.01;

 if(_waveView.progress >=1) {

  [self removeTimer];

  NSLog(@"完成");

 }

}

- (void)removeTimer

{

 [_timer invalidate];

 _timer = nil;

}

@end

波浪HWWaveView：

[objc] view plain copy 在CODE上查看代码片派生到我的代码片

#import

@interfaceHWWaveView : UIView

@property(nonatomic, assign) CGFloat progress;

@end

/*** ---------------分割线--------------- ***/

#import"HWWaveView.h"

#define KHWWaveFillColor [UIColor groupTableViewBackgroundColor]//填充颜色

#define KHWWaveTopColor [UIColor colorWithRed:0/255.0green:191/255.0blue:255/255.0alpha:1.0f]//前面波浪颜色

#define KHWWaveBottomColor [UIColor colorWithRed:0/255.0green:191/255.0blue:255/255.0alpha:0.4f]//后面波浪颜色

@interfaceHWWaveView ()

@property(nonatomic, strong) CADisplayLink *displayLink;

@property(nonatomic, assign) CGFloat wave_amplitude;//振幅a（y = asin(wx+φ) + k）

@property(nonatomic, assign) CGFloat wave_cycle;//周期w

@property(nonatomic, assign) CGFloat wave_h_distance;//两个波水平之间偏移

@property(nonatomic, assign) CGFloat wave_v_distance;//两个波竖直之间偏移

@property(nonatomic, assign) CGFloat wave_scale;//水波速率

@property(nonatomic, assign) CGFloat wave_offsety;//波峰所在位置的y坐标

@property(nonatomic, assign) CGFloat wave_move_width;//移动的距离，配合速率设置

@property(nonatomic, assign) CGFloat wave_offsetx;//偏移

@property(nonatomic, assign) CGFloat offsety_scale;//上升的速度

@end

@implementationHWWaveView

- (instancetype)initWithFrame:(CGRect)frame

{

 if(self = [superinitWithFrame:frame]) {

  self.backgroundColor = [UIColor clearColor];

  //初始化信息

  [self initInfo];

 }

 returnself;

}

- (void)initInfo

{

 //进度

 _progress =0;

 //振幅

 _wave_amplitude = self.frame.size.height /25;

 //周期

 _wave_cycle =22* M_PI / (self.frame.size.width *0.9);

 //两个波水平之间偏移

 _wave_h_distance =22* M_PI / _wave_cycle *0.6;

 //两个波竖直之间偏移

 _wave_v_distance = _wave_amplitude *0.4;

 //移动的距离，配合速率设置

 _wave_move_width =0.5;

 //水波速率

 _wave_scale =0.4;

 //上升的速度

 _offsety_scale =0.1;

 //波峰所在位置的y坐标，刚开始的时候_wave_offsety是最大值

 _wave_offsety = (1- _progress) * (self.frame.size.height +22* _wave_amplitude);

 [self addDisplayLinkAction];

}

- (void)addDisplayLinkAction

{

 _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLinkAction)];

 [_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

}

- (void)displayLinkAction

{

 _wave_offsetx += _wave_move_width * _wave_scale;

 //完成

 if(_wave_offsety <=0.01) [self removeDisplayLinkAction];

 [self setNeedsDisplay];

}

- (void)removeDisplayLinkAction

{

 [_displayLink invalidate];

 _displayLink = nil;

}

- (void)drawRect:(CGRect)rect

{

 UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:rect];

 [KHWWaveFillColor setFill];

 [path fill];

 [path addClip];

 //绘制两个波形图

 [self drawWaveColor:KHWWaveTopColor offsetx:0offsety:0];

 [self drawWaveColor:KHWWaveBottomColor offsetx:_wave_h_distance offsety:_wave_v_distance];

}

- (void)drawWaveColor:(UIColor *)color offsetx:(CGFloat)offsetx offsety:(CGFloat)offsety

{

 //波浪动画，进度的实际操作范围是，多加上两个振幅的高度，到达设置进度的位置y

 CGFloat end_offY = (1- _progress) * (self.frame.size.height +22* _wave_amplitude);

 if(_wave_offsety != end_offY) {

  if(end_offY < _wave_offsety) {

   _wave_offsety = MAX(_wave_offsety -= (_wave_offsety - end_offY) * _offsety_scale, end_offY);

  }else{

   _wave_offsety = MIN(_wave_offsety += (end_offY - _wave_offsety) * _offsety_scale, end_offY);

  }

 }

 UIBezierPath *wavePath = [UIBezierPath bezierPath];

 for(floatnext_x =0.f; next_x <= self.frame.size.width; next_x ++) {

  //正弦函数，绘制波形

  CGFloat  next_y = _wave_amplitude * sin(_wave_cycle * next_x + _wave_offsetx +  offsetx / self.bounds.size.width *22* M_PI) + _wave_offsety + offsety;

  if(next_x ==0) {

   [wavePath moveToPoint:CGPointMake(next_x, next_y - _wave_amplitude)];

  }else{

   [wavePath addLineToPoint:CGPointMake(next_x, next_y - _wave_amplitude)];

  }

 }

 [wavePath addLineToPoint:CGPointMake(self.frame.size.width, self.frame.size.height)];

 [wavePath addLineToPoint:CGPointMake(0, self.bounds.size.height)];

 [color set];

 [wavePath fill];

}

@end

圆圈HWCircleView：

[objc] view plain copy 在CODE上查看代码片派生到我的代码片

#import

@interfaceHWCircleView : UIView

@property(nonatomic, assign) CGFloat progress;

@end

/*** ---------------分割线--------------- ***/

#import"HWCircleView.h"

#define KHWCircleLineWidth10.0f

#define KHWCircleFont [UIFont boldSystemFontOfSize:26.0f]

#define KHWCircleColor [UIColor colorWithRed:0/255.0green:191/255.0blue:255/255.0alpha:1]

@interfaceHWCircleView ()

@property(nonatomic, weak) UILabel *cLabel;

@end

@implementationHWCircleView

- (instancetype)initWithFrame:(CGRect)frame

{

 if(self = [superinitWithFrame:frame]) {

  self.backgroundColor = [UIColor clearColor];

  //百分比标签

  UILabel *cLabel = [[UILabel alloc] initWithFrame:self.bounds];

  cLabel.font = KHWCircleFont;

  cLabel.textColor = KHWCircleColor;

  cLabel.textAlignment = NSTextAlignmentCenter;

  [self addSubview:cLabel];

  self.cLabel = cLabel;

 }

 returnself;

}

- (void)setProgress:(CGFloat)progress

{

 _progress = progress;

 _cLabel.text = [NSString stringWithFormat:@"%d%%", (int)floor(progress *100)];

 [self setNeedsDisplay];

}

- (void)drawRect:(CGRect)rect

{

 //路径

 UIBezierPath *path = [[UIBezierPath alloc] init];

 //线宽

 path.lineWidth = KHWCircleLineWidth;

 //颜色

 [KHWCircleColor set];

 //拐角

 path.lineCapStyle = kCGLineCapRound;

 path.lineJoinStyle = kCGLineJoinRound;

 //半径

 CGFloat radius = (MIN(rect.size.width, rect.size.height) - KHWCircleLineWidth) *0.5;

 //画弧（参数：中心、半径、起始角度(3点钟方向为0)、结束角度、是否顺时针）

 [path  addArcWithCenter:(CGPoint){rect.size.width *0.5, rect.size.height *0.5}  radius:radius startAngle:M_PI *1.5endAngle:M_PI *1.5+ M_PI *22*  _progress clockwise:YES];

 //连线

 [path stroke];

}

@end

进度条HWProgressView：

[objc] view plain copy 在CODE上查看代码片派生到我的代码片

#import

@interfaceHWProgressView : UIView

@property(nonatomic, assign) CGFloat progress;

@end

/*** ---------------分割线--------------- ***/

#import"HWProgressView.h"

#define KProgressBorderWidth2.0f

#define KProgressPadding1.0f

#define KProgressColor [UIColor colorWithRed:0/255.0green:191/255.0blue:255/255.0alpha:1]

@interfaceHWProgressView ()

@property(nonatomic, weak) UIView *tView;

@end

@implementationHWProgressView

- (instancetype)initWithFrame:(CGRect)frame

{

 if(self = [superinitWithFrame:frame]) {

  //边框

  UIView *borderView = [[UIView alloc] initWithFrame:self.bounds];

  borderView.layer.cornerRadius = self.bounds.size.height *0.5;

  borderView.layer.masksToBounds = YES;

  borderView.backgroundColor = [UIColor whiteColor];

  borderView.layer.borderColor = [KProgressColor CGColor];

  borderView.layer.borderWidth = KProgressBorderWidth;

  [self addSubview:borderView];

  //进度

  UIView *tView = [[UIView alloc] init];

  tView.backgroundColor = KProgressColor;

  tView.layer.cornerRadius = (self.bounds.size.height - (KProgressBorderWidth + KProgressPadding) *2) *0.5;

  tView.layer.masksToBounds = YES;

  [self addSubview:tView];

  self.tView = tView;

 }

 returnself;

}

- (void)setProgress:(CGFloat)progress

{

 _progress = progress;

 CGFloat margin = KProgressBorderWidth + KProgressPadding;

 CGFloat maxWidth = self.bounds.size.width - margin *2;

 CGFloat heigth = self.bounds.size.height - margin *2;

 _tView.frame = CGRectMake(margin, margin, maxWidth * progress, heigth);

}

@end

加载安装效果HWInstallView：

[objc] view plain copy 在CODE上查看代码片派生到我的代码片

#import

@interfaceHWInstallView : UIView

@property(nonatomic, assign) CGFloat progress;

@end

/*** ---------------分割线--------------- ***/

#import"HWInstallView.h"

#define KHWInstallViewMargin10

#define KHWInstallColor [UIColor colorWithRed:0/255.0green:191/255.0blue:255/255.0alpha:1]

@implementationHWInstallView

- (instancetype)initWithFrame:(CGRect)frame

{

 if(self = [superinitWithFrame:frame]) {

  self.backgroundColor = [UIColor clearColor];

 }

 returnself;

}

- (void)setProgress:(CGFloat)progress

{

 _progress = progress;

 [self setNeedsDisplay];

}

- (void)drawRect:(CGRect)rect

{

 CGContextRef context = UIGraphicsGetCurrentContext();

 CGFloat xCenter = rect.size.width *0.5;

 CGFloat yCenter = rect.size.height *0.5;

 CGFloat radius = MIN(rect.size.width, rect.size.height) *0.5- KHWInstallViewMargin;

 //背景遮罩

 [KHWInstallColor set];

 CGFloat lineW = MAX(rect.size.width, rect.size.height) *0.5;

 CGContextSetLineWidth(context, lineW);

 CGContextAddArc(context, xCenter, yCenter, radius + lineW *0.5+5,0, M_PI *2,1);

 CGContextStrokePath(context);

 //进程圆

 CGContextSetLineWidth(context,1);

 CGContextMoveToPoint(context, xCenter, yCenter);

 CGContextAddLineToPoint(context, xCenter,0);

 CGFloat endAngle = - M_PI *0.5+ _progress * M_PI *2+0.001;

 CGContextAddArc(context, xCenter, yCenter, radius, - M_PI *0.5, endAngle,1);

 CGContextFillPath(context);

}

@end