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

首先看一下效果图：

下面贴上代码：

控制器viewcontroller：

#import <uikit/uikit.h> 
@interface viewcontroller : uiviewcontroller 
@end 
/*** ---------------分割线--------------- ***/ 
#import "viewcontroller.h" 
#import "hwwaveview.h" 
#import "hwcircleview.h" 
#import "hwprogressview.h" 
#import "hwinstallview.h" 
@interface viewcontroller () 
@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 
@implementation viewcontroller 
- (void)viewdidload { 
 [super viewdidload]; 
 //创建控件 
 [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 <uikit/uikit.h> 
@interface hwwaveview : uiview 
@property (nonatomic, assign) cgfloat progress; 
@end 
/*** ---------------分割线--------------- ***/ 
#import "hwwaveview.h" 
#define khwwavefillcolor [uicolor grouptableviewbackgroundcolor] //填充颜色 
#define khwwavetopcolor [uicolor colorwithred:0/255.0 green:191/255.0 blue:255/255.0 alpha:1.0f] //前面波浪颜色 
#define khwwavebottomcolor [uicolor colorwithred:0/255.0 green:191/255.0 blue:255/255.0 alpha:0.4f] //后面波浪颜色 
@interface hwwaveview () 
@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 
@implementation hwwaveview 
- (instancetype)initwithframe:(cgrect)frame 
{ 
 if (self = [super initwithframe:frame]) { 
  self.backgroundcolor = [uicolor clearcolor]; 
  //初始化信息 
  [self initinfo]; 
 } 
 return self; 
} 
- (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:0 offsety: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 (float next_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 <uikit/uikit.h> 
@interface hwcircleview : uiview 
@property (nonatomic, assign) cgfloat progress; 
@end 
/*** ---------------分割线--------------- ***/ 
#import "hwcircleview.h" 
#define khwcirclelinewidth 10.0f 
#define khwcirclefont [uifont boldsystemfontofsize:26.0f] 
#define khwcirclecolor [uicolor colorwithred:0/255.0 green:191/255.0 blue:255/255.0 alpha:1] 
@interface hwcircleview () 
@property (nonatomic, weak) uilabel *clabel; 
@end 
@implementation hwcircleview 
- (instancetype)initwithframe:(cgrect)frame 
{ 
 if (self = [super initwithframe: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; 
 } 
 return self; 
} 
- (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.5 endangle:m_pi * 1.5 + m_pi * 22 * _progress clockwise:yes]; 
 //连线 
 [path stroke]; 
} 
@end 
进度条hwprogressview：
[objc] view plain copy 在code上查看代码片派生到我的代码片
#import <uikit/uikit.h> 
@interface hwprogressview : uiview 
@property (nonatomic, assign) cgfloat progress; 
@end 
/*** ---------------分割线--------------- ***/ 
#import "hwprogressview.h" 
#define kprogressborderwidth 2.0f 
#define kprogresspadding 1.0f 
#define kprogresscolor [uicolor colorwithred:0/255.0 green:191/255.0 blue:255/255.0 alpha:1] 
@interface hwprogressview () 
@property (nonatomic, weak) uiview *tview; 
@end 
@implementation hwprogressview 
- (instancetype)initwithframe:(cgrect)frame 
{ 
 if (self = [super initwithframe: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; 
 } 
 return self; 
} 
- (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 <uikit/uikit.h> 
@interface hwinstallview : uiview 
@property (nonatomic, assign) cgfloat progress; 
@end 
/*** ---------------分割线--------------- ***/ 
#import "hwinstallview.h" 
#define khwinstallviewmargin 10 
#define khwinstallcolor [uicolor colorwithred:0/255.0 green:191/255.0 blue:255/255.0 alpha:1] 
@implementation hwinstallview 
- (instancetype)initwithframe:(cgrect)frame 
{ 
 if (self = [super initwithframe:frame]) { 
  self.backgroundcolor = [uicolor clearcolor]; 
 } 
 return self; 
} 
- (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 

以上所述是小编给大家介绍的ios 进度条、加载、安装动画的简单实现，希望对大家有所帮助