欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-20 16:46:46
首先看一下效果图: 下面贴上代码: 控制器viewcontroller: #import @interfa...

首先看一下效果图:

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 进度条、加载、安装动画的简单实现,希望对大家有所帮助

上一篇:

下一篇: