iOS 进度条、加载、安装动画的简单实现
程序员文章站
2023-12-20 16:46:46
首先看一下效果图:
下面贴上代码:
控制器viewcontroller:
#import
@interfa...
首先看一下效果图:
下面贴上代码:
控制器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 进度条、加载、安装动画的简单实现,希望对大家有所帮助